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

Steps to install MySQL 8.0.23 under Centos7 (beginner level)

First, let me briefly introduce what MySQL is; In...

Use Vue3+Vant component to implement App search history function (sample code)

I am currently developing a new app project. This...

HTML imitates Baidu Encyclopedia navigation drop-down menu function

HTML imitates the Baidu Encyclopedia navigation d...

Using Nginx to implement grayscale release

Grayscale release refers to a release method that...

Implementation code for adding slash to Vue element header

<template> <div class="app-containe...

VMWare15 installs Mac OS system (graphic tutorial)

Installation Environment WIN10 VMware Workstation...

Detailed explanation of three relationship examples of MySQL foreign keys

This article uses examples to describe the three ...

MySQL DML statement summary

DML operations refer to operations on table recor...

js object to achieve data paging effect

This article example shares the specific code of ...

A complete list of common Linux system commands for beginners

Learning Linux commands is the biggest obstacle f...

Basic steps to use Mysql SSH tunnel connection

Preface For security reasons, the root user of My...

Vue uses el-table to dynamically merge columns and rows

This article example shares the specific code of ...

HTML Basic Notes (Recommended)

1. Basic structure of web page: XML/HTML CodeCopy...

MySQL uses frm files and ibd files to restore table data

Table of contents Introduction to frm files and i...

CSS hacks \9 and \0 may not work for hacking IE11\IE9\IE8

Every time I design a web page or a form, I am tr...