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:
-
Register an
onPaymentAuthorized()
callback inPaymentOptions
. -
Call the
loadPaymentData()
function with thePAYMENT_AUTHORIZATION
callback intent. - 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:
- Register both of the
onPaymentAuthorized
andonPaymentDataChanged
callbacks inPaymentOptions
. - Call the
loadPaymentData()
function with callback intents. For details, see the corresponding example. - Implement
onPaymentAuthorized
andonPaymentDataChanged
.
Click the Edit in JSFiddle link to edit and try it out for yourself.