天天看點

使用雲開發實作微信支付的具體方法

為友善微信小程式的開發,與維護的便捷性,開始研究使用雲開發實作微信支付的方法,省掉了租賃伺服器與背景開發的成本。值得開心的是雲開發已經支援了微信支付。

微信支付的準備條件

官方文檔說明,微信支付要實作的前提條件是:

  • 1、微信開發者工具 Nightly 版 1.02.2005111 及更新的版本
  • 2、需要已經開通了微信支付(目前隻有企業法人經過認證才能開通;),且已綁定了商戶号的小程式。具體開通方法參見微信支付官方文檔

開通方法

(1)在微信開發者工具中,使用綁定的微信小程式賬号,打開雲開發控制台,在雲開發控制台中的 設定 - 其他設定 中添加商戶号

使用雲開發實作微信支付的具體方法

(2)添加後,需要在綁定的商戶号管理者在微信支付提供的【服務商助手】小程式上确認授權。

如果需要 jsapi 和 api 退款權限,需要前往微信支付商戶平台我的授權産品中進行确認授權,完成授權後即可調用微信支付相關接口能力。

微信支付流程說明

用微信支付雲調用來實作完整的支付功能,大體上會經過以下4個步驟(後面在代碼的寫法上有些步驟會整合到一起):

1、使用者在小程式端點選支付時使用wx.cloud.callFunction調用雲函數(比如雲函數名為pay),并将商品名稱、商品價格等資訊傳遞給pay雲函數;

2、在pay雲函數中調用統一下單接口CloudPay.unifiedOrder(),參數包括接收的商品資訊、雲函數環境id,以及需要填寫結果通知回調函數(比如函數名為paynotice)用來接收異步支付結果;pay雲函數會傳回的成功結果對象中會包含payment字段;

3、在小程式端wx.cloud.callFunction的success回調函數(也就是拿到雲函數傳回的對象)裡調用wx.requestPayment接口發起支付,而從pay雲函數傳回的payment對象(字段)就包含這個接口所需要的所有資訊(參數);這時會彈出微信支付的界面;

4、使用者在小程式端支付成功,paynotice就會接受到異步的支付結果,我們可以在paynotice雲函數裡進行發送訂閱消息以及将支付成功的資訊更新到資料庫等操作      

支付的簡單實作

我們可以在小程式的wxml頁面比如pay.wxml頁面,點選某個button元件時,通過事件處理函數比如callPay,來調用pay雲函數,代碼如下:

<button bindtap ="callPay">發起支付</button>      
const cloud = require('wx-server-sdk')
cloud.init({  
    env: cloud.DYNAMIC_CURRENT_ENV
})
    
exports.main = async (event, context) => {  
    const res = await cloud.cloudPay.unifiedOrder({    
    "body": "微信支付",    
    "outTradeNo" : "122775224070323234368128", //訂單号,不能重複,這個可以根據時間生成 
    "spbillCreateIp" : "127.0.0.1", //就是這個值不用改    
    "subMchId" : "1520057521",  //你的商戶ID或子商戶ID    
    "totalFee" : 100,  //機關為分    
    "envId": "",  //你的雲開發環境ID,注意不是環境名稱    
    "functionName": "paysuc",  // 支付成功的回調雲函數,這個函數可以處理支付成功之後的事情
    "nonceStr":"F8B31E62AD42045DFB4F2",  //随便寫的32位字元串,建議自己生成    
    "tradeType":"JSAPI"   //預設是JSAPI  
    })  
    return res
}
      
callPay(){  
    wx.cloud.callFunction({    
    name: 'pay',  //雲函數的名稱    
    success: res => {      
        console.log(res)      
        const payment = res.result.payment   // payment包含了支付需要的所有參數   
        wx.requestPayment({        
            ...payment,        
            success (res) {          
                console.log('支付成功', res)
            },        
            fail (err) {          
               console.error('支付失敗', err)         
            }      
         })    
     },    
     fail: console.error
    })
},
      

繼續閱讀