学习记录
APP、H5支付流程介绍
微信内嵌H5需要先 npm installjweixin-module -s 下载微信 jssdk在 vuex 中定义 const jwx = require('jweixin-module') 在vuex的actions中定义一个方法,请求后台接口,获得如下参数使用 jwx.config(res.data) 注入这些参数 在jwx.ready 中使用 sdk 提供的 API 返回到需要支付的页面,先调用刚才 vuex 中 actions 中定义的方法 先调后端接口下单拿到 订..
2021-02-25 06:42:14
407
                <blockquote> 

目前只介绍了APP端和WEB、WAP端,仅介绍了前端页面逻辑与跳转方式

H5微信浏览器支付

微信支付

需要先 npm install jweixin-module -s 下载微信 jssdk

  • vuex 中定义 const jwx = require('jweixin-module')
  • vuexactions中定义一个方法,请求后台接口,获得如下参数

  • 使用 jwx.config(res.data) 注入这些参数
  •  jwx.ready 中使用 sdk 提供的 API
  • 返回到需要支付的页面,先调用刚才 vuexactions 中定义的方法
  • 先调后端接口下单拿到 订单号
  • 拿这个订单号在调用后端的 支付接口 拿到下图中的参数

  • 用上面得到的参数请求 jwx.chooseWXPay 接口
  • 得到两个回调(success,error) 支付结束

支付宝支付

使用浏览器跳转接口 get 携带 token 和 订单id (后端去处理请求支付)

接口回调地址为 支付结果页 (需要有 暂不支付 和 我已完成支付 按钮)

点击 我已完成支付 去获取支付结果接口


H5非微信浏览器支付

微信支付

使用浏览器跳转接口 get 携带 token 和 订单id (后端去处理请求支付)

接口回调地址为 支付结果页 (需要有 暂不支付 和 我已完成支付 按钮)

点击 我已完成支付 去获取支付结果接口

支付宝支付

同微信浏览器


APP支付 

微信支付

uni.requestPayment({
    provider: 'wxpay',
    orderInfo: res.data.str, //订单数据Object
    success: function(res) {
    
},
fail: function(err) {

}

});

支付宝支付

uni.requestPayment({
    provider: 'alipay',
    orderInfo: res.data.str, //订单数据String
    success: function(res) {
    
},
fail: function(err) {

}

});


WEB支付 

微信支付

下单之后拿到 订单id 跳转页面到 微信扫码支付页(自定义),与此同时原页面要有个弹框(需要有 暂不支付 和 我已完成支付 按钮,点击 我已完成支付 需要调用支付结果)

支付宝支付 

下单之后拿到 订单id 跳转页面到 支付宝扫码支付页(支付宝提供),与此同时原页面要有个弹框(需要有 暂不支付 和 我已完成支付 按钮,点击 我已完成支付 需要调用支付结果)


接下来会有一个思维导图,等待更新。。。  


PHP学习交流群?:PHP学习交流群

前端学习交流群?:前端交流群

微信公众号?:叮当Ding