實現微信內建瀏覽器線上支付簡單介紹

antzone發表於2017-04-08

本章節簡單介紹一下如何實現微信內建瀏覽器線上支付功能。

這是微信的官方API文件微信API

一.微信支付的準備工作:

申請公眾號,申請開通支付,這個很簡單,自行百度

申請好之後 在微信公眾平臺頁面的“微信支付”頁面中的“開發配置”Tab上配置“支付授權目錄”,“測試授權目錄”,“測試白名單”。

在微信公眾平臺頁面的“開發者中心”中找到“AppID(應用ID)”和“AppSecret(應用金鑰)”。

在商戶平臺中找到微信支付分配的商戶號,以及自己配置一個商戶支付金鑰。

二.具體步驟:

首先通過微信支付的api 獲得支付用的prepay_id,這裡需要用到上面提到的“AppID(應用ID)”,“AppSecret(應用金鑰)”,“微信支付分配的商戶號”,“商戶支付金鑰”以及其他的一些引數(具體參照微信開發文件)用MD5加密成簽名(第一次簽名)獲得prepay_id後,用prepay_id和一些其他引數(具體參照微信開發文件)用MD5加密成簽名(第二次簽名)然後在前端通過微信內建瀏覽器提供的js API,WeixinJSBridge.invoke來呼叫微信支付的彈出頁面,這裡需要用到上面的第二次的簽名。

三.具體程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
$.get('/xxx',function(data){
 if(data && data !== ""){
  var _data = $.parseJSON(data)[0];
  if(parseInt(_data.userAgent) < 5){
  alert('您的微信版本低於5.0,無法使用微信支付!');
  return false;
  }
  WeixinJSBridge.invoke('getBrandWCPayRequest',{
  'appId': _data.appId,
  'timeStamp': _data.timeStamp,
  'nonceStr': _data.nonceStr,
  'package': 'prepay_id=' + _data.packageOne,
  'signType': _data.signType,
  'paySign': _data.paySign
  },function(res){
   if(res.err_msg === 'get_brand_wcpay_request:ok'){
   alert('支付成功,返回訂單列表!');
   }else if(res.err_msg === 'get_brand_wcpay_request:cancel'){
   alert('取消支付!');
   }
  });
 }
});

相關文章