从零开始！带你体验H5页面接入微信支付的酸爽

前端

2023-08-05 13:43:17

如何将 Vue 制作的 H5 页面接入微信支付

前提准备

注册并开通微信支付商户号
- 前往微信支付官方网站 (https://pay.weixin.qq.com/) 注册商户号。
- 提交相关材料进行审核，通过审核后即可开通商户号。
将公众号与商户号关联
- 登录微信支付商户平台，点击“产品中心” - “公众号支付” - “关联公众号”。
- 根据提示操作，将公众号与商户号关联。
在商户号中配置支付授权目录和回调目录
- 登录微信支付商户平台，点击“产品中心” - “公众号支付” - “支付授权目录”，添加支付授权目录。
- 登录微信公众平台，点击“设置” - “公众号设置” - “功能设置” - “网页授权域名”，添加回调目录。

接入流程

获取微信支付参数
- 向微信支付服务器发送统一下单请求，获取预支付订单。
- 预支付订单中包含微信支付所需的参数。
调用微信支付
- 使用微信支付 SDK 调用微信支付。
- 传入获取到的微信支付参数。

代码实现

引入微信支付 SDK

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

获取微信支付参数

const unifiedOrderRes = await wx.request({
  url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',
  method: 'POST',
  data: {
    body: '商品',
    out_trade_no: '商户订单号',
    total_fee: '支付金额',
    trade_type: 'JSAPI',
  },
});

调用微信支付

wx.chooseWXPay({
  timestamp: unifiedOrderRes.data.timestamp,
  nonceStr: unifiedOrderRes.data.nonce_str,
  package: unifiedOrderRes.data.package,
  signType: unifiedOrderRes.data.sign_type,
  paySign: unifiedOrderRes.data.pay_sign,
  success: (res) => {
    // 支付成功
  },
  fail: (err) => {
    // 支付失败
  },
});

注意事项