• 小程序支付系列


     

    小程序支付,涉及一些知识。

    在微信提供的接口文档中提供了一个微信支付接口,应该是直接调用这个接口就可以发起微信支付

    文档路径:https://developers.weixin.qq.com/miniprogram/dev/api/api-pay.html#wxrequestpaymentobject

     

     但是,当开始信心满满的去看所需参数时,懵逼了,这些参数是什么

    在这些参数中最难理解和获取的就是这两个了,仔细研究后发现,package这个参数的获取要调用微信提供的另一个接口,统一下单接口。原来在微信中支付需要先进行一下预下单。这里的时间戳使用的是秒值,不是毫秒值

    (统一下单接口   这个接口就需要后台通过http请求来调了)

    统一下单接口 请求参数

    而在这些参数中,有两个参数很眼熟,在第一步发起微信请求时也有这两个参数,后发现这里的随机字符串就是调起支付时用到的随机字符串,而且是必须一致,那么签名呢,要是也认为一样就完全调沟里了,这里的签名我称为一次签名,因为支付的时候要进行第二次签名。

    把这些必填的参数都准备好

    很重要的是你要首先有个店铺,就有商户号了

    订单号必须唯一哦,通知地址就是当支付成功后微信会回调这个地址,在这里你可以做一些事,比如修改订单状态什么的。

    然后就是签名生成,这个很重要:把需要的参数都放到一个map中,然后对这些参数进行排序,然后把商品key拼接到后面进行MD5加密就生成签名了,我还是建议仔细看看签名生成算法,不要想太复杂,就是排序,拼接,加密三步完成。

    最后就是准备参数传输了,这里的参数传输是以xml的方式传输,下面就是传输的数据,其实就是一个大的字符串,

    你可以这样

    我就意思一下了,大家懂就行,其实就是一个字符串,完全可以通过遍历参数map来自己拼接的。

    然后就是把这个大字符串传过去,以上没问题的话就会返回一个字符串的xml,格式类型咱们拼接的参数。

     

    从中取出我们需要的东西,最重要的应该就是这个,预下单id,这就是之前咱们需要的package

    使用时是这样的:package='prepay_id=201411109120471241k1241240124bk1k24'

    然后就是二次签名了,签名生成顺序和第一次是一样的,主要要确定需要哪些参数。

     

     ----------------------------------------------------------------------------------------

    html部分

    <view class='container'>
      <view class="money">
        <text class="money-font">{{money}}</text>
        <text class="title">支付金额</text>
      </view>
      <view class="product">
        <view class="item">
          <view class="item-left">产品名称</view>
          <view class="item-right">{{productName}}</view>
        </view>
        <view class="item">
          <view class="item-left">订单号</view>
          <view class="item-right">{{order}}</view>
        </view>
      </view>
      <view class="footer">
        <view class="pay-number">
          <view class="pay-title">付款</view>
          <view class="pay-money">¥{{money}}</view>
        </view>
        <view class="btn-area">
          <view class="submit" bindtap="sendPayment" hover-class='btn-hover'>去支付</view>
        </view>
      </view>
    </view>
    

      

    js部分

      /**
       * 页面的初始数据
       */
      data: {
        money: '',
        productName: '',
        order: ''
      },
      // 调起微信原生支付
      openPayment: function(obj) {
        let that = this;
        let prepay_id = obj.packageStr.split('=')[1];
        wx.requestPayment({
          'timeStamp': obj.timeStamp,
          'nonceStr': obj.nonceStr,
          'package': obj.packageStr,
          'signType': obj.signType || 'MD5',
          'paySign': obj.paySign,
          'success': function(res) {
            console.log(res)
          },
          'fail': function(res) {
            console.log(res)
          },
          'complete': function(res) {
            if (res.errMsg == 'requestPayment:ok') {
              wx.redirectTo({
                url: '../paymentResult/paymentResult?code=1&prepay_id=' + prepay_id
              });
            } else {
              wx.redirectTo({
                url: '../paymentResult/paymentResult?code=0'
              });
            }
          }
        })
      },
      // 点击支付按钮,
      sendPayment: function() {
        let that = this;
        let openid = wx.getStorageSync('openid');
        let linkParam = this.data.linkParam;
        let a2realName = true; // a2实名开关,默认打开的
        if (linkParam.miniSource == 'A2') {
        
          this.wechartpay()
        }
      },
      // 调用后台支付接口,后台会把信息传到微信、微信传到资金。再依次返回
      wechartpay: function() {
        let that = this;
        let openid = wx.getStorageSync('openid');
        let linkParam = this.data.linkParam;
        let platNo = linkParam.platNo;
        if (platNo) {
          platNo = TrimAll(platNo);
          platNo = linkParam.platNo.substring(0, 2);
        }
        ajax({
          url: api.wechartpay,
          data: {
            policyInfo: linkParam.branchCode == '5020100' ? JSON.stringify( // 深圳地区车险自然人新保传
              linkParam.policyInfo //商业险投保单号
            ) : null,
            systemInfo: '', //签名来源时间戳等信息
            type: null, //支付方式
            branchCode: linkParam.branchCode || '', //
            checkCode: '-', //校验码
            payApplyNo: linkParam.payApplyNo || '', //支付申请号
            orderAmount: linkParam.orderAmount || '', //订单金额
            productNum: linkParam.productNum || '', //订单数量
            //资金平台用户名 A2用户名:PWF_017 电销三期:PTW_008 码上保:PMS_010 s=pwf (全流程 A2用户名),  s=ptw(支付号 电销三期)
            capitalName: linkParam.s == 'pwf' ? 'PWF_017' : linkParam.s == 'ptw' ? 'PTW_008' : 'PMS_010',
            // capitalName:'PWF_017',
            productCode: linkParam.productCode || '', //
            productName: linkParam.productName || '', //
            successUrl: null, //
            failUrl: null, //
            isUserPid: '0', //(不为空传1代表需要通过微信校验身份证姓名信息,则userPid和userName必传,否则不校验。通过产险微信号支付必传,否则无法支付成功。)
            userPid: linkParam.userPid || '0', //支付人身份证
            userName: linkParam.userName || '',
            friendPay: '1', //0不支持代付
            showPolicy: '0', //0不显示
            openid: openid || '', // openid oIVq0ji6oXEn0hqBnlTpydxf4PX0
            coverageInfo: JSON.stringify([]), //  子险(非车信息)
            vehicle: linkParam.miniSource == 'A2' ? true : false, // 车险为true,非车为false;
            isYZ: platNo == '粤Z' ? '1' : '0', // 是否是粤Z车牌
            attr1: linkParam.branchCode == '5020100' ? '1' : null // 深圳地区车险自然人新保传1 其它情况不传
          }
        }).then(function(re) {
          console.log(re)
          if (re.code == 1 && re.data.data) {
        //  re.data.data  需要支付的信息
            that.openPayment(re.data.data)
          } else {
        //失败页面 code = 0
            wx.redirectTo({
              url: `../paymentResult/paymentResult?code=0&msg=${re.data.msg}`
            });
          }
        })
      },        
    

      wxss 样式

    /* pages/payment/payment.wxss */
    page {
      background-color: #eee;
    }
    .money {
      display: flex;
      flex-direction: column;
       100%;
      background-color: #ffffff;
      align-items: center;
      border-top: 1rpx solid #cccccc;
      padding: 80rpx 0;
      box-sizing: border-box;
    }
    .money-font {
      font-size: 58rpx;
    }
    .title {
      font-size: 32rpx;
      color:#555555;
    }
    .product {
       100%;
      background-color: #ffffff;
    }
    .item {
      border-top: 1rpx solid #cccccc;
      padding: 26rpx 20rpx;
      box-sizing: border-box;
      font-size: 32rpx;
      display: flex;
    }
    .item-left {
       30%;
    }
    .footer {
       100%;
      position: fixed;
      bottom: 0;
      left:0;
      display: flex;
      background-color: #ffffff;
      height:100rpx;
      align-items: center;
      justify-content: space-between;
    }
    .pay-number {
      display: flex;
      flex: 1;
    }
    .pay-title {
      padding: 0 26rpx;
      box-sizing: border-box;
    }
    .btn-area {
      height:100rpx;
      flex:1;
      text-align: center;
    }
    .pay-money {
      color:darkorange;
    }
    .btn-area .submit {
      height:100rpx;
      line-height: 100rpx;
      color: #fff;
      font-size: 34rpx;
      background: -webkit-linear-gradient(left, #0094d5, #005bac);
      background: linear-gradient(to right, #0094d5, #005bac);
    }
    
    .btn-hover {
      opacity: 0.6;
    }
    

      

    爱生活、爱编程!
  • 相关阅读:
    买书求如何获得折扣使价格最低
    团队开发NABC特点
    《梦断代码》读后感3
    结对开发5
    找水王问题续
    对搜狗输入法的评价
    团队项目之典型用户
    找水王问题
    电梯调度练习
    团队项目用户需求调研报告
  • 原文地址:https://www.cnblogs.com/liliuyu/p/11530360.html
Copyright © 2020-2023  润新知