微信公众号支付H5调用支付解析

当网站开发者需要实现微信公众号的在线支付功能时，可能会使用微信公众号支付进行处理。本文将介绍如何在网站中调用微信公众号支付H5。

准备工作

在开始前，需要先完成以下准备工作：

1. 在微信商户平台注册一个商户号，并通过相应的审核流程。
2. 在公众号后台配置JSAPI支付的安全域名。

H5调用支付

本节将介绍如何使用微信公众号支付H5进行在线支付。

第一步：引入JS文件

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

第二步：配置微信JS-SDK

// 配置微信JS-SDK
wx.config({
    debug: false,
    appId: 'YOUR_APPID',
    timestamp: 'YOUR_TIMESTAMP',
    nonceStr: 'YOUR_NONCESTR',
    signature: 'YOUR_SIGNATURE',
    jsApiList: ['chooseWXPay']
});

第三步：准备支付参数

// 准备支付参数
var payData = {
    appId: 'YOUR_APPID',
    timeStamp: 'YOUR_TIMESTAMP',
    nonceStr: 'YOUR_NONCESTR',
    package: 'prepay_id=YOUR_PREPAYID',
    signType: 'MD5',
    paySign: 'YOUR_PAYSIGN'
}

其中，payData的属性含义如下：

• appId：公众号的唯一标识
• timeStamp：生成支付请求的时间戳
• nonceStr：生成支付请求的随机字符串
• package：统一下单接口返回的 prepay_id 参数值，格式如：prepay_id=xxxxxxx
• signType：签名算法，目前支持 MD5
• paySign：签名

第四步：调用微信 JSAPI 完成支付

wx.chooseWXPay({
    timestamp: payData.timeStamp,
    nonceStr: payData.nonceStr,
    package: payData.package,
    signType: payData.signType,
    paySign: payData.paySign,
    success: function(res) {
        // 支付成功
        console.log('支付成功', res);
    },
    fail: function(res) {
        // 支付失败
        console.log('支付失败', res);
    },
    cancel: function(res) {
        // 取消支付
        console.log('取消支付', res);
    }
});

示例说明

下面给出两个示例，分别是获取支付参数和调用微信 JSAPI 完成支付。

示例一：获取支付参数

下面是一个获取支付参数的示例。

// 统一下单，获取prepay_id
// payData的值需要通过统一下单接口获取
var payData = {
    appId: 'YOUR_APPID',
    timeStamp: 'YOUR_TIMESTAMP',
    nonceStr: 'YOUR_NONCESTR',
    package: 'prepay_id=YOUR_PREPAYID',
    signType: 'MD5',
    paySign: 'YOUR_PAYSIGN'
}

示例二：调用微信 JSAPI 完成支付

下面是一个调用微信 JSAPI 完成支付的示例。

// 调用微信 JSAPI 完成支付
wx.chooseWXPay({
    appId: payData.appId,
    timestamp: payData.timeStamp,
    nonceStr: payData.nonceStr,
    package: payData.package,
    signType: payData.signType,
    paySign: payData.paySign,
    success: function(res) {
        // 支付成功
        console.log('支付成功', res);
    },
    fail: function(res) {
        // 支付失败
        console.log('支付失败', res);
    },
    cancel: function(res) {
        // 取消支付
        console.log('取消支付', res);
    }
});

以上就是使用微信公众号支付H5调用支付的完整攻略，希望能对您有所帮助。