Before you start
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 Name | Required | Description |
---|---|---|
3-letter currency code in ISO 4217 format, e.g. USD for US dollars | ||
Details of the line items of the order | ||
The country in which the order is created |
Prepare the SDK for payments
Show Universal Checkout
Google Pay is automatically presented to the customer when calling Primer.showUniversalCheckout
.
1234567891011
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:
1234567
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.
123456
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.