Google Pay™

The purpose of this guide is to help merchants accept Google Pay™ using our API’s and build their own payment form to have full control over the look and feel of your checkout page.
Adding Google Pay™ to your payment methods allows customers to use their stored Google Pay™ data to quickly and securely pay for goods and services

With Google Pay™, shoppers can make purchases using credit or debit cards stored in their Google account. Shoppers get to experience a simpler checkout process whether they are buying from their Android devices, on the web, or in-store through POS terminals.

When a shopper pays with Google Pay in apps and on websites, Google Pay shows a payment sheet where they select their preferred card payment method and confirm their purchase. Watch this video to see how shoppers pay with Google Pay.

Learn What the Google Pay App Is & How To Use It

How would you like to integrate?

Android
Check out the Google Pay Android Developer Documentation

Web
Check out the Google Pay Web Developer Documentation

Before You Begin

These instructions explain how to add Google Pay™ to your existing API-only integration. The API-only integration works the same way for all payment methods. If you haven't done this integration yet, refer to our API-only integration guide.

Requirements

For Merchants that want to integrate Google Pay™ through API’s

Step 1 Load the Google Pay™ API JavaScript library
To load the Google Pay™ API JavaScript library, complete the following steps:

  1. Include Google's hosted JavaScript on your page. See the following code sample:
<script
  async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="console.log('TODO: add onload function')">
</script>
  1. After the Google Pay API JavaScript library loads, initialize a PaymentsClient object. Initial development uses a TEST environment, which returns dummy payment methods that are suitable to reference the structure of a payment response. In this environment, a selected payment method isn't capable of a transaction. See the following code sample:
const paymentsClient =
  new google.payments.api.PaymentsClient({environment: 'TEST'});
  1. For more information about the requirements for a production environment that returns chargeable payment methods, see the Integration checklist.

Step 2: Define Google Pay API Version

const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

Step 3: Request a Payment Token for Your Payment Provider

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'bluefin',
    'gatewayMerchantId': '000000000001'
  }
};

Step 4: Define a Supported Payment Card Network.

Payconex Supports all the major card brands Visa, MasterCard, Amex & Discover

const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];

The Google Pay API might return cards on file with Google (PAN_ONLY), and/or a device token on an Android device that's authenticated with a 3-D Secure cryptogram (CRYPTOGRAM_3DS). See the following code sample:

const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

For more information, see CardParameters in our Object reference documentation. Also, check with your gateway or processor for the card networks that are supported, and for support for Android device tokens.

🚧

Important

  • Make sure that you also apply your existing risk checks and controls for payment transactions to Google Pay transactions. Google Pay validation and fraud checks aren't intended to replace your risk management processes.
  • If you support PAN_ONLY, ensure that you trigger 3D Secure (step-up authentication) for Google Pay PAN_ONLY transactions in the same way that you trigger 3D Secure for normal card transactions.
  • Currently, PayConex only supports 3D Secure on Elavon and Chase PaymentTech.

Step 5 To describe your allowed payment methods, complete the following steps:

  1. Combine your supported authentication methods and supported card networks in order to describe your site's support for the CARD payment method. See the following code sample:
const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  }
};
  1. Extend the base card payment method object to describe information you expect to be returned to your application. Include a description of the tokenized payment data. See the following code sample:
const cardPaymentMethod = Object.assign(
  {tokenizationSpecification: tokenizationSpecification},
  baseCardPaymentMethod
);
  1. For more information about supported parameters, see CardParameters.

Step 6: Determine Readiness to Pay with the Google Pay API

  1. Add your allowed payment methods to your base request object. See the following code sample:
const isReadyToPayRequest = Object.assign({}, baseRequest);
isReadyToPayRequest.allowedPaymentMethods = [baseCardPaymentMethod];
  1. Call isReadyToPay() to determine if the Google Pay API is supported by the current device and browser for your specified payment methods. See the following code sample:
paymentsClient.isReadyToPay(isReadyToPayRequest)
    .then(function(response) {
        if (response.result) {
            // add a Google Pay payment button
        }
    })
    .catch(function(err) {
      // show error in developer console for debugging
      console.error(err);
    });

