在Taro项目中Ping++ 接入微信小程序支付

相关ping++支付文档:

https://help.pingxx.com/article/1011655/

源码的地址:

 https://github.com/PingPlusPlus/pingpp-js

一、在项目中引入ping++的sdk

可以使用npm 的安装方式

npm install pingpp-js

在页面的顶部引入

let pingpp = require('pingpp-js');

二、使用

1、需要获取到code

2、提交订单数据,成功生成预支付订单后,返回chrage参数集合

chrage 的参数集合字段说明文档:https://www.pingxx.com/api/Charges%20%E6%94%AF%E4%BB%98%E6%A6%82%E8%BF%B0.html

3、把charge传给 pingpp.createPayment()

示例代码:

    // 提交订单需要的一些参数
    const sendValues = { ...toPostorderData};
    // sendValues.shopCarIds = JSON.stringify(shopCarIds); // 购物车id  
    sendValues.personAddressId = selectAddress.personAddressId; //用户地址id
    sendValues.couponId = couponData.couponId || '';  //优惠券id  couponData.couponId
    sendValues.personLeaveMsg = personLeaveMsg || ''; // 订单备注
    sendValues.payType = payType; // 支付类型(wx_lite:微信支付,zfb:支付宝   现在仅用微信
    sendValues.personPhysicistId = JSON.stringify(pickselectgather) || [];//量体数据  
    sendValues.isUseBalanceStr = 0; //是否使用余额(0否,1是)
    sendValues.cardBalanceId = 0; //购买卡券表id, 需要跟UI 是否有选卡券
    

    // 获取code
    Taro.login({
      success: function(res) {
        if (res.code) {
          console.warn('code', res.code)
        } else {
          console.log('获取用户登录态失败', res.errMsg);
        }
      }
    }).then(res => {
      console.warn('then code', res.code)
      // 获取返回的code 塞进将要生成预支付订单的接口
      sendValues.wxCode = res.code;
      console.warn('sendValues', sendValues)
      this.props.dispatch({
        type: 'shopCart/fetchOrderImmediately', 
        payload: {
          ...sendValues
        }        
      }).then((res) => {
        console.warn('下单返回的chrage 数据res', res);
        const { charge } = res.resultData;
        // 把chrage参数直接塞进函数
        pingpp.createPayment(charge, function(result, err) {
          if (result=="success") {
            console.warn("success",result);
            // Taro.showModal({
            //   title: '调用ping++支付成功', 这里做支付成功后的操作
            // })
          } else {
            console.warn(result+" "+err.msg+" "+err.extra);
            // Taro.showModal({
            //   title: '调用ping++支付失败', 这里做支付失败后的操作
            // })
          }
        })
      }

三、成功接入ping++支付的效果图(扫描即可验证支付)

在Taro项目中Ping++ 接入微信小程序支付_第1张图片

 

你可能感兴趣的:(Taro,前端,实例展示)