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 Apple 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, }}
Go live
You don’t need to do anything particular to go live — just make sure to use production credentials.