Direct Support Site

Results for

icon-search-large No search results yet
Enter your search query above
Page topics

Integration

With Google Pay™, your customers can purchase goods/services with a credit or debit card stored in their Google account. Whether they are shopping from their Android devices or in the internet, the payment process is much simpler: Google Pay™ displays a payment sheet that selects the preferred card payment method that the buyers confirm.
Check out the video to how buyers pay with Google Pay™.

To receive a liability shift when using Google Pay™, you must authenticate the transaction with 3-D Secure.
Our platform offers you two types of integration for your business:

Have a look at the Process flows tab to learn about the full transaction cycle.

  • When using the Google API, make sure to consult the Web / Android / Web Google Pay™ Brand Guidelines. They tell you about the Google Pay™ do’s and don’ts, show the types of supported buttons and best practices to max out your conversion rate
  • To use this payment method, your customers need to install the Google Pay™ app on their device
  • If you want to offer Google Pay™ on your own checkout page, make sure both Visa and MasterCard are active in your Back Office (Configuration > Payment methods). This intergration mode requires your customers with a desktop/tablet device to pay with regular credit cards. In such a scenario, 3-D Secure is mandatory. Learn here how to implement 3-D Secure in the transaction flow

Google Pay™ on your own Checkout page

Use our JavaScript SDK to implement Google Pay™ with the Google Pay™ button directly into your own checkout page. In this case, you need to open a Google Pay™ sheet and get the payment token that Google will encrypt for you with our public key.
When you have received the payment token, you have to send it to us using our Create Payment API call though the Server API to complete the payment. After this step, we will hand the decryption for you.
To do so, you need to

  • Open a Google Pay™ sheet
  • Get the payment token that Google encrypts for you with our public key with the Google API
  • Send the payment token using our CreatePayment API with one of our Server SDKs so we can handle the decryption for you

This integration mode gives you the following benefits:

  • Better visibility of the Google Pay™ button on your website for higher conversion
  • You can use the Google Pay™ API to retrieve your customer’s personal details as their address or email

Once you have followed the Google’s setup guidelines, you are ready for the technical integration . Google offers a very clear and and concise tutorial on how to implement Google Pay™ on your Website. The technical integration includes the following steps:

  1. Retrieve GooglePay™
  2. Get available Credit card networks
  3. Comply to Strong Customer Authentication (SCA)
  4. Render Google Pay™ button
  5. Initialise Payment sheet
  6. Get payment token
  7. Send payment token
  • Because you use us to decrypt sensitive payment information, Google uses the following type of tokenization: PAYMENT_GATEWAY. We will explain the how-to in the following steps
  • Depending on the device used for the payment, two scenarios are possible:
    • 1. Mobile devices: Your customers use a network-tokenised card for the payment. These virtual cards are linked to a device-specific account number (DPAN). A digital signature protects these card from fraudulent use, making 3-D Secure unnecessary
    • 2. Desktop/Tablet devices: Your customers use a non-network tokenised card for the payment. These are standard physcial credit cards that require a 3-D Secure check. Step
      “Send payment token” explains in detail what you have to do in either case

1. Retrieve Google Pay™ 

Use the JavaScript Client SDK to retrieve the Google Pay™ payment product via the payment product(s) API call. This will provide you the data needed for the next steps, such as the supported networks. When receiving the payment produt information, the SDK will also call the Google API isReadyToPay to check whether Google Pay™ is available on the device and the settings that your consumers are using. If the call throws an error, the SDKS will not return Google Pay™ as a usable payment method for the transaction

Use the following code sample to make the call: 


// 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. Get available credit card networks

You have to specify the credit card network allowed for the current Google Pay™ transaction. The GetPaymentProduct call (both via client-to-server and server-to-server) returns the available networks . The networks are available in the response paymentProduct320SpecificData field. The Google Pay™ API directly acceptes the return values.

Since we decrypt for you the Google Pay™ment token, you need to set a specific value for the ‘gateway’ field in the tokenizationSpecification. This value is also available in the paymentProduct320SpecificData. The gatewayMerchantId is your own merchantID (PSPID) on our platform.

  • merchantID: the merchantID you get from Google after registration with the Google Pay™ Business Console.
  • merchantName: the name that is rendered in the payment sheet. This is mandatory if you are based in the European Economic Area (EEA) to meet the Strong Customer Authentication (SCA) requirements. Encode the merchantName as UTF-8 according to Google's specifications
  • gateway: use the value returned in the product-response : paymentProduct.paymentProduct320SpecificData.gateway
  • gatewayMerchantId: your merchantID (PSPID) on our platform


