WeChat applet embeds H5 page to complete the closed loop of WeChat payment

foreword

This article introduces how to embed H5 in the applet and complete the whole process closed loop of WeChat payment. We know that WeChat H5 payment is made by generating a specific payment link and jumping to this link to complete the payment operation. However, in the WeChat applet, there is a whitelist restriction on the embedded page domain name. If the payment link is from a third party, it cannot be whitelisted.

At this time, we have to change our thinking, how to solve it? Let's look down.

Implementation process

applet entry

Create a new page in the WeChat applet and use the web-view component as the entry for the embedded H5. Since the appId and openId information are required for subsequent payments, the URL needs to be processed with parameters.

 // page.wxml
<web-view src="{{url}}"></web-view>

url processing logic:

 Page({
    data: {
    url: ''
  },
  onLoad: function (options) {
    wx.showLoading()
    wx.login({
      success: res => {
        const code = res.code
        api.getUserOpenId({
          code
        }, data => {
          const openId = data.bean
          const params = {
            wxAppletId: 'your appId',
            wxAppletOpenId: openId,
            ...options // 小程序启动路径的参数
          }
          this.setData({
            url: this.stringifyUrlArgs('your h5 url', params)
          })
          wx.hideLoading()
        })
      }
    })
  },
  stringifyUrlArgs(url, params) => {
    url += (/\?/).test(url) ? '&' : '?'
    url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
    return url
  }
})

When the page is onload, call the API wx.login to get the code, pass it to the backend in exchange for the user's openId , and then splicing the appId, openId, and startup path parameters to the back of your H5 url. This url can be a short chain, which is convenient for subsequent modifications without resubmitting the applet code for review and shortening the release time. Just need to modify the H5 link corresponding to the short chain.

H5 page handling

When we process the url at the applet entry, we will access the H5 link through the web-view component. At this time, the link carries the necessary parameters for payment. We mentioned above that if the H5 page still calls to generate the H5 payment link at this time If the method is used, there will be page whitelist restrictions, resulting in the inaccessibility of the third-party payment link page.

At this time, we can bypass this point. It turns out to be inside the applet. Can we use the applet to pay ? Of course the answer is yes!

Processing process:

The H5 page requests the back-end payment interface to obtain the necessary parameters for WeChat applet payment. At this time, both appId and openId are necessary, and other information is determined according to specific needs.

 // 微信小程序支付参数
interface appletPayParams {
    timeStamp: 'string', // 时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即当前的时间
    nonceStr: 'string', // 随机字符串，长度为32个字符以下
    package: 'string', // 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***
    signType?: 'string', // 签名算法，应与后台下单时的值一致
    paySign: 'string' // 签名，具体见微信支付文档
}

Since H5 is embedded in the web-view of the applet, when the parameters required for payment are successfully obtained from the backend, it is necessary to jump to the internal applet through the web-view to jump to the corresponding applet payment page To perform the payment operation, at this time, use wx.miniProgram.redirectTo to process, and then splicing the obtained payment parameter encodeURIComponent to the link. Note that the url is a relative path, as follows:

 wx.miniProgram.redirectTo({ url: `../insure-pay/insure-pay?payData=${encodeURIComponent(JSON.stringify(bean.applet))}` })

Mini Program Payment Page

Create a new payment page. When jumping from the embedded H5 page of the web-view to the payment page, the logic processing of the payment is as follows:

 Page({
  onLoad: function (options) {
    const payData = decodeURIComponent(options.payData) // 支付参数
    let pageSuccessUrl = '../pay-success/pay-success' // 成功页
    let pageFailUrl = './insure-repay/insure-repay' // 失败页，重新支付
    wx.requestPayment({
      ...JSON.parse(payData),
      success(res) {
        wx.redirectTo({
          url: pageSuccessUrl,
        })
      },
      fail(err) {
        console.log(err)
        wx.redirectTo({
          url: `${pageFailUrl}?payData=${options.payData}`,
        })
      }
    })
  }
})

Entering the payment page, the payment will be invoked through wx.requestPayment , and the parameter decodeURIComponent on the link will be taken out and passed into the API, and the success and failure can be monitored through the callback functions success and fail, and jump to different processing pages.

Summarize

The general process can be summarized as follows:

• Create an entry page in the WeChat applet, embed H5 through web-view, obtain the user's openId and appId when the page is onload, and carry it to the H5 link
• Obtain the appId and openId carried by the link in H5, request the backend to obtain the parameters required for the mini-program payment, and redirect from the web-view to the mini-program payment page through wx.miniProgram.redirectTo.
• Obtain the payment parameters carried on the link on the applet payment page, evoke payment through wx.requestPaymen, and handle the logic of success and failure.