This site requires javascript to be enabled.

Google Pay

Results for

Results for Searching
Page topics

You can implement Google Pay directly on your website, by using our client JavaScript SDK. By doing so you directly integrate the Google Pay button on your website. In this case you will be responsible for bringing up the Google Pay payment sheet and retrieving the payment token. Thereafter you can send the payment token to our Create Payment API via the server-to-server SDK to complete the payment. We will handle the decryption for you. This requires more work from your development team, but there are some benefits:

  • Implementing the Google Pay button yourself allows you to show the Google Pay button directly on your website. For example on the product detail page of your products to increase conversion.
  • You can use the Google Pay API to retrieve your customer's personal details such as their address or e-mail address.

You need to take care of the following steps:

  • Enable Google Pay with us
  • Follow the setup guidelines provided by Google
  • Implement Google Pay on your website
  • Apply with Google for production access (on Google's side)

Enabling Google Pay on your account with us

First make sure Google Pay is enabled for the account (merchantId) you have with us. To do so contact your account manager who will work together with your implementation manager. They will be able to set the product up for you. You will also need to have regular card products configured in case you use Google Pay, as Google Pay allows consumers to pay with regular PANs. The transactions which are paid with regular PANS will be processed as regular card payments and it is highly recommended to apply 3-D Secure and fraud validations on these transactions.

Follow the setup guidelines provided by Google

Google has a clear overview of the prerequisites you need to follow before you implement the Google Pay API, which are described on the setup section of the Google documentation. This includes adhering to the Google Pay API Acceptable Use Policy.

Implementing Google Pay on your checkout page

After you have followed the setup guidelines of Google, you can start with the technical integration. Google offers a very clear and concise tutorial on how to implement Google Pay on your website, which you can find here. The technical integration section on this page, explains you the additional steps you need to take to add Google Pay to your checkout page and to send the token to us, which includes:

  • Checking whether Google Pay is currently available
  • Rendering the Google Pay button
  • Initializing the Payment sheet
  • And more!

Since you use us for decrypting the sensitive payment data, the tokenizationType as referred to by Google is: PAYMENT_GATEWAY and below steps explain what you need to do additional to the tutorial of Google in order to implement Google Pay on your checkout page and send us the payment details for decryption.

1. Retrieve Google Pay via the payment product(s) API

The easiest way to check whether Google Pay is available, is by using the JavaScript Client SDK. The JavaScript SDK allows you to retrieve the Google Pay payment product via the payment product(s) API. This will retrieve data that is required in the next steps, such as the supported networks. While retrieving the payment product details, the SDK will also perform a call to Google isReadyToPay API, checking whether Google Pay is available with the device and settings your consumer is using. If this check fails, the Google Pay payment product will not be returned by the SDK, indicating that Google Pay is not available for the current transaction.

Get payment product
// session is an instance of the Session object, which is the main entry point for the SDK
session.getPaymentProduct(320, paymentDetails, paymentProductSpecificInputs).then( function(paymentProduct) { // Google Pay is available, show the Google Pay button // Store the payment product in the Connect payment request session.getPaymentProductRequest().setPaymentProduct(paymentProduct); }, function() { // Google Pay is not available, offer your customer another payment option to complete the payment } );

2. Available credit card networks

You have to provide the card networks allowed for the current Google Pay transaction. The available networks are retrieved in the get payment product call of the client-to-server (and the server-to-server) API. The networks will be available in the paymentProduct320SpecificData in the response. The values that are returned are accepted by the Google Pay API directly.

Since we decrypt for you, you must set a specific value for the "gateway" field of the tokenizationSpecification. This value is also available in the paymentProduct320SpecificData. The gatewayMerchantId is your merchantID number you have with us.

  • merchantID: this is the merchantID you get from Google after registration with the Google Pay Business Console.
  • merchantName: this is the name that is rendered in the payment sheet. It is mandatory to provide this in case you are based in the European Economic Area (EEA) to meet the Strong Customer Authentication (SCA) requirements. The merchantName must be encoded as UTF-8 as per Google's specifications.
  • gateway: use the value returned in the product-response paymentProduct.paymentProduct320SpecificData.gateway
  • gatewayMerchantId: your merchantID with us, with which you process your payments with us 

Below is an extended code snippet, that also shows how you should initialize the allowedCardNetworks as well as the tokenizationSpecification after having retrieved the Google Pay payment product.

Initialize Google Pay
// If you want to use Google Pay in your application, you are required to register
// with Google in order to receive a Google Merchant ID
var paymentProductSpecificInputs = {
  googlePay: {
    merchantId: '<Your Google Merchant ID>',
    merchantName: '<Your merchant name>',
    gatewayMerchantId: '<Your merchant ID with us>'
  }
};
// Retrieve the Google Pay Payment Product via the client to server API
// It is assumed that the session, paymentDetails and paymentProductSpecificInputs objects here are all valid
session.getPaymentProduct(320, paymentDetails, paymentProductSpecificInputs).then(
    function(paymentProduct) {
    
        const allowedCardNetworks = paymentProduct.paymentProduct320SpecificData.networks;
        const tokenizationSpecification = {
            type: 'PAYMENT_GATEWAY',
            parameters: {
                gateway: paymentProduct.paymentProduct320SpecificData.gateway,
                gatewayMerchantId: paymentProductSpecificInputs.googlePay.gatewayMerchantId
            }
        };
    
        // Store the payment product in the payment request which is required for
        // creating the encryptedCustomerData later on
        session.getPaymentRequest().setPaymentProduct(paymentProduct);
    },
    function() {
        // Google Pay is not available, offer your customer another payment option to complete the payment
    }    
);

3. Strong Customer Authentication (SCA) compliance

In case you use an acquirer that is based in one of the European Economic Area (EEA) countries, you need to make sure that you provide information about the country of the acquirer in transactionInfo.countryCode towards Google, to be compliant with the PSD2 Strong Customer Authentication (SCA) requirements. Google Pay will return the appropriate credentials for transactions based on the country of the acquirer used for this transaction.

The acquirerCountry which you need to provide to Google can be retrieved by a payment product call via the server-to-server API or the client-to-server API. This code snippet below shows you how to obtain the acquirerCountry for the transactionInfo object. You also need to include the totalPrice and merchantName parameters as described in step 8.3 of the Google Pay tutorial as well as in the Strong Customer Authentication section on Google's documentation site.

More information on Strong Customer Authentication compliance for Google Pay can be found at Google Pay API documentation.

The code snippet below shows how to obtain the Acquirer Country code from the payment product response, and use it to initialize Google Pay.

Strong Customer Authentication (SCA) compliance
// If you want to use Google Pay in your application, you are required to register
// with Google in order to receive a Google Merchant ID
var paymentProductSpecificInputs = {
   googlePay: {
    merchantId: '<Your Google Merchant ID>',
    merchantName: '<Your merchant name>',
    gatewayMerchantId: '<Your gateway ID with us>'
   }
};
//https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo
var transactionInfo = {
    currencyCode: '<Currency code>',
    totalPriceStatus: '<FINAL>',
    totalPrice: '<Amount>'
};

//Retrieve the Google Pay Payment Product via the client to server API
// It is assumed that the session, paymentDetails and paymentProductSpecificInputs objects here are all valid
session.getPaymentProduct(320, paymentDetails, paymentProductSpecificInputs).then(
    function(paymentProduct) {
    
        const acquirerCountry = paymentProduct.acquirerCountry;
        if (acquirerCountry != null) {
            transactionInfo.countryCode = acquirerCountry;
        }
    },
    function() {
        // Google Pay is not available, offer your customer another payment option to complete the payment
    }
);

4. Rendering the Google Pay button

Once you know Google Pay is available, you can show the Google Pay button to your customer. Please consult Google's documentation on displaying the Google Pay button and ensure you adhere to Google's brand guidelines.

Add Google Pay button
function addGooglePayButton() {
    const paymentsClient = getGooglePaymentsClient();
    const button =
        paymentsClient.createButton({
            onClick: onGooglePaymentButtonClicked
        });
    document.getElementById('container').appendChild(button);
}

5. Initialise and execute the payment

The next step is to respond to your consumer clicking the Google Pay button, by creating a Google Pay payment session and finishing the payment.

Show Google Pay payment sheet
function onGooglePaymentButtonClicked() {
    const paymentDataRequest = getGooglePaymentDataRequest();
    paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
    
    const paymentsClient = getGooglePaymentsClient();
    paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData) {
        // handle the response
processPayment(paymentData); }).catch(function(err) { // show error in developer console for debugging console.error(err); }); }

6. Preparing and sending the payment token

When you receive the response data from the Google Pay payment sheet you cannot directly send that data in the Create Payment API. In order to process the payment, we only require the token from the response. Once you have obtained the token you should send it to your back-end, so that you can use the server-to-server Create Payment API to complete the payment. The Google Pay payment token can be obtained as described below:

Obtain the Google Pay payment token
function processPayment(paymentData) {
    var paymentToken = paymentData.paymentMethodData.tokenizationData.token;
    @todo process the paymentToken as described in the next step
}

7. Sending the Google Pay payment token to us

We allow the payment token to be provided in two different ways in the Create Payment API. The first method just requires you to send us the payment token as the authorization for the payment. The second method was added to offer support for when you are already using our client API. 
1. You can send the token in the field mobilePaymentMethodSpecificInput.encryptedPaymentData. In this case you are also required to set the mobilePaymentMethodSpecificInput.paymentProductId.
Payment request with encryptedPaymentData
{
    "mobilePaymentMethodSpecificInput": {
        "encryptedPaymentData": "{\"signature\":\"MEUCIQCcSASjWu3ax9jQ8qX/+rsNLZ95uiyxamXiKnHlJi8A1QIgZj ...",
        "paymentProductId": "320"
    }
}

2. The payment token may also be provided as a payment value in the encryptedCustomerInput. This input is an encrypted list of key value pairs, usually containing consumer input that was gathered with actual input fields. This means that by sending the payment token in the encryptedCustomerInput the already encrypted payment details of your customer will be encrypted again, before they are sent to your server and eventually our servers. You should use the client JavaScript SDK to create the encryptedCustomerInput. The key for the Google Pay payment token in the encryptedCustomerInput should be the fieldId of the encrypted payment data field that is returned when you retrieve Google Pay via the get Payment Product API. Even though the field is returned as an input field, you are not supposed to expose this field to your consumer.

Payment request with encrypted CustomerInput
// This example assumes that the SDK is initialized correctly
var paymentRequest = session.getPaymentRequest();
paymentRequest.setValue("encryptedPaymentData", "{\"signature\":\"MEUCIQCcSASjWu3ax9jQ8qX/+rsNLZ95uiyxamXiKnHlJi8A1QIgZj ...")

var encryptor = session.getEncryptor();

encryptor.encrypt(paymentRequest).then(function(encryptedString) {
    // Send the encryptedString to your backend. This exact String is the expected value for the
    // encryptedCustomerInput in the server to server Create Payment API
}, function(errors) {
    // Inform the consumer that something went wrong
});

8. Minimal payment request

Below you find an example request with the minimal set of fields that are required to process a Google Pay payment, showing both the option to send in these details in the mobilePaymentMethodSpecificInput.encryptedPaymentData as well as to send it in the encryptedCustomerInput. Please note that the fields required for 3-D secure are not in this example. We highly recommend to add these as shown in the next step.

Create payment request without 3-D Secure properties using encryptedPaymentData
{
    "order" : {
        "amountOfMoney" : {
            "currencyCode" : "EUR",
            "amount" : 2300
        },
        "customer" : {
           "merchantCustomerId": "<Your ID of the consumer>",
           "billingAddress" : { 
                "countryCode" : "NL"
            }
        }
    },
    "mobilePaymentMethodSpecificInput" : { 
        "paymentProductId" : 320, 
        "encryptedPaymentData": "{\"signature\":\"MEUCIQCcSASjWu3ax9jQ8qX/+rsNLZ95uiyxamXiKnHlJi8A1QIgZj ..."
    } 
}
Create payment request without 3-D Secure properties using encryptedCustomerInput
{
    "order" : {
        "amountOfMoney" : {
            "currencyCode" : "EUR",
            "amount" : 2300
        },
        "customer" : {
           "merchantCustomerId": "<Your ID of the consumer>",
           "billingAddress" : { 
                "countryCode" : "NL"
            }
        }
    },
    "encryptedCustomerInput" : "<Encrypted string>" 
}

9. Payment request including the 3-D Secure fields

Google Pay allows consumers to pay with a card on file (usually stored in the Google account of a consumer), which is referred to as PAN_ONLY. For these type of transactions it is recommended to process them as regular card transactions, which means we recommend to send in the 3-D Secure related properties.

In order to support 3-D Secure for cards which are represented in Google Pay as PAN_ONLY, you can fill the threeDSecure object inside the mobilePaymentMethodSpecificInput.paymentProduct320SpecificInput and the device object inside order.customer. It is recommended to send in the 3-D Secure related properties for Google Pay transactions, to ensure the 3-D secure validations can be performed.

Below you find an example you can use to send in a Google Pay request using the encryptedPaymentData, which does include the 3-D Secure properties.

Create payment request with 3-D Secure properties using encryptedPaymentData
{
  "mobilePaymentMethodSpecificInput": {
    "paymentProductId": "320",
    "requiresApproval": true,
    "encryptedPaymentData": "{\"signature\":\"MEUCIQCcSASjWu3ax9jQ8qX/+rsNLZ95uiyxamXiKnHlJi8A1QIgZj ..."
  },
    "paymentProduct320SpecificInput": {
        "threeDSecure": {
          "challengeIndicator": "no-preference",
          "challengeCanvasSize": "600x400",
          "skipAuthentication": false,
          "redirectionData": {
            "returnUrl": "https://hostname.myownwebsite.url",
            "variant": "100"
        }
    }
  },
  "order": {
    "amountOfMoney": {
      "currencyCode": "EUR",
      "amount": 2300
    },
    "customer": {
      "billingAddress": {
        "countryCode": "NL"
      },
      "device": {
        "acceptHeader": "texthtml,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
        "browserData": {
          "colorDepth": 24,
          "javaEnabled": false,
          "screenHeight": "1200",
          "screenWidth": "1920"
        },
        "ipAddress": "123.123.123.123",
        "locale": "en-US",
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1 Safari/605.1.15",
        "timezoneOffsetUtcMinutes": "420"
      },
      "locale": "en_US",
      "merchantCustomerId": "<Your ID of the consumer>"
    }
  }
}

Below you find an example you can use to send in a Google Pay request using the encryptedCustomerInput, which does include the 3-D Secure properties.

Create payment request with 3-D Secure properties using encryptedCustomerInput
{
  "mobilePaymentMethodSpecificInput": {
    "paymentProductId": "320",
    "requiresApproval": true
  },
    "paymentProduct320SpecificInput": {
        "threeDSecure": {
          "challengeIndicator": "no-preference",
          "challengeCanvasSize": "600x400",
          "skipAuthentication": false,
          "redirectionData": {
            "returnUrl": "https://hostname.myownwebsite.url",
            "variant": "100"
        }
    }
  },
  "order": {
    "amountOfMoney": {
      "currencyCode": "EUR",
      "amount": 2300
    },
    "customer": {
      "billingAddress": {
        "countryCode": "NL"
      },
      "device": {
        "acceptHeader": "texthtml,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
        "browserData": {
          "colorDepth": 24,
          "javaEnabled": false,
          "javaScriptEnabled": true,
          "screenHeight": "800",
          "screenWidth": "360"
        },
        "ipAddress": "123.123.123.123",
        "locale": "en-US",
        "userAgent": "Mozilla/5.0 (Linux; Android 10; SM-G980F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.101 Mobile Safari/537.36",
        "timezoneOffsetUtcMinutes": "420"
      },
      "locale": "en_US",
      "merchantCustomerId": "<Your ID of the consumer>"
    },
    "encryptedCustomerInput" : "<Encrypted string>" 
  }
}

10. Apply with Google for production access

After implementation of Google Pay on your own website, you need to register with Google, obtain your merchant ID and get approval for the usage of Google Pay on your checkout page. You can find the details on Google's documentation site in the section "Request production access" as well as "deploy production environment".