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

Set IE8 to use IE7 style code

<meta http-equiv="x-ua-compatible" co...

A brief analysis of how to use border and display attributes in CSS

Introduction to border properties border property...

JS implements the snake game

Table of contents 1. Initialization structure 2. ...

Django2.* + Mysql5.7 development environment integration tutorial diagram

environment: MAC_OS 10.12 Python 3.6 mysql 5.7.25...

MySql implements page query function

First of all, we need to make it clear why we use...

JavaScript Interview: How to implement array flattening method

Table of contents 1 What is array flattening? 2 A...

Common methods of Vue componentization: component value transfer and communication

Related knowledge points Passing values ​​from pa...

A brief comparison of Props in React

Table of contents Props comparison of class compo...

Mysql5.6.36 script compilation, installation and initialization tutorial

Overview This article is a script for automatical...

Three common methods for HTML pages to automatically jump after 3 seconds

In practice, we often encounter a problem: how to...

MySQL series: Basic concepts of MySQL relational database

Table of contents 1. Basic Concepts 2. Developmen...

The scroll bar position is retained when scrolling the vant list component

The scroll bar position is retained when scrollin...

How to use the Linux md5sum command

01. Command Overview md5sum - Calculate and verif...

How much do you know about JavaScript inheritance?

Table of contents Preface The relationship betwee...