In front of you to tell a small program cloud development to achieve wechat payment, but that operation is a little cumbersome, and will often appear problems, today to tell you a simple, and with the official payment API to achieve small program payment function.

Portal: Implement applets payment function with applets cloud development

As always, look at the renderings of this section

We realize this payment function completely with the help of small program cloud development, no need to build their own server, no need to buy a domain name, no need to record the domain name, no need to support HTTPS. Only need a simple cloud function, you can easily realize wechat small program payment function. The core code is as follows:

Create a cloud development applet

I won’t go into details about how to create cloud development applets here. Do not know how to create cloud development small program students, you can go to Tencent cloud development public number menu [technical exchange – video tutorial] in the teaching video.

There are a few caveats to creating cloud development applets

1. Don’t forget to initialize the cloud development environment in app.js.

2. After creating the cloud function, be sure to upload it

Second, create a payment cloud function

1. Create the cloud function pay

3. Introduce three-party dependency tenpay

The purpose of introducing tripartite dependencies here is to create some parameters that we need to pay for. NPM has to install Node. I’m not going to explain how to install Node.

1. Right-click Pay and choose Open in Terminal

2. We use NPM to install this dependency.

Run NPM I tenpay on the command line

Once installed, our Pay cloud function will have an additional package.json file

At this point our Tenpay dependency is installed.

4. Write cloud function pay

The complete code is as follows

// Cloud development implementation payment const cloud = require('wx-server-sdk') cloud.init() //1, introduce three-party dependencies for payment const tenpay = require()'tenpay'); //2, set payment information const config = {appid:'Your little app Appid', 
  mchid: 'Your wechat merchant Number',
  partnerKey: 'wechat Payment Security Key', 
  notify_url: 'Pay callback url, you can fill in any url you want.', 
  spbill_create_ip: '127.0.0.1'}; exports.main = async(event, context) => { const wxContext = cloud.getWXContext()let{ orderid, money } = event; //3, initialize pay const API = tenpay.init(config);let result = await api.getPayParams({
    out_trade_no: orderid,
    body: 'Product Description', total_fee: money, // order amount (分), openID: wxcontext. openid});return result;
}
Copy the code

Be sure to replace appID, McHid, partnerKey with your own.

At this point we are ready to write the cloud function code to get the parameters required by the applet payment.

Don’t forget to upload the cloud function.

If the image below appears, the upload is successful

Write a simple page to submit the order and call the Pay cloud function.

This page is simple:

1. Write a random order number (the order number should be larger than 6 digits)

2. Fill in an order price casually (unit is minutes)

3. Click the button to call the Pay cloud function. Gets the parameters required for payment.

Here are some of the required parameters for an official payment API.

The following figure shows the parameters obtained by calling the Pay cloud function. Are they the same as those required in the above figure?

Wx. RequestPayment wx

Here is the official sample code:

Here is not to do specific explanation, the complete code to everyone posted out

// pages/pay/pay.js Page({// formSubmit:function(e) {
    let that = this;
    let formData = e.detail.value
    console.log(A Submit event occurred on the form with data:, formData)
    wx.cloud.callFunction({
      name: "pay",
      data: {
        orderid: "" + formData.orderid,
        money: formData.money
      },
      success(res) {
        console.log("Submission successful", res.result)
        that.pay(res.result)
      },
      fail(res) {
        console.log("Submission failed"Wx. RequestPayment ({timeStamp: paydata.timestamp, nonceStr: paydata.timestamp, nonceStr: paydata.timestamp, nonceStr: paydata.timestamp) Paydata. nonceStr, package: paydata. package, // Prepay_id =*** signType:'MD5', paySign: paydata. paySign, // sign success(res) {console.log("Payment successful", res)
      },
      fail(res) {
        console.log("Payment failure", res)
      },
      complete(res) {
        console.log("Payment completed", res)
      }
    })
  }
})
Copy the code

At this point, cloud development to realize the function of small program payment is completely realized.

Implementation effect

1. Set up the pay keyboard

2. Payment completed

3. Log, you can see the callback of different payment states

The figure above shows a successful payment callback. We can change the order payment status when the payment callback is successful.

The following is a callback for payment failure:

The following figure shows the status of payment completion:

Here we will easily realize the micro channel small program payment function, is not very simple ah.

Source code address:

Github.com/TencentClou…

If you have a technical story about using cloud to develop CloudBase, please feel free to leave a comment and contact us.