Use the following code snippet to initialise both allowedCardNetworks and the tokenizationSpecification after you have received the Google Pay™ payment product:


 Initialise 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: '', merchantName: '', gatewayMerchantId: '' } }; // 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. Comply to Strong Customer Authentication (SCA)

If your acquirer is from the European Economic Area (EEA) , you must submit the acquiring bank’s country/region information to Google in TransactionInfo.countryCode. This will ensure you comply with PSD2’s strong customer identity verification (SCA) requirements. Google Pay™ will return corresponding transaction data based on the country/region of your acquirer .
The payment product API call from the Client SDK or the Server-to Server returns the acquirerCountry you have to send to Google. The following code shows how to

Find more information on Strong Customer Authentication compliance for Google Pay™ at the Google Pay™ API documentation and in our dedicated guide.


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: '', merchantName: '', gatewayMerchantId: '' } }; //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 } );

To make sure the transaction is process according to the PSD2 guideline, populate these fields to cover your customer's device.

customer.device.acceptHeader
customer.device.browserData.colorDepth
customer.device.browserData.javaEnabled
customer.device.browserData.screenHeight
customer.device.browserData.screenWidth
customer.device.ipAddress
customer.device.locale
customer.device.timezoneOffsetUtcMinutes
customer.device.userAgent

Find more information about these fields in our complete 3-D Secure v2 parameter overview.

4. Render Google Pay™ button

If Google Pay™ is available, add the Google Pay™ button on your checkout page. Make sure to follow Google’s guidelines on displaying the Google Pay™ button and Google's brand policy.

Use the following code sample to add it:


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

5. Initialise payment sheet

Respond to the customer using the Google Pay™ button by creating a Google Pay™ payment session for 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. Get payment token

To process the actual payment, you need to request the payment token from Google. To do so, use the following code snippet:


    Get 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. Send payment token

In the Create payment API call, you can provide payment tokens in two different ways:

  1. Send the token in property mobilePaymentMethodSpecificInput.encryptedPaymentData. Make sure to send also mobilePaymentMethodSpecificInput.paymentProductId
    
    {
       "mobilePaymentMethodSpecificInput":{
          "encryptedPaymentData":"{\"signature\":\"MEUCIQCcSASjWu3ax9jQ8qX/+rsNLZ95uiyxamXiKnHlJi8A1QIgZj ...",
          "paymentProductId":"320"
       }
    }
    

  2. Specify the token as the payment value in encryptedCustomerInput. This input is an encrypted list of key-value pairs, usually containing user input, which is compiled based on the actual input field. The customer's encrypted payment details
    • are encrypted again
    • sent to your server
    • finally to our server

      You must use the client-side Android SDK to create the encrypted CustomerInput value. The fieldId of the encrypted payment data field is returned when Google Pay™ receives payment products through API. Although this field is returned as an input field, you should not provide this field to users
      
          // This example assumes that the SDK is initialized correctly
      var paymentRequest = session.getPaymentRequest();
      paymentRequest.setValue("encryptedPaymentData", "{\"signature\":\"MEUCIG/WtsJnBf6yLsvnD2LOGaVMCO8E93QizIE0foMscVujAi...")
      
      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
      });
      
      

After you have received the token, send the payment request to our platform. Add the following properties to a standard CreatePayment request:

Properties Remarks

mobilePaymentMethodSpecificInput

  • paymentProductId
  • requiresApproval
  • encryptedPaymentData
  • paymentProductId: instructs our platform to target GooglePay
  • requiresApproval: processes the transaction as an authorisation or direct sale
  • encryptedPaymentData: the token you have received in the previous step

Find detailed information about this object and its properties in our CreatePaymentAPI.

