Google Pay API PaymentRequest Tutorial

Stay organized with collections Save and categorize content based on your preferences.

The Google Pay API can be used in conjunction with other supported payment methods in PaymentRequest.

Step 1: Create a PaymentDataRequest object

Configure a PaymentDataRequest object specifying your payment gateway and accepted methods of payment. We recommend you obtain shipping address, email address, and phone number through the browser's PaymentRequest options argument, not the Google Pay API, for consistency across payment methods. Use the Google Pay API to receive only the payment credentials and optional billing address.

const googlePaymentDataRequest = {
  environment: 'TEST',
  apiVersion: 2,
  apiVersionMinor: 0,
  merchantInfo: {
    // A merchant ID is available after approval by Google.
    // @see {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist}
    // merchantId: '12345678901234567890',
    merchantName: 'Example Merchant'
  },
  allowedPaymentMethods: [{
    type: 'CARD',
    parameters: {
      allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
      allowedCardNetworks: ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"]
    },
    tokenizationSpecification: {
      type: 'PAYMENT_GATEWAY',
      // Check with your payment gateway on the parameters to pass.
      // @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway}
      parameters: {
        'gateway': 'example',
        'gatewayMerchantId': 'exampleGatewayMerchantId'
      }
    }
  }]
};

Step 2: Declare Google Pay API support

Add the Google Pay API payment method identifier and its configuration to the methodData parameter passed to PaymentRequest.

const methodData = [
  {supportedMethods: 'https://google.com/pay', data: googlePaymentDataRequest}
];

Putting it all together

The following example shows an implementation of the Google Pay API with other supported payment methods in PaymentRequest:

  Checkout

Payment method parameter list

The Google Pay API configuration passed in PaymentRequest is similar to the PaymentDataRequest object used by the Google Pay API JavaScript client library with a few exceptions:

• An environment property should be set on the object matching a string value described in PaymentOptions
• The transactionInfo property should be omitted. Total price and currency should instead be specified in the details argument passed to PaymentRequest

Additional object properties specified for the Google Pay API payment method in a PaymentRequest payment method data property: