Mini Programs use Mini Program Cloud to implement WeChat payment functions

Mini Programs use Mini Program Cloud to implement WeChat payment functions

1. Open WeChat Pay

1.1 Affiliate Merchant Number

\微信公眾號平臺\功能\微信支付\商戶號管理\關聯商戶號

insert image description here

1.2 Add merchant number

\云開發平臺\設置\其他設置\微信支付配置\添加商戶號

insert image description here

1.3 Administrator Authorization

1.2 On that picture, click Authorize. A prompt will pop up on the administrator's WeChat, just click to confirm the authorization.

Otherwise, when using it, an error message will appear indicating sub_mch_id與sub_appid不匹配!

2. Cloud Function Development

2.1 Create a new cloud function

insert image description here

insert image description here

2.2 Cloud Function Code

\pay\index.js

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" : event.body,
    "outTradeNo" : event.outTradeNo,
    "spbillCreateIp" : "127.0.0.1",
    "subMchId" : "0000000000", //Note here: although the key is the sub-merchant id, it is actually the normal merchant id
    "totalFee" : parseInt(event.totalFee), //Second pitfall: Note that it must be a number. If it is not a number, an error will be reported: unifiedOrder:fail wx api error: -202
    "envId": "ooo-xxxxxxxxxxxxxxxx", //This is the cloud environment id to which the callback function belongs
    "functionName": "payCallBack", //This is the callback function name"nonceStr":event.nonceStr, //The third pitfall: The relevant cloud function code in the official document does not have nonceStr and tradeType. When testing, it will report an error that nonceStr does not exist. I looked through the document and found that this is a required item. After pasting it directly, you need to add these two parameters"tradeType":"JSAPI"
  })
  return res
}

2.3 Upload and deploy cloud functions

insert image description here

insert image description here

3. Mini Program Call

3.1 Unified ordering

  • The data obtained after placing an order on WeChat should be saved in the database first and kept as a backup.
  • Then call up the WeChat payment interface
//Call cloud function, WeChat unified order cloudPay(){
    var _this = this
    this.setData({
      body: "Bill Payment-xxxxx",
      outTradeNo: this.data.id+"-"+util.uuid(16),
      totalFee: this.data.totalCost*100 //payment unit: cents})
    app.showLoading(true)
    wx.cloud.callFunction({
      name: "pay",
      data: {
        body: _this.data.body,
        outTradeNo: _this.data.outTradeNo,
        totalFee: _this.data.totalFee,
        nonceStr:util.uuid(32)//Call your own uuid function},
      success(res) {
        // errCode: 0
        // errMsg: "cloudPay.unifiedOrder:ok"
        // returnCode: "FAIL"
        // returnMsg: "total_fee is empty."
        console.log("Submission successful", res.result)
        if(res.result.returnCode!="SUCCESS"){
          app.showToast(res.result.returnMsg)
          return
        }
        _this.unifiedOrder(res.result)
        // _this.requestPayment(res.result)
      },
      fail(res) {
        console.log("Submission failed", res)
      }
    })
  },

3.2 Open WeChat payment interface

  //Official standard payment method, call up the payment interface requestPayment(payData) {
    var _this = this;
    const payment = payData.payment //Note that the result of the previous function directly integrates the parameters to be used here. You can directly expand it and use wx.requestPayment({
      ...payment, //...is the syntax for expanding variables success(res) {
        console.log("Payment successful", res)
        _this.paySuccess()
      },
      fail(res) {
        console.log("Payment failed", res)
      }
    })
  },

3.2 Payment success callback

  • It is not recommended to execute the payment success operation directly in the success callback function of requestPayment
  • It is better to create another cloud function payCallBack
  • This cloud function payCallBack calls the interface of our self-built server to execute the payment success operation
  • This involves how to call the http interface in the cloud function. I will explain it later.

This concludes this article about how to use the WeChat payment function in a mini program through the mini program cloud. For more information about WeChat payment in a mini program, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • How to call WeChat payment from a mini program
  • How to implement WeChat applet calling WeChat payment interface
  • A simple example of WeChat payment using WeChat applet and PHP
  • WeChat applet WeChat payment access development example detailed explanation
  • WeChat Mini Program steps for WeChat payment
  • WeChat Mini Programs - Detailed explanation of WeChat login, WeChat payment, and template messages

<<:  How to view and modify the time zone in MySQL

>>:  Use the Linux seq command to generate a sequence of numbers (recommended)

Recommend

Implementation of CSS3 button border animation

First look at the effect: html <a href="#...

MySQL 8.0.12 installation and configuration graphic tutorial

Recorded the download and installation tutorial o...

This article teaches you how to play with CSS border

Border Style The border-style property specifies ...

JavaScript to show and hide images

JavaScript shows and hides pictures, for your ref...

Analyze the selection problem of storing time and date types in MySQL

In general applications, we use timestamp, dateti...

JS implements the dragging and placeholder functions of elements

This blog post is about a difficulty encountered ...

Solution to MySQL server login error ERROR 1820 (HY000)

Fault site: Log in to the MySQL server and get th...

Install Percona Server+MySQL on CentOS 7

1. Environmental Description (1) CentOS-7-x86_64,...

How does Vue implement communication between components?

Table of contents 1. Communication between father...

Vue form input binding v-model

Table of contents 1.v-model 2. Binding properties...

mysql add, delete, modify and query basic statements

grammar Here is the generic SQL syntax for INSERT...

Three methods of automatically completing commands in MySQL database

Note: The third method is only used in XSell and ...

Complete steps for uninstalling MySQL database

The process of completely uninstalling the MySQL ...

It's the end of the year, is your MySQL password safe?

Preface: It’s the end of the year, isn’t it time ...