1. 程式人生 > >微信支付前端流程

微信支付前端流程

其實官網介紹的已經很明確了也有示例程式碼 但還是想寫一下,畢竟琢磨了一天了

首先要保證你的專案外網可以訪問到, 我的是vue專案,用nginx做的代理, 這裡是不需要jssdk的

onBridgeReady: function () { //支付
const openId = localStorage.getItem(‘openId’)
WeixinJSBridge.invoke(
‘getBrandWCPayRequest’, {
“appId”:“wx5b334b8d334098ed”, //公眾號名稱,由商戶傳入
“timeStamp”:“1539685581”, //時間戳,自1970年以來的秒數
“nonceStr”:“2f0ddaaf4fda4958b01bd8667e028455”, //隨機串
“package”:“prepay_id=wx16182618444488b89a68da7f3822972560”,
“signType”:“MD5”, //微信簽名方式:
“paySign”:“2B091758218B61A642AB2F6A731F6E2D” //微信簽名
},
function (res) {
console.log(res)
if (res.err_msg === ‘get_brand_wcpay_request:ok’) {
Toast(‘微信支付成功’)
this.$router.push(’/MineOrder’)
alert(‘支付成功’)
} else if (res.err_msg === ‘get_brand_wcpay_request:cancel’) {
Toast(‘使用者取消支付’)

          // window.location.href = 'gift_failview.do?out_trade_no=' + this.orderId
        } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
          Toast('網路異常,請重試')
        }
      }
    )
},
handleClick: function () {
  if (typeof WeixinJSBridge === 'undefined') {
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(), false)
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady())
      document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady())
    }
  } else {
    this.onBridgeReady()
  }
}