10 lines of code to achieve a small program payment function! 丨 combat

We talked to the front by means of a small cloud development program to achieve micro-channel pay, but the operation somewhat cumbersome, and will often have problems, give us today to tell a simple, and by means of official payment api to achieve a small program payment function.

Portal:
With applet cloud applet developers implement payment function

Old rules, look at the effects of this section in FIG.

We achieve this by means of a small payment feature is completely cloud development program to achieve, do not build their own server, do not buy a domain name, the domain name without the record, do not support https. Requires only a simple function of the cloud, it can easily achieve the micro-channel payment applet functions.
These core code below:

First, create a small cloud development program

On how to create a small cloud development program, I will not do specific explanation. I do not know how to create a small cloud development programs students can go to look at the development within the public and so Tencent No. menu Technical exchanges - Video Tutorial] teaching video.

Create a small cloud development program there are several points to note

1. Be sure not to forget to initialize app.js in cloud development environment.

2. After you have created a cloud function, you must remember to upload

Second, create a cloud of payment function

1. Create a cloud function pay

Third, the introduction of the three parties rely tenpay

The purpose of introducing the three parties rely on us here, we need to create some of the parameters of the time of payment. We are dependent on the installation and use in npm npm must install the node, on how to install a node, do not make me explain, Baidu, online a lot.

1. The first right pay, select Open and in the terminal

2. We use npm install this dependency.

Npm i tenpay execute the command line

After installation is complete, our pay will be more of a function of cloud file package.json

Here we rely on the tenpay installed.

Fourth, write cloud function pay

The complete code is as follows

//云开发实现支付
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;
}

We must pay attention to appid, mchid, partnerKey into your own.

Here we get a small program code required to pay clouds function parameters on the preparation is complete.

Do not forget to upload the cloud function.

Under appear on behalf of Figure uploaded successfully

Fifth, write a simple page to submit orders, calling pay clouds function.

This page is very simple:

1. write their casual order number (the order number is greater than 6)

2. themselves easily fill an order price (the unit is minutes)

3.点击按钮,调用pay云函数。获取支付所需参数。

下图是官方支付api所需要的一些必须参数。

下图是我们调用pay云函数获取的参数,和上图所需要的是不是一样。

六、调用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日志,可以看出不同支付状态的回调

上图是支付成功的回调,我们可以在支付成功回调时,改变订单支付状态。

下图是支付失败的回调:

下图是支付完成的状态:

到这里我们就轻松的实现了微信小程序的支付功能了,是不是很简单啊。

源码地址:

https://github.com/TencentCloudBase/Good-practice-tutorial-recommended


如果你有关于使用云开发CloudBase相关的技术故事/技术实战经验想要跟大家分享,欢迎留言联系我们哦~比心!

Guess you like

Origin www.cnblogs.com/CloudBase/p/11357200.html