Gateway

Replace example with a gateway identifier of a
Google-supported gateway and exampleGatewayMerchantId with a
unique merchant identifier provided by your gateway.

See gateway tokenization documentation
for more information about supported gateways and unique identifiers. The
PAYMENT_GATEWAY tokenization type is the most common merchant
implementation of the card payment method in the Google Pay API.

Tip:example is a valid gateway name - if you want to
try out the API, you can leave the code sample above as-is. When using the
example gateway, your site doesn't receive card data
capable of a transaction, but the user flow looks the same.

Direct

Replace the abbreviated publicKey value with a public key you provided in your
Google Pay Developer Profile to receive payment information encrypted with that key. See our
payment data cryptography documentation
for information about configuring encryption keys suitable for the Google Pay API.

Caution: In order to manage future key rotations, don't hardcode the
public key on the client. You should fetch the public key from your server so that you can
update the public key in all versions of your client.

Step 5: Load the Google Pay API JavaScript library

Initialize a PaymentsClient
object after the Google Pay API JavaScript library has loaded.
Initial development uses a TEST environment, which returns dummy
payment methods that are suitable for referencing the structure of a payment response. In this
environment, a selected payment method isn't capable of a transaction. See
Integration checklist
for more information about the requirements for a PRODUCTION environment
that returns chargeable payment methods.

Step 7: Add a Google Pay payment button

Add a Google Pay payment button to your page to encourage a shopper to
check out using a payment method supported by the Google Pay API and your site.
See Brand guidelines
for more information about available button types, colors, and display requirements.

Step 9: Register event handler for user gesture

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

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

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 does not include a
payment method that's capable of a transaction.

Step 10 (optional): Prefetch payment data before user interaction

Note: Add prefetch functionality in your code only after you've
successfully implemented the Google Pay API without the optimization.

paymentsClient.prefetchPaymentData(paymentDataRequest);

Step 11 (optional for shipping enabled): Dynamic Price Updates

Dynamic Price Updates allows a merchant to dynamically update shipping options and transaction
information based on a chosen shipping address. Additionally, you can dynamically update
transaction information based on a chosen shipping option.

The setup to add Dynamic Price Updates happens in the following three steps:

When the loadPaymentData()
method is requested with callbackIntents, such
as SHIPPING_ADDRESS and/or SHIPPING_OPTION,
paymentDataCallback()
data is invoked when a different shipping address
or shipping option is chosen in the payment sheet. See the following code sample for
details on how this data is invoked.

Handle payment data callback

The callback returns a Promise<PaymentDataRequestUpdate>. The
PaymentDataRequestUpdate
object has new transaction information, shipping options,
and a payment data error, which update the payment sheet.

Handle any exception cases, such as an unserviceable shipping address or invalid shipping
option, directly in the payment sheet. Set up a
PaymentDataError object to
highlight the error reason with an error message to the user. Be sure to include the related
intent in the message. See the following code sample for details on how to set up the object
and message.