微信小程序开发入门教程（三）---小程序云开发支付功能

支付（shoukuan）功能真的很重要!由于我还没有商户号，以下代码未实际验证

1、服务端

进入云开发，新建云函数pay（应该也可以在开发者工具编写后上传）

编写后端代码index.js
这里用到第三方库wx-js-utils（https://github.com/lcxfs1991/wx-js-utils ）

const cloud = require('wx-server-sdk');

const {

  WXPay,

  WXPayUtil

} = require('wx-js-utils');

cloud.init();

const appId = 'wx****************';           // 小程序appid

const mchId = '152*******';                   // 商户号

const key = '****************************';   // 商户密钥

const timeout = ;                        // 超时时间

let wxpay = new WXPay({

  appId,

  mchId,

  key,

  timeout: ,

  signType: 'MD5',

  useSandbox: false       // 不使用沙箱环境

});

exports.main = async(event, context) => {

  const curTime = Date.now();

  const tradeNo = `${event.userInfo.openId.substr(-)}-${curTime}`; // 生成订单号

  const body = '测试订单';   // 订单商品名称

  const spbill_create_ip = '127.0.0.1';   // 发起支付的IP

  const notify_url = 'http://www.qq.com'; // 回调地址

  const total_fee = event.price * ;    // 支付金额，单位为分

  const time_stamp = '' + Math.ceil(Date.now() / );

  const out_trade_no = `${tradeNo}`;

  let orderParam = {

    body,

    spbill_create_ip,

    notify_url,

    out_trade_no,

    total_fee,

    openid: event.userInfo.openId,

    trade_type: 'JSAPI',

    timeStamp: time_stamp,

  };

  const {

    return_code,

    result_code,

    ...restData

  } = await wxpay.unifiedOrder(orderParam); // 统一下单

  if (return_code === 'SUCCESS' && result_code === 'SUCCESS') {

    const {

      prepay_id,

      nonce_str

    } = restData;

    const sign = WXPayUtil.generateSignature({

      appId,

      nonceStr: nonce_str,

      package: `prepay_id=${prepay_id}`,

      signType: 'MD5',

      timeStamp: time_stamp

    }, key); // 签名

    return {

      code: ,

      data: {

        out_trade_no,

        time_stamp,

        ...restData,

        sign

      }

    }

  }

  return {

    code: -

  }

};

2、小程序

app.js

App({

  onLaunch() {

    wx.cloud.init({

      traceUser: true,

    });

  }

});

index.wxml

<view class='container'>

  <input class='ipt' value='{{price}}' bindinput='onInput' type='digit' />

  <button class='btn-pay' bindtap='pay'>Pay</button>

</view>

index.wxss

.container {

  display: flex;

  flex-direction: column;

  width: 100vw;

  height: 100vh;

  justify-content: center;

  align-items: center;

}

.ipt {

  border-bottom: 1px solid #f1f2f3;

  text-align: center;

  font-size: 50rpx;

  font-weight: bold;

  width: 220rpx;

  color: #17233d;

}

.btn-pay {

  margin-top: 100rpx;

  padding: 14rpx 100rpx;

  line-height: .5em;

  font-size: 36rpx;

  background: #5cadff;

  color: #fff;

}

.btn-pay::after {

  border: ;

}

index.js

Page({

  data: {

    price: 0.01

  },

  onInput(event) {

    this.setData({ price: event.detail.value });

  },

  pay() {

    const price = parseFloat(this.data.price).toFixed();

    wx.showLoading({

      title: ''

    });

    wx.cloud.callFunction({

      name: 'pay',    // 调用pay函数

      data: { price }, // 支付金额

      success: (res) => {

        wx.hideLoading();

        const { result } = res;

        const { code, data } = result;

        if (code !== ) {

          wx.showModal({

            title: '提示',

            content: '支付失败',

            showCancel: false

          });

          return;

        }

        console.log(data);

        wx.requestPayment({

          timeStamp: data.time_stamp,

          nonceStr: data.nonce_str,

          package: `prepay_id=${data.prepay_id}`,

          signType: 'MD5',

          paySign: data.sign,

          success: () => {

            wx.showToast({title: '支付成功'});

          }

        });

      },

      fail: (res) => {

        wx.hideLoading();

        console.log('FAIL');

        console.log(res);

      }

    });

  }

});

最终效果:页面显示0.01元和pay按钮。

补充：参考https://www.jianshu.com/p/bd96741287a8和https://blog.csdn.net/gf771115/article/details/100917779

还可以使用https://github.com/befinal/node-tenpay

还有：https://developers.weixin.qq.com/community/develop/article/doc/0004c4a50a03107eaa79f03cc56c13

参考：

https://juejin.im/post/5c876108e51d45543d2836e4

https://cloud.tencent.com/edu/learning/course-100005-1276

关于微信小程序认证问题 https://blog.csdn.net/forthejoker/article/details/79654610

下载github项目的一个方法 https://blog.csdn.net/qq_35433926/article/details/89415895

支付官方文档 https://pay.weixin.qq.com/wiki/doc/api/index.html

https://www.jianshu.com/p/bd96741287a8

巴特西

微信小程序开发入门教程（三）---小程序云开发支付功能

最新文章

热门文章