微信公共支付接入流程

公众号支付

---

简介

因受限于微信支付目录的授权，有最大数量限制问题。对微信端的H5页面唤起支付功能做了统一。

即统一支付授权目录，只为微信主项目 /h5/wechat-platform-h5 开通授权，该项目中的 pay.html 处理支付。所有的支付都转发到该页面处理。

使用示例

// payInfoStr 支付信息
// successBackUrl 成功回调
// appId 微信公众号 appId
window.location.href = `/h5/wechat-platform-h5/pay.html?payInfoStr=${payInfoStr}&successBackUrl=${successBackUrl}&appId=${appId}`

::: tip

1. payInfoStr 、successBackUrl、failBackUrl、cancelBackUrl 进行地址拼接时请使用encodeURIComponent 函数进行编码

2. payInfo 字段值服务端已经进行了序列化处理，故请勿使用JSON.stringify进行再次序列化

:::

pay.html 页面参数

query 参数

必须

默认值

说明

| payInfoStr | Y | -- | 支付信息字符串，其值为后端支付确认接口中 payInfo字段 |

| successBackUrl | Y | -- | 支付成功回调地址 |

| failBackUrl | N | 返回原地址 | 支付失败回调地址 |

| cancelBackUrl | N | 返回原地址 | 支付取消回调地址 |

| appId | Y | -- | 公众号appId |

小程序支付

---

简介

因小程序H5中，无法直接唤起小程序支付流程，且为了统一支付调用唤起方式，减少重复开发成本。现制定此小程序接入流程，各业务在此规范指导下开发，接入小程序支付。

所有的小程序都固定使用同一个支付路径 /pages/public/pay，业务侧统一跳转此地址进行支付。

所有的业务H5页面，都经过单点登录跳转，同步登录状态，并且通过URL传递参数如userId、custId等。具体请查看小程序接入H5业务指南

接入流程

跳转支付示例

// 支付确认接口返回的 payinfo 信息。必须使用 encodeURIComponent 进行编码
const payInfoStr = encodeURIComponent("{\"appId\":\"wxc6d6eace5d2d694e\",\"nonceStr\":\"9ecb131fdbaba6110814118cd591994f\",\"package\":\"prepay_id=wx22111808302188a273697fe11301f50000\",\"paySign\":\"ABEEBB73B3288E3E1A06B863491BCEDF\",\"signType\":\"MD5\",\"timeStamp\":\"1608607088\"}\n")
// 成功支付回调地址，必须
const successBackUrl = encodeURIComponent('https://baidu.com')
// 失败支付回调，可选。不设置则返回上一页
const failBackUrl = encodeURIComponent('https://weibo.com')
// 取消支付回调，可选。不设置则返回上一页
const cancelBackUrl = encodeURIComponent('https://qq.com')
// 拼接要跳转的小程序路径地址
const URL = `/pages/public/pay?payInfoStr=${payInfoStr}&successBackUrl=${successBackUrl}&failBackUrl=${failBackUrl}&cancelBackUrl=${cancelBackUrl}`
// 调用小程序跳转，此方法需要 jssdk v1.3.2 以上才支持 
wx.miniProgram.navigateTo({
  url: URL
})

支付跳转参数

query 参数

必须

默认值

说明

| payInfoStr | Y | -- | 支付信息字符串，其值为后端支付确认接口中 payInfo字段 |

| successBackUrl | Y | -- | 支付成功回调地址 |

| failBackUrl | N | 返回原页面 | 支付失败回调地址 |

| cancelBackUrl | N | 返回原页面 | 支付取消回调地址 |

::: tip

1. payInfoStr 、successBackUrl、failBackUrl、cancelBackUrl 进行地址拼接时请使用encodeURIComponent 函数进行编码

2. payInfo 字段值服务端已经进行了序列化处理，故请勿使用JSON.stringify进行再次序列化