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

支付(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 = 10000;                        // 超时时间

let wxpay = new WXPay({
  appId,
  mchId,
  key,
  timeout: 10000,
  signType: MD5,
  useSandbox: false       // 不使用沙箱环境
});

exports.main = async(event, context) => {
  const curTime = Date.now();
  const tradeNo = `${event.userInfo.openId.substr(-5)}-${curTime}`; // 生成订单号
  const body = 测试订单;   // 订单商品名称
  const spbill_create_ip = 127.0.0.1;   // 发起支付的IP
  const notify_url = http://www.qq.com; // 回调地址
  const total_fee = event.price * 100;    // 支付金额,单位为分
  const time_stamp = ‘‘ + Math.ceil(Date.now() / 1000);
  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: 0,
      data: {
        out_trade_no,
        time_stamp,
        ...restData,
        sign
      }
    }
  }
  return {
    code: -1
  }
};

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: 1.5em;
  font-size: 36rpx;
  background: #5cadff;
  color: #fff;
}

.btn-pay::after {
  border: 0;
}

index.js

Page({
  data: {
    price: 0.01
  },

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

  pay() {
    const price = parseFloat(this.data.price).toFixed(2);
    wx.showLoading({
      title: ‘‘
    });
    wx.cloud.callFunction({
      name: pay,    // 调用pay函数
      data: { price }, // 支付金额
      success: (res) => {
        wx.hideLoading();
        const { result } = res;
        const { code, data } = result;
        if (code !== 0) {
          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://juejin.im/post/5c876108e51d45543d2836e4

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

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

上一篇:微信小程序textarea层级过高(盖住其他元素)


下一篇:h5微信分享