# h5 发起微信小程序支付（h5 端）

## 业务流程

业务流程路径：微信小程序-小程序 h5 页面-发起微信支付（微信小程序支付）

## 开发

1. 【前端 H5】请求支付接口（aggregatePayment）-模拟成功响应

[小程序 发起微信支付](https://developers.weixin.qq.com/miniprogram/dev/api/payment/wx.requestPayment.html)

```
const res = {
    "code": 200,
    "data": {
        "appId": "wx6b56151bcbde1246", // 可选，当前小程序APPID
        "dealPage": "https://superdesk.avic-s.com/super_cloud/wx/entity_shop/#/cashier/payResult", // 回跳地址
        "nonceStr": "aa000392d1704106bd26b75ff8065e19", // 必填，发起微信支付所需参数
        "orderNo": "LS20240116172538382b23I_172632", // 必填，业务方使用的订单编号
        "package": "prepay_id=wx1617263595874201df11904699967d0000", // 必填，发起微信支付所需参数
        "paySign": "pOveP0r44rfa7/K06meJaOPqTJ70ojAjFY8JHQH6Lo5zcOR4OOEJzZ6xs3IPR0+wZRtlLulTrFk6xZBZCrgTmcyrz+8M+gW/sVktFJnncS3z60fP+LJZDKaloDmoya9P+RhwCIDE42LkDcC5IjkXVu2qP5e6hRsWXgpe68TrtQy2xPrh+iO/slOQZb25P3r8VhMCTllCYPh3YPeqGOImNS05XbVXzbkF+SmB30dGET3WNSVyaWL9p70L2yNLxOxRBuFwqvQkwR0DEHG4xZ5HnOIUZBB7b+PlhLfW0SGvXu5CEnTp694Re3cfIpaQ9VMM8TKPeU9QHMJLeqAF5AXbVg==", // 必填，发起微信支付所需参数
        "prepayId": "wx1617263595874201df11904699967d0000", // 可选，package已经包含
        "signType": "RSA", // 必填，发起微信支付所需参数
        "timeStamp": "1705397196" // 必填，发起微信支付所需参数
    }
}
```

2. 【前端-H5】跳转小程序页面，携带参数

[小程序 web-view](https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html)

```js
import qs from "qs"; // 用于处理 url 参数

let path = "/pages/payment/wxPay";
let query = res.data;
let url = `${path}?${qs.stringify(query)}`; // 转成url参数形式，例如`/pages/payment/wxPay?appId=xx&dealPage=xx`
// 跳转小程序页面
wx.miniProgram.navigateTo({
  url: url,
});
```

3. 【前端-小程序】支付完成后，页面回跳到业务方指定地址（dealPage），携带支付结果

示例：

```
https://superdesk.avic-s.com/super_cloud/wx/entity_shop/#/cashier/payResult?code=FAIL&orderNo=xxx
```

参数说明

```
{
  code: 'FAIL', // 必传，支付结果，取值：SUCCESS, FAIL
  orderNo: this.pageQuery.orderNo, // 必传，业务方使用的订单编号
}
```
