Skip to content

Latest commit

 

History

History
141 lines (116 loc) · 4.88 KB

微信小程序开发-微信支付.md

File metadata and controls

141 lines (116 loc) · 4.88 KB

微信小程序开发-微信支付

微信小程序支付开发步骤和H5支付非常类似。

我先说说在开发之前的准备工作吧，因为这块也很重要的。

  1. 首先，如果没有微信支付商户号的话，需要去申请一个微信支付商户平台账号，需要根据你要申请账号类型准备相应的材料。
  2. 提交材料审核，大约1-2工作日，材料通过之后，就是在线签署协议
  3. 通过之后，在商户平台中绑定你的小程序appid

做完以上这些，就可以开始开发了。

开发步骤如下：

  1. 统一下单 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1

    应用场景

    商户在小程序中先调用该接口在微信支付服务后台生成预支付交易单，返回正确的预支付交易后调起支付。这一步的目地就是获取prepay_id,它是预支付交易回话标识。将prepay_id传给前台，前台调用js-sdk。

    接口链接

    URL地址：https://api.mch.weixin.qq.com/pay/unifiedorder

​ 是否需要证书

​ 否

有一点还是要说一下，1、请求参数中的spbill_create_ip终端IP ，可以写你服务器的ip地址。2、可以使用xml2js把xml解析出来

		let body = productItem.title || '启德国际教育规划院出品'; //商品描述
    let url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
    let nonce_str = getRanId(32);
    let out_trade_no = "" + new Date().getTime() + Math.floor(Math.random() * 10);
    let client_ip = "118.190.153.113";
    let notify_url = 'https://wordcamp.ibt.tel/index';
    let trade_type = 'JSAPI';
    let openid = await getOpenId(ctx);
    let stringA = `appid=${MiniProgram.appId}&body=${body}&mch_id=${mch_id}&nonce_str=${nonce_str}&notify_url=${notify_url}&openid=${openid}&out_trade_no=${out_trade_no}&spbill_create_ip=${client_ip}&total_fee=${total_fee}&trade_type=${trade_type}`;
    let stringSighTemp = stringA + "&key=你的商户平台的key";
    let sign = md5(stringSighTemp).toUpperCase();

    let xml = `<xml>
    <appid>${MiniProgram.appId}</appid>
    <body>${body}</body>
    <mch_id>${mch_id}</mch_id>
    <nonce_str>${nonce_str}</nonce_str>
    <notify_url>${notify_url}</notify_url>
    <openid>${openid}</openid>
    <out_trade_no>${out_trade_no}</out_trade_no>
    <spbill_create_ip>${client_ip}</spbill_create_ip>
    <total_fee>${total_fee}</total_fee>
    <trade_type>${trade_type}</trade_type>
    <sign>${sign}</sign>
  </xml>`;
    console.log(xml);
    let res = await axios({
        method: 'post',
        url: url,
        data: xml,
        responseType: 'text/xml',
        headers: {
            'Content-Type': 'text/xml'
        },
        body: {
            'content-type': 'text/xml'
        }
    });
    let parseObj = await xml2js.parseStringPromise(res.data);
    ctx.body = parseObj

2.小程序调起支付api https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5

这一步中会用到上一步中返回的数据，prepay_id

		let appid = res.data.xml.appid[0];
    let prepay_id = res.data.xml.prepay_id[0];
    let nonce_str = res.data.xml.nonce_str[0];
    let stringA = "appId=" + appid + "&nonceStr=" + nonce_str + "&package=prepay_id=" + prepay_id + "&signType=MD5&timeStamp=" + timeStamp;
    var stringSignTemp = stringA + "&key=你的商户平台的key";
    let paySign = md5(stringSignTemp).toUpperCase();

    let that = this;

    wx.requestPayment({
      timeStamp: timeStamp,
      nonceStr: nonce_str,
      package: `prepay_id=${prepay_id}`,
      signType: 'MD5',
      paySign: paySign,
      success(res) {
        console.log(res, '用户支付成功');
        myrequest.post(addProductOrder, {
          productId: productId,
          actualMoney: that.state.productDetail.price
        }).then(res => {
          console.log(res, 77);
          if (res.data.code === 200) {
            that.setState({
              toastStatus: "success",
              toastText: "下单成功",
              toastOpen: true
            }, () => {
              setTimeout(() => {
                wx.navigateTo({
                  url: `../orderData/orderData?productId=${that.state.productDetail.id}&type=product`
                })
              }, 1500)
            })
          } else {
            that.setState({
              toastStatus: "error",
              toastText: "下单失败",
              toastOpen: true
            })
          }
        })
      },
      fail(res) {
        console.log(res, '用户取消支付');
        that.setState({
          toastStatus: "error",
          toastText: "您已取消支付",
          toastOpen: true
        });
      },
      complete(res) {
        console.log(res, 'complete')
      }
    })
  }

小程序微信支付要比H5支付友好很多，即使是在开发阶段，开发者也是可以用自己的手机扫码进行支付来调试，不用设置任何的代理，非常棒。