当前位置:首页网页设计 > 正文

【内部资料】微信(小程序、H5、JSAPI)的支付流程

作者:野牛程序员:2024-03-18 09:19:51网页设计阅读 522
【内部资料】微信(小程序、H5、JSAPI)的支付流程

                                            (小程序、H5、JSAPI)的支付流程

开发微信支付功能,涉及三种支付方式:

1、JSAPI 支付:微信内网页支付,需要开通微信服务号

2、小程序支付:在小程序中支付,需要开通小程序

3、H5 支付:在手机浏览器(出微信内网页)中网页支付



一、小程序支付



开发流程

1、小程序端请求创建订单接口,后端统一下单获取 orderId 并返回

2、小程序端获取通过wx.login()获取code

3、小程序端拿这code和orderId请求后端接口,获取支付所需数据

4、获取支付所需数据之后,小程序端调用wx.requestPayment()接口,直接调用起支付页面。

5、判断是否支付成功后的逻辑

【注意事项】

申请微信小程序账号

   申请成功可拿到 AppID(小程序 id)和 AppSecret(小程序密钥)

   申请类型为企业性质,否则无法接入微信支付

微信小程序认证

   通过认证的小程序才能接入微信支付和绑定商户平台。

申请商户平台账号

   需要第一步申请的 AppID

   申请成功可拿到 MchID(商户 id)和 MchKey(商户密钥)

微信信小程序关联商户号

   微信小程序和商户都认证成功后,在微信小程序后台微信支付菜单中进行关联。

接入微信支付

   在微信后台微信支付菜单中进行接入

开发指引-小程序支付 | 微信支付商户平台文档中心 (qq.com)

https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fpay.weixin.qq.com%2Fwiki%2Fdoc%2Fapi%2Fwxa%2Fwxa_api.php%3Fchapter%3D7_3%26index%3D1&source=article&objectId=1754886

https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2Fopen-api%2Fpayment%2Fwx.requestPayment.html&source=article&objectId=1754886


二、H5 支付

开发流程

1、前端端请求创建订单接口,后端统一下单获取 orderId 并返回

2、前端带着 orderId 请求支付接口,获得 mweb\_url,

3、然后跳转 mweb\_url 会跳转微信自动调用微信支付

4、支付后返回支付页,判断是否支付成功(需发送请求后端查询)

   4.1 刷新页面,获取最新的支付(订单)状态。

   4.2 设置一个的按钮"我已支付",让用户点击自动查询状态。

【注意事项】

在商户平台设置正确的支付域名

调试需要在线上,如果嫌麻烦可以使用内网穿透(Ngrok 或花生壳)

需对redirect\_url进行urlencode处理

H5 支付不能直接在微信客户端内调起请在外部浏览器调起

https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fpay.weixin.qq.com%2Fwiki%2Fdoc%2Fapi%2FH5.php%3Fchapter%3D15_4&source=article&objectId=1754886




三、JSAPI 支付(微信内网页支付)

开发流程

1、商品页

2、前端商品页创建订单,在后端统一下单后获取 orderId

3、前端带着 orderId 跳转到支付页,

4、支付页

5、获取 code

6、第一次进入页面,判断是否路径中有 code

7、没有 code,请求数据跳转授权页面,code 会通过回调地址一起返回回来

8、拿到 code,发送给后端,后端解析到 openid,保存好。

9、点击确定支付按钮,触发 wxPay() 方法

10、发送 orderId 给后端,获取 wxData

11、wxData 中包含 wx.config 和 wx.chooseWXPay 两个接口的数据。

12、先调用 wx.config()然后在调用 wx.chooseWXPay(),如果一切正常,支付页面就会弹出。

13、支付状态通过后端去查询


【注意事项】

开通微信商户号 - 设置支付目录(如果是 Vue 这类 SPA 页面,到根目录即可,也就是#号之前的地址)

开通微信公众号(服务号) - 设置安全域名、设置授权域名

收集参数:appId 和 AppSecret

添加 Web 开发工具开发者(需要开发者同时开发者关注开发的微信公众号和微信公众账号安全助手)

开通流程: 在入驻时选择线下场所,公众号场景,PC网站场景的商户系统默认开通此功能,其他商户如有需要,可以在入驻后前往商户平台 (opens new window)-产品中心-JSAPI支付-申请开通。

野牛程序员教少儿编程与信息学奥赛-微信|电话:15892516892
野牛程序员教少儿编程与信息学竞赛-微信|电话:15892516892
  • 最新推荐

    热门点击