# 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:

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"