Make sure to determine the device your customers are using for the payment, as it determines whether you have to roll out 3-D Secure manually

    A typical request looks like this:

    
        Request with 3-D Secure properties using encryptedPaymentData
    
    {
      "mobilePaymentMethodSpecificInput": {
        "paymentProductId": "320",
        "requiresApproval": true,
        "encryptedPaymentData": "{\"signature\":\"MEUCIG/WtsJnBf6yLsvnD2LOGaVMCO8E93QizIE0foMscVujAi..."
      },
        "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": "BE"
          },
          "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="""
        }
      }
    }
        
    

    
        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": "BE"
          },
          "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=""" 
      }
    }
    
    

    
        Request without 3-D Secure properties using encryptedpaymentdata
        
        {
        "order" : {
            "amountOfMoney" : {
                "currencyCode" : "EUR",
                "amount" : 2300
            },
            "customer" : {
               "merchantCustomerId": "",
               "billingAddress" : { 
                    "countryCode" : "NL"
                }
            }
        },
        "mobilePaymentMethodSpecificInput" : { 
            "paymentProductId" : 320, 
            "encryptedPaymentData": "{\"signature\":\"MEUCIQCcSASjWu3ax9jQ8qX/+rsNLZ95uiyxamXiKnHlJi8A1QIgZj ..."
        } 
    }
    

    
        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=""" 
    }
    

    Google Pay™ in app

    We also provide Google Pay™ for native Android applications. Our Android SDK client helps you embed Google Pay™ into your application while we will decrypt sensitive payment information for you.

    Once you have followed the Google’s setup guidelines, you are ready to beginfor the technical integration with us. Google offers a very clear and and concise tutorial on how to implement Google Pay™ on your WebsiteWebsite. The technical integration includes the following steps:

    Because you use us to decrypt sensitive payment information, Google uses the following type of tokenization: PAYMENT_GATEWAY. Get payment product returns the token in the paymentProduct320SpecificData.gateway property.

    1. Retrieve Google Pay™

    Google Pay™ might not always be available on all devices. The Android SDK client allows you to easily hide Google Pay™ if this is the case. Our platform will then return null. Use the following code sample to make this call:

    
    // Check availability of Google Pay™
    
    private void getGooglePayPaymentProduct() {
        // session is an already initialized instance of the SDK's GcSession object
        session.getPaymentProduct(
            this,     // Instance of Android ApplicationContext 
            Constants.PAYMENTPRODUCTID_GOOGLEPAY,
            paymentContext, 
            this.     // Implementation of OnPaymentProductCallCompleteListener
        );
    }
    
    /**
     * Implementation of the callback method for retrieving a payment product
     */
    @Override
    public void onPaymentProductCallComplete(PaymentProduct paymentProduct) {
        if (paymentProduct != null) {
            if (Constants.PAYMENTPRODUCTID_GOOGLEPAY.equals(paymentProduct.getId())) {
                // Google Pay™ is available, render the Google Pay™ button.
            } else {
                // A different product was retrieved..
            }
        } else {
            // Google Pay™ is not available, we should not render it. 
        }
    }
    
        

    2. Comply to Strong Customer Authentication (SCA)

    If your acquirer is from the European Economic Area (EEA) , you must submit the acquiring bank’s country/region information to Google in TransactionInfo.countryCode. This will ensure you comply with PSD2’s strong customer identity verification (SCA) requirements. Google Pay™ will return corresponding transaction data based on the country/region of your acquirer .
    The payment product API call from the Client SDK or the Server-to Server returns the acquirerCountry you have to send to Google. The following code shows how to

    Find more information on Strong Customer Authentication compliance for Google Pay™ at the Google Pay™ API documentation and in our dedicated guide.

    
    // Obtain Google Pay™ parameters
    
    private JSONObject initializeGooglePayValues(PaymentContext paymentContext, PaymentProduct googlePayProduct) {
        
        JSONObject paymentRequest = new JSONObject();
        try {
            // Initialize other payment request values.
    
            JSONObject transactionInfo = new JSONObject();
            transactionInfo.put("totalPriceStatus", "FINAL");
            String totalPrice = formatAmount(paymentContext.getAmountOfMoney().getAmount().toString());
            transactionInfo.put("totalPrice", totalPrice);
            transactionInfo.put("currencyCode", paymentContext.getAmountOfMoney().getCurrencyCode().toString());
            if (paymentProduct.getAcquirerCountry() != null) {
                transactionInfo.put("countryCode", googlePayProduct.getAcquirerCountry());
            }
            paymentRequest.put("transactionInfo", transactionInfo);
            
        } catch (JSONException e) {
            // Something went wrong when generating the JSON payment input.
        }
        
        return paymentContext;
    }
    
    /**
     * Formats the amount used in the Connect platform to the format Google is expecting.
     */
    private String formatAmount(String amount) {
        String formattedAmount = "00" + amount;
        formattedAmount = formattedAmount.substring(0, formattedAmount.length() - 2)
                + "."
                + formattedAmount.substring(formattedAmount.length() - 2);
        return formattedAmount;
    }
        

    3. Render Google Pay™ button

    If Google Pay™ is available, display the Googley Pay button in your app. Make sure to follow Google’s guidelines on displaying the Google Pay™ button and Google's brand policy.

    4. Get payment token

    To process the actual payment, you need to request the payment token from Google. To do so, use the following code snippet:

    
        /**
     * This method extracts the Google Pay™ payment token from the PaymentData object that 
     *    is returned when the user has authorized the payment in the payment sheet.
     * @param paymentData The Google Pay™ paymentData object that is returned by the payment sheet.
     * @return The payment token as a String in the format that is accepted by the our
     *    Create Payment API.
     */
    private String getGooglePayTokenFromPaymentData(PaymentData paymentData) {
        String json = paymentData.toJson();
        if (json != null && !json.isEmpty()) {
            try {
                JSONObject paymentDataJson = new JSONObject(json);
                return paymentDataJson
                        .getJSONObject("paymentMethodData")
                        .getJSONObject("tokenizationData")
                        .getString("token");
            } catch (JSONException e) {
                Log.e(TAG, "Payment Token is not in a valid JSON format");
            }
        } else {
            Log.e(TAG, "Only PaymentData in JSON format is accepted.");
        }
        return null;
    }
    

    5. Send payment token

    Extract the token and send it to your server via the Server SDK Create Payment API call. You can provide the token in two ways:

    1. Send the token in property mobilePaymentMethodSpecificInput.encryptedPaymentData. Make sure to send also mobilePaymentMethodSpecificInput.paymentProductId
      
      {
         "mobilePaymentMethodSpecificInput":{
            "encryptedPaymentData":"{\"signature\":\"MEUCIQCcSASjWu3ax9jQ8qX/+rsNLZ95uiyxamXiKnHlJi8A1QIgZj ...",
            "paymentProductId":"320"
         }
      }
      

    2. Specify the token as the payment value in encryptedCustomerInput. This input is an encrypted list of key-value pairs, usually containing user input, which is compiled based on the actual input field. The customer's encrypted payment details
      • are encrypted again
      • sent to your server
      • finally to our server

        You must use the client-side Android SDK to create the encrypted CustomerInput value. The fieldId of the encrypted payment data field is returned when Google Pay™ receives payment products through API. Although this field is returned as an input field, you should not provide this field to users
    
    Payment request with encrypted CustomerInput
    private void createPreparedPaymentRequestGooglePay(String token, PaymentProduct googlePay) {
        PaymentRequest paymentRequest = new PaymentRequest();
        paymentRequest.setPaymentProduct(googlePay); // This is the Google Pay™ PaymentProduct object, which is the result of the getPaymentProduct call that was done before
        
        if (token != null && !token.isEmpty()) {
            paymentRequest.setValue(Constants.GOOGLE_PAY_TOKEN_FIELD_ID, token);
        
            // Prepare the payment request by encrypting the payment values
            session.preparePaymentRequest(
                paymentRequest, 
                this,     // Instance of Android ApplicationContext 
                this      // Implementation of OnPaymentRequestPreparedListener 
            );
        } else {
            // Notify the user that an error has occurred
        }
    }
    
    /**
     * Implementation of the callback for encrypting the payment values
     */
    @Override
    public void onPaymentRequestPrepared(PreparedPaymentRequest preparedPaymentRequest) {
        if (preparedPaymentRequest != null) {
            String encryptedFields = preparedPaymentRequest.getEncryptedFields();
            // Send the encryptedFields to your backend
        } else {
            // Something went wrong, notify the user
        }
    }