制作页面

简单的我们只放一个支付按钮做测试,实际开发中应该是商品页面,我们可以把商品标题,数量,价格等作为参数传递给支付函数

微信小程序 使用tesseract 微信小程序 使用云闪付_微信

 支付函数

编写支付处理函数,函数调用云函数ohmypayment进行支付操作,成功接收requestPayment所需要的参数,进行支付,完成后在success回调里完成订单更新操作

微信小程序 使用tesseract 微信小程序 使用云闪付_大数据_02

 云函数

添加ohmypayment云函数,终端打开npm i tenpay安装依赖

微信小程序 使用tesseract 微信小程序 使用云闪付_大数据_03

微信小程序 使用tesseract 微信小程序 使用云闪付_微信_04

这里是详细的使用教程

 https://www.npmjs.com/package/tenpay

const tenpay = require('tenpay');
const config = {
  appid: '公众号ID',
  mchid: '微信商户号',
  partnerKey: '微信支付安全密钥',
  pfx: require('fs').readFileSync('证书文件路径'),
  notify_url: '支付回调网址',
  spbill_create_ip: 'IP地址'
};
// 方式一
const api = new tenpay(config);
// 方式二
const api = tenpay.init(config);
 
// 调试模式(传入第二个参数为true, 可在控制台输出数据)
const api = new tenpay(config, true);
 
// 沙盒模式(用于微信支付验收)
const sandboxAPI = await tenpay.sandbox(config);

appid mchid partnerKey这三项是必填项,具体内容在微信商户里获取

getPayParams: 获取微信JSSDK支付参数(自动下单, 兼容小程序)

let result = await api.getPayParams({
  out_trade_no: '商户内部订单号',
  body: '商品简单描述',
  total_fee: '订单金额(分)',
  openid: '付款用户的openid'
});

引入tenpay

微信小程序 使用tesseract 微信小程序 使用云闪付_微信_05

 具体去函数代码

微信小程序 使用tesseract 微信小程序 使用云闪付_微信_06

 返回结果回传支付函数,通过requestpayment函数发起支付,支付完成success回调更新订单,至此微信小程序支付功能完成。开发中商品body,out_trade_no,total_fee可以根据商品详情通过event传入!

具体改造代码:

//此处可以是点击事件
  test: function (e) {
    var that = this;
    var outTradeNo = "";  //订单号
    var totalfee = 1;  // 开发阶段先设置交易金额为0.01元
    //生成订单号
    outTradeNo = Math.floor((Math.random() * 1000) + 1) + "1371" + new Date().getTime(); 
    that.setData({
      outTradeNo: outTradeNo
    })
    
    //准备支付(先获取必要参数)
    wx.cloud.callFunction({
      name: 'pay',   //调用微信得pay云函数
      data: {
        goodName: "天山雪莲",   // 商品名称 或 商品描述
        totalFee: totalfee,                   // 需要支付的金额
        outTradeNoTo: outTradeNo             // 生成的订单号
      },
      success: res => {
        console.log("获取字符参数成功", res);   // 此处是通过pay微信云函数,有微信给我们生成支付前的必要参数
        const payment = res.result.payment    // 微信会返回支付需要的必备数据
        wx.hideLoading()
 
        //调起支付(获取必要参数后,开始真实调用微信支付窗口)
        wx.requestPayment({
          ...payment,
          success(res) {   //如果支付成功了,进入success函数回调(成功后具体操作看实际业务需求)
            console.log('支付成功', res)
            wx.showLoading({
              title: "付款成功"
            })
            setTimeout(function () {
              wx.hideLoading()
              that.upload(e);  //将用户购买的数据 交给 后台
            }, 700)
 
          },
          fail(res) {
            console.error('支付失败', res)
            wx.showLoading({
              title: "支付失败"
            })
            setTimeout(function () {
              wx.hideLoading()
            }, 1600)
          }
        })
 
      },
      fail(res) {
        console.log("获取支付参数失败", res);
      }
    })
  },