# WalletJS
Start accepting Apple Pay and/or Google Pay™ payments.
# Overview
# Google Pay™
Google Pay allows users to quickly and easily pay using credit cards stored on their Google account.
We've made it easy to get set up as quickly as possible. By adding our JavaScript file to your website, you can begin accepting Google Pay right away.
Before continuing, please be sure to review the following links:
- Google Pay Web developer documentation (opens new window)
- Integration checklist (opens new window)
- Brand guidelines (opens new window)
All merchants must adhere to the Google Pay APIs Acceptable Use Policy (opens new window) and accept the terms defined in the Google Pay API Terms of Service (opens new window).
You can integrate Google Pay using their pay.js library directly and following the Web developer documentation link above, or you can use our SDK as shown below.
# Step 1 - Create a Google Merchant ID
Visit the Google Pay Business Console (opens new window) to create a merchant account with Google.
Follow the sign up process and once approved, you will receive your Google Pay merchant ID. This will be passed in as a parameter when creating the Google Pay button via our SDK.
# Step 2 - Add JavaScript file
<!doctype html>
<html>
<head>
<!-- Add walletjs.js -->
<script src="https://sandbox.fluidpay.com/walletjs/walletjs.js"></script>
<!-- Add script tag -->
<script>
// Create the settings.
const settings = {
container: '#container',
merchantName: 'Example Merchant',
merchantId: '12345678901234567890',
gatewayMerchantId: '<PUBLIC_API_KEY>',
allowedCardNetworks: ['VISA'],
allowedCardAuthMethods: ['PAN_ONLY'],
transactionInfo: {
countryCode: 'US',
currencyCode: 'USD',
totalPrice: '1.23'
},
onGooglePaymentButtonClicked: paymentDataRequest => {
paymentDataRequest
.then(paymentData => {
// Get the token.
const token = paymentData.paymentMethodData.tokenizationData.token
// Send the token to your backend server, which will
// then call our API to create a new transaction with
// the token set as the payment method.
}).catch(err => {
console.log(err)
})
}
}
// Create a new Google Pay instance with your
// given settings.
let gp = new walletjs.GooglePay(settings)
</script>
</head>
<body>
<!-- The div where the button will go -->
<div id="container"></div>
</body>
</html>
There's no need to add the Google pay.js script to your page, as our SDK automatically appends it.
If testing your integration, replace https://sandbox.fluidpay.com
with your sandbox/test environment URL. When you're ready to launch to production, replace this with your production environment URL.
# Settings
Below are the available settings you can choose from when creating a new Google Pay instance.
Please be sure to set the merchantId
field to your Google Pay merchant ID created earlier, and the gatewayMerchantId
field to your public API key. We will handle setting the gateway
field required by Google's pay.js script for you behind the scenes.
Also, the customer's billing address is not required for our requests.
Name | Type | Definition |
---|---|---|
container | string or HTMLDivElement | An ID, class name, or HTMLDivElement referencing the container you want the Google Pay button to be placed in |
merchantName | string | The name of your merchant account, will appear in payment sheet |
merchantId | string | Your Google Pay merchant ID |
gatewayMerchantId | string | Your public API key associated with our gateway |
allowedCardNetworks | array of strings | Card networks you want to allow, must be one or more of the following:AMEX , DISCOVER , INTERAC , JCB , MASTERCARD , VISA |
allowedCardAuthMethods | array of strings | Card authentication methods you want to allow, must be one or more of the following:PAN_ONLY , CRYPTOGRAM_3DS |
transactionInfo | object | See table below for property descriptions |
onGooglePaymentButtonClicked | function | Function to handle response from a successful or unsuccessful payment |
transactionInfo
Name | Type | Definition |
---|---|---|
countryCode | string | ISO Alpha-2 country code |
currencyCode | string | ISO Alpha-3 country code |
totalPrice | string | Float amount in string format, i.e. '1.23' |
# Step 3 - Process with token
Once you have received the token from the submission callback, you can use the token to replace a payment object in any of our direct API calls. You will usually want to send this token to your own backend server, and then call our API from that server.
See Transaction Processing for more details. Please note that while you can pass in a billing address, it is not required to process a transaction.
See below for an example:
# Process a sale with token as the raw string
We suggest that you take the raw token string as returned from Google and pass it in to the google_pay_token
property of your transaction request, as shown below:
curl -v -X POST \
-H "Authorization: <your API key>" \
-H "Content-Type: application/json" \
-d '{
"type": "sale",
"amount": 123,
"payment_method": {
"google_pay_token": "{\"signature\":\"MEUCI...\",\"intermediateSigningKey\":{\"signedKey\":\"{\\\"keyValue\\\":\\\"MFkwE...\",\\\"keyExpiration\\\":\\\"1628153265706\\\"}\",\"signatures\":[\"MEUCI...\"]},\"protocolVersion\":\"ECv2\",\"signedMessage\":\"{\\\"encryptedMessage\\\":\\\"Al1A3...\",\\\"ephemeralPublicKey\\\":\\\"BHtVx...\",\"tag\\\":\\\"mBOa4...\\\"}\"}"
},
"billing_address": {
"address_line_1": "123 Example St",
"city": "Chicago"
"state": "IL",
"postal_code": "60601"
}
}' \
"<API URL goes here>/transaction"
# Process a sale with token as an object
curl -v -X POST \
-H "Authorization: <your API key>" \
-H "Content-Type: application/json" \
-d '{
"type": "sale",
"amount": 123,
"payment_method": {
"google_pay_token": {
"signature": "MEUCI...",
"intermediateSigningKey": {
"signedKey": "{\"keyValue\":\"MFkwE...",\"keyExpiration\":\"1628153265706\"}",
"signatures": ["MEUCI..."]
},
"protocolVersion": "ECv2",
"signedMessage": "{\"encryptedMessage\":\"Al1A3...",\"ephemeralPublicKey\":\"BHtVx...","tag\":\"mBOa4...\"}"
}
},
"billing_address": {
"address_line_1": "123 Example St",
"city": "Chicago"
"state": "IL",
"postal_code": "60601"
}
}' \
"<API URL goes here>/transaction"
# Apple Pay™
Apple Pay allows users to quickly and easily pay using credit cards stored on their Apple account.
We've made it easy to get set up as quickly as possible. By adding our JavaScript file to your website, you can begin accepting Apple Pay right away.
Before continuing, please be sure to review the following links:
# Step 1 - Add JavaScript file
<!doctype html>
<html>
<head>
<!-- Add walletjs.js -->
<script src="https://sandbox.fluidpay.com/walletjs/walletjs.js"></script>
<!-- Add script tag -->
<script>
const ap = new walletjs.ApplePay({
key: "myKey0123456789",
domain: "", //should be replaced with the environment you are looking to process in sandbox.<domain> or app.<domain>
payment: {
merchantCapabilities: ["supports3DS", "supportsCredit", "supportsDebit"],
supportedNetworks: ["visa", "masterCard", "discover"],
countryCode: "US",
version: 3,
merchantIdentifier: "my.merchant.id.app"
},
details: {
total: {
label: "Total Amount",
amount: { currency: "USD", value: "10.61" }
}
},
options: {
requestShipping: false
}
});
function submitApplePay() {
var resp = ap.submit();
console.log(resp);
}
</script>
</head>
<body>
<!-- button goes here -->
<button type="button" onclick="submitApplePay()">Apple Pay Button</button>
</body>
</html>
# Settings
Below are the available settings you can choose from when creating a new Google Pay instance:
Name | Type | Definition |
---|---|---|
key | string | This is the id of your Apple Pay certificate loaded in the gateway |
merchantIdentifier | string | The ID of your merchant account |
supportedNetworks | array of strings | Card networks you want to allow, must be one or more of the following:amex , discover , masterCard , visa |
merchantCapabilities | array of strings | Card authentication methods you want to allow, must be one or more of the following:supports3DS , supportsCredit , supportsDebit |
# Step 2 - Process with token
Once you have received the token from the submission callback, you can use the token to replace a payment object in any of our direct API calls. You will usually want to send this token to your own backend server, and then call our API from that server.
See Transaction Processing for more details.
See below for an example:
# Process a sale with token
curl -v -X POST \
-H "Authorization: <your API key>" \
-H "Content-Type: application/json" \
-d '{
"type": "sale",
"amount": 123,
"payment_method": {
"apple_pay_token": {
temporary_token: "<token goes here>"
}
}
}' \
"<API URL goes here>/transaction"