Google Pay 演示直播
使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。
此页面包含可在 JavaScript 或 JSFiddle 中修改的 Google Pay 演示直播。
基本示例
以下演示了 Google Pay 按钮实际使用情况的基本示例。如需了解其构造方式的示例,请查看相邻的代码。
以下演示了如何调整 Google Pay 按钮的大小。调用 createButton
并将 buttonSizeMode
属性设置为 fill
,然后在 #container div
上设置大小。
授权付款示例
以下示例显示了在处理付款之前如何对其进行授权。
您可能希望在处理付款前对其进行授权,这样做的原因是,如果授权失败,用户可以选择其他付款方式。
您可以按照以下说明处理付款授权请求:
- 在
PaymentOptions
中注册 onPaymentAuthorized()
回调。 - 使用
PAYMENT_AUTHORIZATION
回调 Intent 调用 loadPaymentData()
函数。 - 实现
onPaymentAuthorized()
回调处理程序。
点击 Edit in JSFiddle 链接即可进行修改,现在就自己去试试看吧。
动态价格更新示例
借助动态价格更新,您可以动态调整总价以反映送货地址的变化以及运费选项的变更。
使用以下步骤设置动态价格更新:
- 在
PaymentOptions
中注册 onPaymentAuthorized
和 onPaymentDataChanged
回调。 - 使用回调 Intent 调用
loadPaymentData()
函数。如需了解详情,请参阅相应的示例。 - 实现
onPaymentAuthorized
和 onPaymentDataChanged
。
点击 Edit in JSFiddle 链接即可进行修改,现在就自己去试试看吧。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2024-10-16。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2024-10-16。"],[[["\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,["This 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\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\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\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\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."]]