在 PWA 应用中集成支付宝和微信支付-JavaScript中文网-JavaScript教程资源分享门户

前言

随着移动互联网的普及和无线技术的不断发展，越来越多的企业开始将自己的业务逐渐转向移动端，其中 PWA 应用也在这个过程中得到了广泛的应用。PWA 应用是 Progressive Web Apps（渐进式 Web 应用）的缩写，是谷歌提出的一种新型 Web 应用的解决方案。目前，支持 PWA 应用的浏览器已经有很多，包括 Chrome、Firefox、Safari 等主流浏览器。

随着 PWA 应用的普及，越来越多的开发人员开始考虑如何在 PWA 应用中集成支付宝和微信支付。本文将详细讲解在 PWA 应用中集成支付宝和微信支付的过程，并提供示例代码以供参考。

为什么要在 PWA 应用中集成支付宝和微信支付？

在 PWA 应用中集成支付宝和微信支付可以为用户提供更加优秀的用户体验。PWA 应用具有安装简便、离线访问、移动优先等优点，而支付宝和微信支付则是现代互联网支付的代表。将两者结合起来，可以让用户在使用 PWA 应用时直接通过支付宝或微信进行支付，避免了传统的支付方式需要填写支付信息等繁琐步骤，提高了用户的支付效率。

如何在 PWA 应用中集成支付宝和微信支付

下面将分别介绍在 PWA 应用中集成支付宝和微信支付的具体方法。

在 PWA 应用中集成支付宝支付

准备工作

在集成支付宝支付前，我们需要进行一些准备工作。

1、文档查看

官方文档查看：https://docs.open.alipay.com/api_1/alipay.trade.app.pay/

2、注册支付宝账户

在使用支付宝 SDK 之前需要先注册支付宝开放平台账号，并在账号中对应的应用中获取到应用 ID（APPID）、商户私钥（RSA2）、商户公钥（RSA2）等信息。

3、下载支付宝 SDK

我们可以通过如下地址从支付宝开放平台下载 SDK：https://docs.open.alipay.com/54/104509/

支付宝支付接口

具体的支付宝支付接口可以参考官方文档。在接入支付宝支付前，我们需要根据业务需求先定义好自己的订单信息，例如订单号、订单名称、订单金额等。支付宝 SDK 中提供的支付接口需要通过如下参数进行传递：

参数名称	必填	参数说明	取值范围
app_id	是	应用 ID
method	是	接口名称
format	否	仅支持 JSON 格式
charset	否	请求使用的编码格式，如 utf-8,gbk,gb2312 等，默认 utf-8
sign_type	是	商户生成签名字符串所使用的签名算法类型，目前支持 RSA2 和 RSA	RSA2
timestamp	是	发送请求的时间，格式"yyyy-MM-dd HH:mm:ss"
version	是	调用的接口版本，固定为：1.0	1.0
notify_url	是	支付宝服务器主动通知商户服务器里指定的页面http/https 路径（在支付完成后），建议商户使用https
biz_content	是	业务请求参数的集合
app_auth_token	否	应用授权
app_cert_sn	否	应用公钥证书SN
alipay_root_cert_sn	否	支付宝根证书SN

具体的参数取值范围可以根据业务需求自行定义。在传递参数之后，需要对请求进行签名，将签名后的请求发往支付宝服务器。在收到回调结果后，需要对返回结果进行验签，确保数据的完整性。

下面提供一个简单的示例代码，供参考。

// javascriptcn.com 代码示例
// 定义 APPID
const app_id = "xxxxxxxx";
// 定义商户私钥
const app_private_key = "xxxxxxxx";
// 定义支付宝公钥
const alipay_public_key = "xxxxxxxx";
// 定义订单信息
const order_info = {
    "out_trade_no": "20150320010101001",
    "total_amount": "0.01",
    "subject": "测试订单",
    "body": "这是一笔测试订单",
    "product_code": "QUICK_MSECURITY_PAY"
};
// 实例化 AlipaySdk
const AlipaySdk = require('alipay-sdk').default;
const alipaySdk = new AlipaySdk({
    appId: app_id,
    privateKey: app_private_key,
    alipayPublicKey: alipay_public_key,
    timeout: 5000,
    camelize: true
});

// 调用支付接口
alipaySdk.exec('alipay.trade.app.pay', {
    bizContent: {
        ...order_info
    }
}).then(async function(result) {
    console.log(result);
}).catch(function(err) {
    console.log('Failed:', err);
});

在 PWA 应用中集成微信支付

准备工作

在集成微信支付前，我们需要进行一些准备工作。

1、设定沙箱环境

我们可以通过注册如下地址获取到微信支付开发者工具（沙箱环境）：https://pay.weixin.qq.com/index.php/core/account/test/demoLogin

在微信支付沙箱环境中，我们需要设定自己的商户信息，包括商户号、商户 API 密钥等。

2、下载微信支付 SDK

我们可以通过如下地址从微信开放平台下载 SDK：https://developers.weixin.qq.com/doc/offiaccount/en/Payment/start.html#2

3、使用微信支付 API

在集成微信支付前，我们需要先了解微信支付提供的 API，包括统一下单接口、查询订单接口、关闭订单接口等。具体的 API 信息可以参考微信支付官方文档。

微信支付接口

在使用微信支付 SDK 进行开发时，我们需要将 SDK 拷贝到 PWA 应用的相应目录下，并引入 SDK 中的 wx.js 文件，同时在 HTML 中引入微信 JSSDK（jsapi）的链接。

// javascriptcn.com 代码示例
<!doctype html>
<html>
    <head>
        <title>我的 PWA 应用</title>
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    </head>
    <body>
        <h1>我的 PWA 应用</h1>
        <script type="text/javascript" src="static/js/wx.js"></script>
    </body>
</html>

接下来需要定义统一下单参数，并通过微信支付 SDK 中的 wx.requestPayment 接口调用微信支付。

// javascriptcn.com 代码示例
// 定义微信支付参数
const wx_pay_info = {
    order_info: {
        "body"        : "这是一笔测试订单",
        "out_trade_no": "2018050312654",
        "total_fee"   : "1",
        "spbill_create_ip"  : "123.12.12.123",
        "notify_url"  : "http://www.weixin.qq.com/wxpay/pay.php",
        "trade_type"  : "JSAPI"
    },
    jsApiParameters: ""
};

// 微信支付
wx.requestPayment({
    appId: wx_pay_info.jsApiParameters.appId,
    timeStamp: wx_pay_info.jsApiParameters.timeStamp,
    nonceStr: wx_pay_info.jsApiParameters.nonceStr,
    package: wx_pay_info.jsApiParameters.package,
    signType: wx_pay_info.jsApiParameters.signType,
    paySign: wx_pay_info.jsApiParameters.paySign,
    success: function (res) {},
    fail: function (res) {},
    complete: function (res) {}
});

总结

在 PWA 应用中集成支付宝和微信支付可以为用户提供更加优秀的用户体验，但需要进行一定的准备工作，并对支付宝和微信支付的接口进行深入了解。希望开发者们可以通过本文的介绍，顺利实现在 PWA 应用中集成支付宝和微信支付。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653d06187d4982a6eb6ef0be