External H5 terminal uses Alipay pre-authorization

About how to use

It is necessary to cooperate with the Alipay applet to achieve pre-authorization. H5 uses the scheme to call up the applet in Alipay to complete the authorization.

important point

The orderStr obtained from the server on the H5 side needs to be encodeURIComponent twice, and then spliced ​​together as follows,Note: You must encodeURIComponent again in the scheme, otherwise the applet will onLoad Unable to receive parameters

Pass orderStr in the form of page parameters

H5 side processing code

let orderStr = res.data //从服务端获取的orderStr
if (orderStr) {
	orderStr = encodeURIComponent(orderStr)
	orderStr = encodeURIComponent(orderStr)
	let scheme =
		`alipays://platformapi/startapp?appId=20210xxxxxx&page=pages/index/index?orderStr=${orderStr}`
	let url = `https://ds.alipay.com/?scheme=${encodeURIComponent(scheme)}`
	//H5 唤起预授权
	window.location.href  = url
}

Alipay applet processing code

Page({
  onLoad(query) {
    // 页面加载
    this.apply(query)
  },
  //唤起预授权
  apply(query) {
    let orderStr = query.orderStr //获取传递过来的orderStr
    if (!orderStr) {
      my.showToast({
        type: "none",
        content: '订单参数获取失败，请重试'
      })
      return
    }
    my.tradePay({
      // 调用资金冻结接口（alipay.fund.auth.order.app.freeze），获取支付宝预授权参数
      orderStr: orderStr,
      success: (res) => {
        my.showToast({
          type: "none",
          content: res.memo
        })
      },
      fail: (res) => {
        my.showToast({
          type: "none",
          content: res
        })
      }
    });
  }
});

Query startup parameters are used to pass orderStr

H5 side processing code

let orderStr = res.data //从服务端获取的orderStr
if (orderStr) {
	orderStr = encodeURIComponent(orderStr)
	orderStr = encodeURIComponent(orderStr)
	let scheme =
		`alipays://platformapi/startapp?appId=20210xxxxxx&page=pages/index/index&query=orderStr=${orderStr}`
	let url = `https://ds.alipay.com/?scheme=${encodeURIComponent(scheme)}`
	//H5 唤起预授权
	window.location.href  = url
}

Alipay applet processing code

Page({
  data: {
    orderStr: ''
  },
  onLoad(query) {
    // 页面加载
    const options = my.getEnterOptionsSync();  //获取冷、热启动参数
    if (options.query && options.query.orderStr) {
      this.setData({
        orderStr: options.query.orderStr
      })
    }
    this.apply()
  },
  //唤起预授权
  apply() {
    let orderStr = this.data.orderStr
    if (!orderStr) {
      my.showToast({
        type: "none",
        content: '订单参数获取失败，请重试'
      })
      return
    }
    my.tradePay({
      // 调用资金冻结接口（alipay.fund.auth.order.app.freeze），获取支付宝预授权参数
      orderStr: orderStr,
      success: (res) => {
        my.showToast({
          type: "none",
          content: res.memo
        })
      },
      fail: (res) => {
        my.showToast({
          type: "none",
          content: res
        })
      }
    });
  }
});

Problem record

I myself passed the generated scheme to the webview on the next page for use. The entire url had parameters. At that time, the spliced ​​url was not encoded as URIComponent, so the parameters were lost when it was passed to the next page, so The passed parameter is a URL with parameters that needs to be processed by encodeURIComponent.

encodeURI() and encodeURIComponent() are both functions that encode URLs in Javascript.
The difference is:
encodeURI() focuses on encoding the entire URL, with special meaning symbols "/?: @ & = + $, # "No encoding
encodeURIComponent() encodes the components of the URL individually, so"; / ? : @ & = + $, #"Encoding can be performed here

The http path is encoded using encodeURI, but the parameters carried in the path are encoded using encodeURIComponent.

Refer to official documentation

The Android side tests whether the scheme can be used with Alipay official application
Alipay official applet pre-authorization development document
Alipay official document scheme splicing rules introduction