Live Google Pay demos

  • This page provides live, editable Google Pay demos using JavaScript or JSFiddle.

  • You can explore examples demonstrating basic Google Pay button integration, button resizing, and payment authorization.

  • The demos also showcase how to dynamically update prices based on shipping changes using Dynamic Price Updates.

  • These demos are interactive and can be edited in JSFiddle for experimentation and learning.

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.