移动端支付流程

2021-03-02 本文已影响0人永恒即是最美

微信

微信浏览器

在微信中打开h5页面付款时，使用JSAPI接口调起支付模块。微信浏览器提供了一个内置对象 WeixinJSBridge，实际是调用该对象的方法。其他浏览器中无此对象。参考文档

// 微信JSAPI支付
    async wechatJSPay() {
      let body = {
        id: this.orderId,
        aggregatePayment: '101',
        paymentChannel: '1002',
        tradeType: 1,
        openid: getCookie('payOpenId')
      }
      let { paymentParams } = await this.getPaymentParams(body)

      // 唤起微信支付
      WeixinJSBridge.invoke( // eslint-disable-line
        'getBrandWCPayRequest',
        {
          appId: paymentParams.appId,
          timeStamp: paymentParams.timestamp,
          nonceStr: paymentParams.nonceStr,
          package: paymentParams.package,
          signType: paymentParams.signType,
          paySign: paymentParams.paySign
        },
        res => {
          if (res.err_msg === 'get_brand_wcpay_request:ok') {
            // 支付成功
            this.$router.replace('/payment/payDone')
          } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
            this.$toast('支付取消')
          } else {
            this.$toast('支付失败')
          }
        }
      )
    },

非微信浏览器

具体形式就是：在浏览器中调起微信APP，并唤醒微信支付控件。前提是已有H5商城网站，并ICP备案。参考文档

// 微信H5支付
    async wechatH5Pay() {
      let returnUrl = process.env.VUE_APP_MEURL + '/payment/payConfirm'
      let body = {
        id: this.orderId,
        aggregatePayment: '101',
        paymentChannel: '1002',
        tradeType: 3,
        returnUrl
      }
      let { paymentParams } = await this.getPaymentParams(body)
      window.location.replace(paymentParams.url)
    },

小程序

小程序本身已经封装好了相关 api。首先后端调用微信支付下单接口，返回参数签名，和其他参数一起返给前端。前端使用后端返回的5个支付参数调用api，唤醒微信支付。参考文档

wx.requestPayment(
{
'timeStamp': '',
'nonceStr': '',
'package': '',
'signType': 'MD5',
'paySign': '',
'success':function(res){},
'fail':function(res){},
'complete':function(res){}
})

支付宝

支付宝官方提供一个支付中间页，在这个中间页进行选择浏览器支付还是支付宝 APP 支付。参考文档

// 支付宝支付，调用后台接口，后台返回的是一个 form 表单字符串，需要前端创建节点并提交就可以唤起支付支付了
getAlipay() {
  http.get('/alipay', params).then(res => {
    const div = document.createElement('div')
    
    div.innerHTML = res.data // 这里的 res.data 就是后台返回接收到的数据
    document.body.appendChild(div)
    document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
    document.forms[0].submit()
  })
}

移动端支付流程

猜你喜欢

热点阅读