PWA 引入的 Payment Request API 实现支付功能的技巧
Web 开发者一直在寻找一种简单、方便的方式来让用户使用他们的网站进行支付。谷歌公司提供了一种便利用户支付的解决方案， Payment Request API。通过使用 Payment Request API ，可以在不离开您的网站的情况下，让用户用其默认的支付方式支付。
Payment Request API 是一个用于 Web 应用程序的 API ，使用户可以使用保存在其浏览器中的支付方式，在任何支持该 API 的 Web 应用程序上进行支付。例如，如果某个网站支持 Payment Request API ，则用户只需单击“付款”按钮，便可快速选择一个保存在其浏览器中的支付选项进行支付。
Payment Request API 的优势
使用 Payment Request API 有以下优点：
简单易用。用户不需要手工输入支付细节，所有细节都从其浏览器中获取。
易于集成。 支持 PWA 的平台（如 Chrome，Firefox 和 Opera）都支持 Payment Request API ，可以与其他在线支付服务轻松集成。
适用于移动设备。 强制用户在移动端输入付款细节可能很麻烦，但对于使用 Payment Request API 的网站，移动支付将变得更容易。
如何使用 Payment Request API 实现支付功能
首先，需要检查浏览器是否支持 Payment Request API 。 可以使用以下代码：
-- ----------------------- - -- ------- -------- ------- ------- --- - ---- - -- ------- ------- --- --- --------- -
其次，需要添加 PaymentRequest 对象，它表示付款请求。 这个对象包含控制付款方式的选项。例如：
----- -------------------- - -- ----------------- ------------- ----- - ----- ----- ----- - --- ----- -------------- - - ------ - ------ -------- ------- - --------- ------ ------ ------- - - -- ----- ------- - - ----------------- ----- ------------------ ----- ------------------ ------ ---------------- ----- ------------- ---------- -- ----- -------------- - --- --------------- --------------------- --------------- ------- --
在此返回结果中，supportedInstruments 成员指定支付方法，例如信用卡、电子钱包等。 paymentDetails 成员提供有关购买的详细信息，例如付款金额和货运地址。 options 成员控制付款请求的行为，并设置是否接受用户选择付款方式，让用户选择付款方式时是否显示发货信息等。
最后，向 PaymentRequest 对象添加一个事件监听器，并在事件发生后执行付款操作。例如：
-------------------------------------------------------- ------------- - ------------------ ------------------------- - -- --- ---- --- ------------------------------------------------------- ------------- - ------------------ ------------------------- - -- --- ---- --- ---------------------------------------------------- - -- --- ---------------------- - ------------------- ---
这些事件监听器将支付请求的处理委托给开发者，并允许在选择发货地址或更改发货选项时更新付款请求。
PaymentRequest.show() 方法显示付款请求，用户可以选择付款方式。对返回的 promise 对象的解析可以启动付款过程。
示例代码
下面是一个使用 Payment Request API 实现支付功能的示例代码实现。代码实现了支付宝、微信等在线支付方式以及国家和地区码的选择。代码可直接运行在支持 Payment Request API 的浏览器上。
--------- ----- ------ ------ ----- ---------------- -------------- ------- --- --------------- ------- ------ ------- ------------------------ ------------ -------- -- ----------------------- - -- ------- ------- --- -- --------- ----- -------------------- - -- ----------------- ------------------------- ----- - ------------------- ------------- ------------- --------- -- --- -------------- - - ------ - ------ -------- ------- - --------- ------ ------ -------- -- -- ------------- -- ------ ----------- ------- - --------- ------ ------ -------- -- --- ------------ ----- ----------------------- ----- ---------------- -- --- ----------- ------ --------- ---------- ------- - --------- ------ ------ ------- -- --------- ------ --- -- -------------- - --- ------------------------------------ ---------------- -------------------------------------------------------------------- ---------- - --------------------- ------------------------------- - -- ------- --------------- ---- ----------------------------- -- -------------------- - ------------------- --- --- - ---- - -- ------- ------- --- --- --------- - --------- ------- -------
总结
使用 Payment Request API ，我们可以在不离开我们的网站的情况下实现方便的支付。网站开发者应该在使用过程中注意数据和安全性，以建立用户信任并保护其隐私。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/645dad58968c7c53b0014ec0