微信JS API支付的实战指南

简介：本文详细讲解了如何使用微信JS API实现支付功能，从注册微信支付商户号到前端JS调用，再到后端处理支付请求，步骤清晰，适合开发者快速上手微信支付功能。

微信JS API支付的实战指南

引言

随着移动支付的普及，微信支付已成为众多应用不可或缺的支付手段。微信JS API支付允许前端页面直接调用微信支付功能，提升了用户体验和支付效率。本文将带你一步步实现微信JS API支付。

第一步：注册微信支付商户号

登录微信公众平台：首先，你需要在微信公众平台（mp.weixin.qq.com）注册并认证你的公众号或服务号。
申请微信支付：在公众号后台，找到“微信支付”功能，按照指引填写商户信息和银行账号等，完成支付功能的申请。
获取API密钥和商户号：申请通过后，你将获得商户号和API密钥，这两个信息在后续的开发中非常重要。

第二步：引入微信JS SDK

在你的支付页面上，你需要引入微信JS SDK来调用支付功能。可以通过以下方式引入：

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

第三步：配置SDK

在调用支付功能之前，你需要使用wx.config方法配置SDK的权限验证参数，这些参数包括appId、timestamp、nonceStr、signature、jsApiList等。

wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '你的AppID',
    timestamp: '时间戳',
    nonceStr: '随机串',
    signature: '签名',
    jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
});

注意：signature的生成较为复杂，通常需要在后端完成，它涉及到对多个参数的排序和加密。具体生成方法可参考微信支付官方文档。

第四步：发起支付请求

配置好SDK后，你可以使用wx.chooseWXPay方法发起支付请求。这个方法需要传入一个支付参数对象，该对象通常由后端接口返回。

wx.chooseWXPay({
    timestamp: '', // 支付签名时间戳，注意微信json串中均为string类型
    nonceStr: '', // 支付签名随机串，不长于 32 位
    package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***
    signType: 'MD5', // 签名方式，默认为'MD5'，使用新版支付需传入'SHA256'
    paySign: '', // 支付签名
    success: function (res) {
        // 支付成功后的回调函数
        alert('支付成功');
    },
    fail: function (res) {
        // 支付失败后的回调函数
        alert('支付失败');
    }
});

第五步：后端处理支付请求

当用户在前端发起支付时，实际上需要向你的服务器请求支付参数（包括prepay_id、timestamp、nonceStr、signType、paySign等）。这些参数由后端通过调用微信支付统一下单API获得，并根据这些参数生成最终的paySign。

示例PHP代码（仅供参考）：

```php
// 假设已通过微信API获取到prepay_id等参数
$data = [
‘appId’ => ‘你的AppID’,
‘timeStamp’ => time(),
‘nonceStr’ => md5(uniqid()),
‘package’ => ‘prepay_id=’ . $prepay_id,
‘signType’ => ‘MD5’,
];
ksort($data); // 对参数进行排序
$stringA = http_build_query($data); // 将参数格式化成url参数形式
$stringSignTemp = $stringA . ‘&key=’ . ‘你的API密钥’; // 在stringA后

微信JS API支付的实战指南