Step 7: Add a Google Pay Payment Button

Add a Google Pay payment button to your page to encourage shoppers to check out with payment methods that are supported by the Google Pay API and your site. For more information about available button types, colors, and display requirements, see the brand guidelines.

See the following payment button code sample:

const button =
    paymentsClient.createButton({onClick: () => console.log('TODO: click handler'),
    allowedPaymentMethods: []}); // make sure to provide an allowed payment method
document.getElementById('container').appendChild(button);

Step 8: Create a PaymentDataRequest Object

  1. Build a JavaScript object that describes your site's support for the Google Pay API. For a full list of supported properties, see PaymentDataRequest. See the following code sample:
const paymentDataRequest = Object.assign({}, baseRequest);
  1. Add the payment methods supported by your app, such as any configuration of additional data that's expected in the response. See the following code sample:
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
  1. Define a total price and currency for a shopper to authorize. See the following code sample:
paymentDataRequest.transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD',
  countryCode: 'US'
};

🚧

Important

Merchants that process transactions in the European Economic Area (EEA) or any other countries that are subject to Strong Customer Authentication (SCA) must include the countryCode, totalPrice, and merchantName parameters to meet SCA requirements.

  1. Provide a user-visible merchant name, and use our TEST merchantId value when in TEST. For more details, and for information on when to replace the TEST merchantId value, see MerchantInfo. See the following code sample of a user-visible merchant name:

Step 9: Register an Event Handler for User Gestures

  1. Register a click event handler for the purchase button. The event handler calls loadPaymentData() immediately after it interacts with the Google Pay payment button.

  2. After a Google user grants permission for your site to receive information about the user's selected form of payment and optional contact data, handle the response from the Google Pay API.

  3. Extract the payment token from the paymentData response. If you implement a gateway integration, pass this token to your gateway without any modifications.

📘

Note

In a TEST environment, a payment response includes summary data about the selected payment method that's suitable for display on a confirmation page. The payment response doesn't include a payment method that's capable of a transaction.

paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData){
  // if using gateway tokenization, pass this token without modification
  paymentToken = paymentData.paymentMethodData.tokenizationData.token;
}).catch(function(err){
  // show error in developer console for debugging
  console.error(err);
});

Developer Resources

Google Pay provides APIs for both Android and web applications and comprehensive developer documentation for each version of the API. The specific Google Pay API integration details depend on the type of application you are developing.
See the following resources for detailed Google Pay API integration details:

How it works

  1. PayConex verifies Authentication requests that come in from a merchant. If the proper variables/values are not valid, we indicate "Authentication is incorrect."
  2. Request parameter must contain
"tender_type": "GPay",
"gpay_payload": "<TOKEN_FETCHED_FROM_GOOGLE>"
  1. Once the request is received, depending on the response, the transaction could be returned to Merchant as decline with reason info, etc.
  2. The transaction is then sent to the end processor.

Testing & Go-live

To test Google Pay, you have two different options:

📘

Before You Go Live

In production, Google Pay will only be available if:

  • The shopper is logged in to their Google account.
  • The shopper has at least one valid payment method on their Google Pay account.

Processing a Payment

curl --location --request POST 'https://staging.payconex.net/api/qsapi/3.8' \
--header 'Accept: application/json' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'account_id=<PAYCONEX_ACCOUNT_ID>' \
--data-urlencode 'api_accesskey=<PAYCONEX_API_KEY>' \
--data-urlencode 'response_format=JSON' \
--data-urlencode 'transaction_type=SALE' \
--data-urlencode 'tender_type=GPay' \
--data-urlencode 'transaction_amount=10' \
--data-urlencode 'gpay_payload=<TOKEN_PROVIDED_BY_GOOGLE>'

Support

For assistance with your PayConex merchant account, or any integration needs contact
For assistance with integrating the Google Pay API, see the Google Pay API Troubleshooting pageor complete the Google Pay API Integration Support Request Form.


Did this page help you?