Skip to main content

​
Before you begin

This guide assumes that you know how to

​
Accept payments with Google Pay

​
Prepare the client session

Google Pay requires the following data to process a payment successfully. Pass the following data in the client session, or in the payment request (for manual payment creation).
Parameter NameRequiredDescription
currencyCode✓3-letter currency code in ISO 4217 format, e.g. USD for US dollars
order
↳ lineItems		Details of the line items of the order
order
↳ countryCode		The country in which the order is created

​
Prepare the SDK for payments

  • Web
  • Android
  • React Native

​
Show Universal Checkout

Google Pay is automatically presented to the customer when calling Primer.showUniversalCheckout.
Typescript
try {
  await Primer.showUniversalCheckout(clientToken, {
    container: '#checkout-container',
    options,
    onCheckoutComplete({ payment }) {
      console.log('Checkout complete.', payment)
    },
  })
} catch (e) {
  // handle error
}

​
Customization

Check the Customization Guide to learn how to customize payment method buttons.Additionally, you can style the Google Pay button by passing the following options:
Typescript
const options = {
    /* Other options... */
    googlePay: {
        buttonType: 'long', // 'long' (default) | 'short'
        buttonColor: 'black', // 'default' (default) | 'black' | 'white',
    }
}
Capture billing address
By default, Google Pay does not capture the user’s billing address.You can ask to capture the billing address by setting the option captureBillingAddress. The billing address is added to the client session before the payment is made.
Typescript
const options = {
    /* Other options... */
    googlePay: {
        captureBillingAddress: true,
    }
}

​
Limitations

  • Google Pay prevents the payment sheet from being presented inside an Android webview, whether it is your own, or within a third-party (e.g. Facebook browser). As a result, Google Pay cannot be made available in this type of browser.

​
Troubleshooting

The Google Pay button does not appear
Primer drop-in checkout runs a few checks to validate that the user can pay with Google Pay.The Google Pay button does not appear if one of these conditions is met:
  • Google Pay JS library fails to be downloaded. This usually comes from a network issue on the user side.
  • Google Pay believes the browser is not supported. Under the hood, the SDK uses Google Pay’s function isReadyToPay to validate this.
  • The country code or the currency code are missing from the client session.

​
Go live

You don’t need to do anything particular to go live — just make sure to use production credentials.