Google Pay 是一种流行的数字支付方式，它解决了在 Android 平台上的支付问题。而在 Web 端我们也可以使用 Google Pay 插件进行支付，这里我们将介绍如何使用 npm 包 google-pay 来进行 Web 支付。
安装
我们可以通过 npm 安装 google-pay 包。
npm install google-pay --save
准备工作
在使用 Google Pay 之前，需要先获取一些参数以进行授权和支付。
- Merchant ID
在 Google Pay 管理后台 创建商户 ID (Merchant ID).
- 支付资料
你需要一些支付资料，包括商品信息，交易金额等。请自行准备这些信息。
- 创建 Google Pay 客户端
通过在 Google Pay 管理后台创建客户端，以便客户端可以响应 Google Pay 回调。在该客户端中，你需要提供包含特定参数的 JavaScript 脚本。
现在我们已经准备好了，接下来我们将进入核心步骤。
如何使用 google-pay
我们将通过以下步骤来集成 google-pay 到你的 Web 应用程序中。
- 初始化 Google Pay
在客户端 JavaScript 中，使用以下方法初始化 Google Pay:
-- -------------------- ---- -------
----- --------- - ----------------------
----- ------------------ - ---------------------------------
---------------- -
------------- ------
----------------- --------
----------- -------
--
---
------------------------------------------ -- -
-- ----------------- -
----- --------- - --- ----------------------- ---------
-------------------------------------------------
-
---- 添加 Google Pay 按钮
在 HTML 元素中增加一个 Google Pay 按钮。
<button id="google-pay-button"></button>
- 样式
通过添加样式来设置按钮徽标的外观。
#google-pay-button {
background-image: url('https://www.gstatic.com/pay/img/btn/g.svg');
height:40px;
width:100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}我们已经准备好使用 Google Pay 进行支付了。当用户点击「Google Pay」按钮时，应该触发 showNativeCheckout 方法。
实现支付回调
支付完成后，Google Pay 将会调用 "https://merchant-site.com/googlepay/notify" 并传递支付结果。
-- -------------------- ---- -------
------------------- -------- ----- ---- -
--------------------
----- ----------- - ---------
----- --------- - ----------------------
-- ------------------------------------------- -
----- ---------------- - -----------------------------------------------------------------
--------------------
-- ----------------- --- ---------- -
-- ------
- ---- -
-- ------
-
- ---- -
-- ------
-
---结论
在这篇文章中，我们介绍了如何使用 npm 包 google-pay 来进行 Web 支付。我们提供了详细的说明，并给出了代码示例，希望本文可以帮助你进行 Google Pay 集成和开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f7d9381d61a3540f34