HTML5微信支付v2版本sdk

原创

mob649e8155b018 2024-10-09 06:57:55 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e8155b018的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何实现 HTML5 微信支付 v2 版本 SDK

在现代网站中，整合支付功能是一个不可避免的任务，而微信支付作为中国最流行的移动支付解决方案之一，被广泛使用。本文将详细介绍如何在 HTML5 中实现微信支付的 v2 版本 SDK。我们将分步进行，通过这个过程，你将能了解到如何优雅地实现这一功能。

整体流程

首先让我们概览一下实现微信支付的整体流程。以下是每一步的概述表格：

步骤	描述
第一步：申请微信支付	注册商户帐号并获取相关的 API 密钥。
第二步：生成支付订单	通过后端程序生成支付订单，并返回必要的参数。
第三步：调用微信支付接口	在前端通过 SDK 调用微信支付。
第四步：处理支付结果	根据结果处理支付成功或失败的状态。

具体步骤及代码实现

第一步：申请微信支付

在使用微信支付前，首先需要在 [微信支付商户平台]( 注册并获取商户 ID 和 API 密钥。这是进行所有支付操作的基础。

第二步：生成支付订单

为了生成一个支付订单，你需要通过服务器来创建一个请求。这里是一个用 Node.js 编写的示例：

const crypto = require('crypto');
const axios = require('axios');

async function createOrder() {
    const appId = 'your_app_id'; // 你的应用 ID
    const mchId = 'your_mch_id'; // 你的商户 ID
    const key = 'your_api_key'; // 你的API密钥
    const orderNumber = Date.now(); // 生成订单号
    const totalFee = 100; // 订单金额（单位：分）

    const data = `<xml>
        <appid>${appId}</appid>
        <mch_id>${mchId}</mch_id>
        <nonce_str>${Math.random().toString(36).substr(2, 15)}</nonce_str>
        <body>商品描述</body>
        <out_trade_no>${orderNumber}</out_trade_no>
        <total_fee>${totalFee}</total_fee>
        <spbill_create_ip>用户的 IP 地址</spbill_create_ip>
        <notify_url>你的回调 URL</notify_url>
        <trade_type>JSAPI</trade_type>
    </xml>`;

    const sign = crypto.createHmac('sha256', key).update(data).digest('hex');

    const orderData = data.replace('</xml>', `<sign>${sign}</sign></xml>`);

    const response = await axios.post(' orderData, {
        headers: { 'Content-Type': 'application/xml' }
    });

    return response.data;
}

代码解释：

使用 crypto 模块生成签名，以确保数据的安全性和完整性。
通过 HTTP POST 向微信支付的统一下单接口发送请求，以生成支付订单。

第三步：调用微信支付接口

在前端，我们需要实现支付按钮并调用微信支付的 JS SDK。以下是 HTML 和 JavaScript 代码的示例：

<script src="
<script>
    function onBridgeReady(paymentData) {
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest',
            {
                "appId": paymentData.appId,
                "timeStamp": paymentData.timeStamp,
                "nonceStr": paymentData.nonceStr,
                "package": paymentData.package,
                "signType": "MD5", // 注意这里为 MD5
                "paySign": paymentData.paySign
            },
            function(res){
                if(res.err_msg == "get_brand_wcpay_request:ok") {
                    // 支付成功
                    console.log('支付成功');
                } else {
                    // 支付失败
                    console.log('支付失败');
                }
            }
        );
    }

    async function initiatePayment() {
        const paymentData = await createOrder(); // 假设 createOrder 函数返回的是前面获取的支付参数
        onBridgeReady(paymentData);
    }
</script>

<button onclick="initiatePayment()">支付</button>

代码解释：

引入微信 JS SDK 并创建支付请求。
initiatePayment 函数通过 createOrder 获取支付信息。
调用 WeixinJSBridge.invoke 发起支付请求，并根据返回结果处理支付成功与失败。

第四步：处理支付结果

在服务器未收到支付异步通知时，需要处理结果的逻辑。以下是微信支付结果处理的典型代码示例：

app.post('/notify', (req, res) => {
    // 从请求中获取数据
    const data = req.body;

    // 验签
    const sign = crypto.createHmac('sha256', key).update(data).digest('hex');

    if (sign === data.sign) {
        // 处理支付成功的逻辑
        console.log('支付成功');
        res.send('<xml><return_code>SUCCESS</return_code></xml>');
    } else {
        console.log('支付失败，验签不成功');
        res.send('<xml><return_code>FAIL</return_code></xml>');
    }
});

代码解释：

接收到的结果需要进行验签，以确保安全性。
根据返回的结果内容执行相应的业务逻辑（如订单状态更新等）。

流程序列图

以下是整个支付流程的序列图，使用 Mermaid 语法：

sequenceDiagram
    participant U as 用户
    participant B as 浏览器
    participant S as 服务器
    participant W as 微信支付

    U->>B: 点击支付按钮
    B->>S: 请求生成支付订单
    S->>W: 请求支付
    W->>S: 返回支付参数
    S->>B: 返回支付参数
    B->>W: 调用微信支付
    W->>B: 返回支付结果
    B->>U: 支付结果反馈