您好,登錄后才能下訂單哦!
需求說明
這個需求說明是完全沒有必要的,但是還是寫一下吧,但凡是做公眾號的,一般都是需要了解這個微信支付的,不然基本的業(yè)務(wù)都沒辦法走,所以今天簡單的記錄一下微信支付的一些問題以及流程是怎么樣的。記錄的是jsapi支付,別的支付方式暫時沒有記錄,也就是拉起來付款界面的支付。
微信支付產(chǎn)品
https://pay.weixin.qq.com/static/product/product_index.shtml#payment_product
微信開發(fā)步驟
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3
這里簡單的說一下,我們打開這哥鏈接以后其實是官方截圖的配置,有一個支付配置和設(shè)置授權(quán)域名
首先是支付配置:最簡單的辦法是我們打開需要支付的公眾號,右上角有三個點,直接復(fù)制url,這個url就是這里需要配置的url
至于下面的授權(quán)域名,我自己當(dāng)時是沒有進行配置的,這里可能是我疏忽了,但是我沒有配置也沒有影響我使用,所以這里我不確定要不要配置。
支付接口
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId":"wx2421b1c4370ec43b", //公眾號名稱,由商戶傳入 "timeStamp":"1395712654", //時間戳,自1970年以來的秒數(shù) "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機串 "package":"prepay_id=u802345jgfjsdfgsdg888", "signType":"MD5", //微信簽名方式: "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 }, function(res){ if(res.err_msg == "get_brand_wcpay_request:ok" ){ // 使用以上方式判斷前端返回,微信團隊鄭重提示: //res.err_msg將在用戶支付成功后返回ok,但并不保證它絕對可靠。 } }); } if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); } }else{ onBridgeReady(); }
這段是官方的源碼,我們是可以直接拿來使用的,這里主要是展示一下騰訊的簽名是怎么生成的:
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3
上面的五個參數(shù)其實appid是我們可以拿到的,時間戳是我們直接可以生成的,注意這里是秒數(shù),不是毫秒,隨機串這個可以直接自己寫一個函數(shù),生成一個32位以內(nèi)的隨機數(shù),prepay_id這是后端提供接口,返回一個預(yù)付id,signType是md5加密,無可爭議的,最后一個是簽名,簽名的規(guī)則是:
這個就比較有意思了,我做的時候直接用后端生成好的簽名進行的,但是理論上我前端也是可以生成的,但是我失敗了,可能是我順序的問題或者是別的什么問題吧,這個不得而知了。
看源碼
廢話不說了,既然是記錄,就直接貼源碼:
/** * @_fun_jsapi 拉起微信付款的界面 */ _fun_jsapi(order_no) { let that = this let openid = sessionStorage.getItem('openid') if (openid && that.timestamp && that.nonceStr) { request({ method: 'post', url: Constants.host_jsapi + api.jsapi, data: { out_trade_no: order_no, //商家訂單號 total_fee: that.account_price * 100, product_id: '8501', //所含產(chǎn)品id body: '微信公眾號訂房-頤陸科技', //訂單簡述 128字符(中文32位) detail: '', //訂單詳情 60000字符 (中文1500位) fee_type: '', //幣種 缺省值CNY attach: '', //用戶附加字串,原樣返回 limit_pay: '', //限制字串 例:no_credit 不收信用卡 goods_tag: '', //訂單優(yōu)惠標(biāo)記 openid: openid, //僅在jsapi中會使用 } }).then((res) => { //alert(JSON.stringify(res)) if (res.data.result_code === 'SUCCESS') { that.prepay_id = res.data.prepay_id that.timestamp = res.data.time_stamp that.nonceStr = res.data.nonce_str that.paySign = res.data.pay_sign that.onBridgeReady() } else { instance('error') } }).catch((err) => { instance(err); //alert(err); }) //instance(sessionStorage.getItem('openid')); } else { instance('參數(shù)獲取失敗') } }, /** * @onBridgeReady */ onBridgeReady() { let that = this WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId": "wx7eb8183de8a1311b", //公眾號名稱,由商戶傳入 "timeStamp": that.timestamp + "", //時間戳,自1970年以來的秒數(shù) "nonceStr": that.nonceStr, //隨機串 "package": "prepay_id=" + that.prepay_id, //預(yù)定單id "signType": "MD5", //微信簽名方式: "paySign": that.paySign//微信簽名 }, function (res) { if (res.err_msg == "get_brand_wcpay_request:ok") { //instance('支付成功') that.$router.push({path: '/Pay_success'}) } else if (res.err_msg == "get_brand_wcpay_request:ok") { //that.$router.push({path:'/Pay_success'}) 取消支付 instance('取消支付') } else { //instance('支付失敗') } }) },
需要注意的是:微信支付的金額是分為單位的,也就是我們正常的錢需要進行*100的操作
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。