Live Google Pay demos

This page contains live Google Pay demos that you can edit in JavaScript or JSFiddle.

Basic example

The following demonstrates a basic example of the Google Pay button in action. Refer to the adjacent code for an example on how it's constructed.

Button resize example

The following demonstrates how you can resize the Google Pay button. Call createButton with the buttonSizeMode property set to fill, and then set a size on the #container div.

Authorize Payments example

The following is an example of how you can authorize a payment before processing it.

The reason you might want to authorize a payment before processing it is to give the user an opportunity to choose a different payment method if the authorization fails.

You can handle the payment authorization request by following these instructions:

  1. Register an onPaymentAuthorized() callback in PaymentOptions.
  2. Call the loadPaymentData() function with the PAYMENT_AUTHORIZATION callback intent.
  3. Implement the onPaymentAuthorized() callback handler.

Click the Edit in JSFiddle link to edit and try it out for yourself.

Dynamic Price Update example

Dynamic Price Updates allows you to dynamically adjust the total price to reflect changes in shipping address and shipping option changes.

Use the following steps to set up Dynamic Price Updates:

  1. Register both of the onPaymentAuthorized and onPaymentDataChanged callbacks in PaymentOptions.
  2. Call the loadPaymentData() function with callback intents. For details, see the corresponding example.
  3. Implement onPaymentAuthorized and onPaymentDataChanged.

Click the Edit in JSFiddle link to edit and try it out for yourself.