Stay organized with collections
Save and categorize content based on your preferences.
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:
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-04-03 UTC."],[[["\u003cp\u003eThis page provides live, editable Google Pay demos using JavaScript or JSFiddle.\u003c/p\u003e\n"],["\u003cp\u003eYou can explore examples demonstrating basic Google Pay button integration, button resizing, and payment authorization.\u003c/p\u003e\n"],["\u003cp\u003eThe demos also showcase how to dynamically update prices based on shipping changes using Dynamic Price Updates.\u003c/p\u003e\n"],["\u003cp\u003eThese demos are interactive and can be edited in JSFiddle for experimentation and learning.\u003c/p\u003e\n"]]],["The content showcases live Google Pay demos editable in JavaScript or JSFiddle. Key actions include creating and resizing the Google Pay button using `createButton` with `buttonSizeMode`. It demonstrates authorizing payments before processing by registering `onPaymentAuthorized()`, calling `loadPaymentData()`, and implementing the callback handler. Dynamic price updates are enabled by registering `onPaymentAuthorized` and `onPaymentDataChanged`, and implementing both functions after calling `loadPaymentData`. Note that authorize payments and Dynamic price updates do not support liability shift.\n"],null,["# Live Google Pay demos\n\nThis page contains live Google Pay demos that you can edit in JavaScript or JSFiddle.\n| **Note**: The demos on this page will only show a button if your browser supports Google Pay.\n\nBasic example\n-------------\n\nThe following demonstrates a basic example of the Google Pay button in action. Refer to the\nadjacent code for an example on how it's constructed. \n\nButton resize example\n---------------------\n\nThe following demonstrates how you can resize the Google Pay button. Call\n`createButton` with the `buttonSizeMode` property set to `fill`,\nand then set a size on the `#container div`. \n\nAuthorize Payments example\n--------------------------\n\nThe following is an example of how you can *authorize a payment* before processing it. \n\nThe reason you might want to authorize a payment before processing it is to give the user an\nopportunity to choose a different payment method if the authorization fails.\n\nYou can handle the payment authorization request by following these instructions:\n\n1. Register an [`onPaymentAuthorized()`](/pay/api/web/reference/client#onPaymentAuthorized) callback in [`PaymentOptions`](/pay/api/web/reference/request-objects#PaymentOptions).\n2. Call the [`loadPaymentData()`](/pay/api/web/reference/client#loadPaymentData) function with the `PAYMENT_AUTHORIZATION` callback intent.\n3. Implement the [`onPaymentAuthorized()`](/pay/api/web/reference/client#onPaymentAuthorized) callback handler.\n\nClick the [Edit in JSFiddle](https://jsfiddle.net/34wxopb2/)\nlink to edit and try it out for yourself.\n\nDynamic Price Update example\n----------------------------\n\nDynamic Price Updates allows you to dynamically adjust the total price to reflect changes in shipping address and shipping option changes.\n\nUse the following steps to set up Dynamic Price Updates:\n\n1. Register both of the [`onPaymentAuthorized`](/pay/api/web/reference/client#onPaymentAuthorized) and [`onPaymentDataChanged`](/pay/api/web/reference/client#onPaymentDataChanged) callbacks in [`PaymentOptions`](/pay/api/web/reference/request-objects#PaymentOptions).\n2. Call the [`loadPaymentData()`](/pay/api/web/reference/client#loadPaymentData) function with callback intents. For details, see the corresponding [example](/pay/api/web/guides/tutorial#load).\n3. Implement [`onPaymentAuthorized`](/pay/api/web/reference/client#onPaymentAuthorized) and [`onPaymentDataChanged`](/pay/api/web/reference/client#onPaymentDataChanged).\n\nClick the [Edit in JSFiddle](https://jsfiddle.net/ynt8p152/) link to edit and try it out for yourself."]]