# Live Google Pay demos

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

> [!NOTE]
> **Note**: The demos on this page will only show a button if your browser supports Google Pay.

## 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.
<iframe src="https://gpay-live-demo.web.app/basic.html" allow="payment" frameborder="0" height="70" width="270"></iframe> <iframe src="https://jsfiddle.net/crpt8ejs/embedded/js/" frameborder="0" height="400" width="100%"></iframe>

## 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`.
<iframe src="https://gpay-live-demo.web.app/button-resize.html" allow="payment" frameborder="0" height="70" width="420"></iframe> <iframe src="https://jsfiddle.net/qxcyo2dk/embedded/js/" frameborder="0" height="400" width="100%"></iframe>

## Authorize Payments example

The following is an example of how you can *authorize a payment* before processing it.
<iframe src="https://gpay-live-demo.web.app/authorize.html" allow="payment" frameborder="0" height="70" width="270"></iframe> <iframe src="https://jsfiddle.net/34wxopb2/embedded/js/" frameborder="0" height="400" width="100%"></iframe>

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()`](https://developers.google.com/pay/api/web/reference/client#onPaymentAuthorized) callback in [`PaymentOptions`](https://developers.google.com/pay/api/web/reference/request-objects#PaymentOptions).
2. Call the [`loadPaymentData()`](https://developers.google.com/pay/api/web/reference/client#loadPaymentData) function with the `PAYMENT_AUTHORIZATION` callback intent.
3. Implement the [`onPaymentAuthorized()`](https://developers.google.com/pay/api/web/reference/client#onPaymentAuthorized) callback handler.

Click the [Edit in JSFiddle](https://jsfiddle.net/34wxopb2/)
link to edit and try it out for yourself.

## Dynamic Price Update example

<iframe src="https://gpay-live-demo.web.app/dynamic.html" allow="payment" frameborder="0" height="70" width="270"></iframe> <iframe src="https://jsfiddle.net/9zc6ja85/embedded/js/" frameborder="0" height="400" width="100%"></iframe>

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`](https://developers.google.com/pay/api/web/reference/client#onPaymentAuthorized) and [`onPaymentDataChanged`](https://developers.google.com/pay/api/web/reference/client#onPaymentDataChanged) callbacks in [`PaymentOptions`](https://developers.google.com/pay/api/web/reference/request-objects#PaymentOptions).
2. Call the [`loadPaymentData()`](https://developers.google.com/pay/api/web/reference/client#loadPaymentData) function with callback intents. For details, see the corresponding [example](https://developers.google.com/pay/api/web/guides/tutorial#load).
3. Implement [`onPaymentAuthorized`](https://developers.google.com/pay/api/web/reference/client#onPaymentAuthorized) and [`onPaymentDataChanged`](https://developers.google.com/pay/api/web/reference/client#onPaymentDataChanged).

Click the [Edit in JSFiddle](https://jsfiddle.net/4xm2pbcv/) link to edit and try it out for yourself.