10行代碼實現小程序支付功能！丨實戰

前面給你們講過一個藉助小程序雲開發實現微信支付的，可是那個操做稍微有點繁瑣，而且還會常常出現問題，今天就給你們講一個簡單的，而且藉助官方支付api實現小程序支付功能。

傳送門： 藉助小程序雲開發實現小程序支付功能

老規矩，先看本節效果圖

咱們實現這個支付功能徹底是藉助小程序雲開發實現的，不用搭建本身的服務器，不用買域名，不用備案域名，不用支持https。只須要一個簡單的雲函數，就能夠輕鬆的實現微信小程序支付功能。 核心代碼就下面這些：

1、建立一個雲開發小程序

關於如何建立雲開發小程序，這裏我就再也不作具體講解。不知道怎麼建立雲開發小程序的同窗，能夠去翻看騰訊云云開發公衆號內菜單【技術交流-視頻教程】中的教學視頻。

建立雲開發小程序有幾點注意的

1.必定不要忘記在app.js裏初始化雲開發環境。

2.建立完雲函數後，必定要記得上傳

2、建立支付的雲函數

1.建立雲函數pay

3、引入三方依賴tenpay

咱們這裏引入三方依賴的目的，是建立咱們支付時須要的一些參數。咱們安裝依賴是使用裏npm 而npm必須安裝node,關於如何安裝node，我這裏不作講解，百度一下，網上一大堆。

1.首先右鍵pay，而後選擇在終端中打開

2.咱們使用npm來安裝這個依賴。

在命令行裏執行 npm i tenpay

安裝完成後，咱們的pay雲函數會多出一個package.json 文件

到這裏咱們的tenpay依賴就安裝好了。

4、編寫雲函數pay

完整代碼以下

//雲開發實現支付
const cloud = require('wx-server-sdk')
cloud.init()

//1，引入支付的三方依賴
const tenpay = require('tenpay');
//2，配置支付信息
const config = {
  appid: '你的小程序appid', 
  mchid: '你的微信商戶號',
  partnerKey: '微信支付安全密鑰', 
  notify_url: '支付回調網址,這裏能夠先隨意填一個網址', 
  spbill_create_ip: '127.0.0.1' //這裏填這個就能夠
};

exports.main = async(event, context) => {
  const wxContext = cloud.getWXContext()
  let {
    orderid,
    money
  } = event;
  //3，初始化支付
  const api = tenpay.init(config);

  let result = await api.getPayParams({
    out_trade_no: orderid,
    body: '商品簡單描述',
    total_fee: money, //訂單金額(分),
    openid: wxContext.OPENID //付款用戶的openid
  });
  return result;
}
複製代碼

必定要注意把appid，mchid，partnerKey換成你本身的。

到這裏咱們獲取小程序支付所需參數的雲函數代碼就編寫完成了。

不要忘記上傳這個雲函數。

出現下圖就表明上傳成功

5、寫一個簡單的頁面，用來提交訂單，調用pay雲函數。

這個頁面很簡單：

1.本身隨便編寫一個訂單號（這個訂單號要大於6位）

2.本身隨便填寫一個訂單價（單位是分）

3.點擊按鈕，調用pay雲函數。獲取支付所需參數。

下圖是官方支付api所須要的一些必須參數。

下圖是咱們調用pay雲函數獲取的參數，和上圖所須要的是否是同樣。

6、調用wx.requestPayment實現支付

下圖是官方的示例代碼：

這裏不在作具體講解了，把完整代碼給你們貼出來

// pages/pay/pay.js
Page({
  //提交訂單
  formSubmit: function(e) {
    let that = this;
    let formData = e.detail.value
    console.log('form發生了submit事件，攜帶數據爲：', formData)
    wx.cloud.callFunction({
      name: "pay",
      data: {
        orderid: "" + formData.orderid,
        money: formData.money
      },
      success(res) {
        console.log("提交成功", res.result)
        that.pay(res.result)
      },
      fail(res) {
        console.log("提交失敗", res)
      }
    })
  },

  //實現小程序支付
  pay(payData) {
    //官方標準的支付方法
    wx.requestPayment({
      timeStamp: payData.timeStamp,
      nonceStr: payData.nonceStr,
      package: payData.package, //統一下單接口返回的 prepay_id 格式如：prepay_id=***
      signType: 'MD5',
      paySign: payData.paySign, //簽名
      success(res) {
        console.log("支付成功", res)
      },
      fail(res) {
        console.log("支付失敗", res)
      },
      complete(res) {
        console.log("支付完成", res)
      }
    })
  }
})
複製代碼

到這裏，雲開發實現小程序支付的功能就完整實現了。

實現效果

1.調起支付鍵盤

2.支付完成

3.log日誌，能夠看出不一樣支付狀態的回調

上圖是支付成功的回調，咱們能夠在支付成功回調時，改變訂單支付狀態。

下圖是支付失敗的回調：

下圖是支付完成的狀態：

到這裏咱們就輕鬆的實現了微信小程序的支付功能了，是否是很簡單啊。

源碼地址：

github.com/TencentClou…

若是你有關於使用雲開發CloudBase相關的技術故事/技術實戰經驗想要跟你們分享，歡迎留言聯繫咱們哦~比心！