I. Alipay H5 payment

  • Alipayh5Payment is super simple to operate, with the key front-end code as follows:
methods: {
  async doPayAlipay() {
    const res = await this.$apis.doPayAlipay({
      oid: res.data, // The transaction order number
      url: yourBackUrl // Successful callback address
    })

    if(res.code===1) {
      // To avoid user misoperation caused by time gaps, loading... Until the jump to the page provided by Alipay
      this.$toast.loading({
          mask: true.message: 'Loading... '
      });
      // Return a self-executing form code provided by Alipay
      // Here I insert this code into the page and trigger it manually
      const div = document.createElement('div');
      div.innerHTML = res.data.form;
      document.body.appendChild(div);
      document.forms[0].submit(); }}}Copy the code

Second, wechat Pay

  • The WeChatwapEnd payment can be divided into two kinds, one is wechat public account payment, the other is outside wechatH5To pay.

1. Payment by official account

Public account payment means that the user opens the H5 page of the merchant in wechat, and the merchant invokes the JSAPI interface provided by wechat Payment to complete the payment on the H5 page.

Official account payment developer documents:

Openid is the unique user id of a wechat user under the official account AppID (different AppID means different OpenID), which can be used to permanently mark a user and is also a required parameter of wechat official account payment. Web page authorization Obtain the user OpenID interface document.

  • Key code to initiate payment
methods: {
  weixinPay() {
    if (typeof WeixinJSBridge == "undefined") {
      if (document.addEventListener) {
        document.addEventListener("WeixinJSBridgeReady".this.onBridgeReady(data),false);
      } else if (document.attachEvent) {
        document.attachEvent("WeixinJSBridgeReady".this.onBridgeReady(data));
        document.attachEvent("onWeixinJSBridgeReady".this.onBridgeReady(data)); }}else {
      this.onBridgeReady(data); }},onBridgeReady(){
    WeixinJSBridge.invoke(
      "getBrandWCPayRequest",
      {
        appId: data.appid, // The public id is passed in by the merchant
        timeStamp: data.timestamp, // Timestamp, the number of seconds since 1970
        nonceStr: data.nonce_str, / / random string
        package: data.prepay_id, // Order details extension string
        signType: data.signType, // wechat signature:
        paySign: data.paySign, // Wechat signature
      },
      res= > {
        if(res.err_msg == "get_brand_wcpay_request:ok") {// ...
        }else{
          alert("Payment failed!"); }}); }}Copy the code

2. H5 payment outside wechat

H5 payment means that the merchant displays commodities or services on the mobile web page outside the wechat client. When the user confirms to use wechat Pay on the aforesaid page, the merchant initiates the service to call the wechat client for payment. It is mainly used for the scene of wechat payment request by mobile browser of touch screen version. Wechat pay can be easily invoked from an external browser.

Note: H5 payment is not recommended to be used in the APP. If you need to use wechat Pay in the APP, please answer APP Pay.

H5 payment development documentation

methods: {
  async doPaySubmit() {
    const res = await this.$apis.doWechatPay({ oid: ' '.trade_type: 'MWEB'})
    if(res.code===1) {window.location.replace(res.data.mweb_url+'&redirect_url='+encodeURIComponent(window.location.href+'&tip=yes'))}}}Copy the code

Note the pit:

  • 1, the need toredirect_urlforurlencodeTo deal with
  • 2, due to the Settingsredirect_urlAfter, the jump back to the specified page may occur when:
    • A. More than 5 seconds after the wechat cashier is activated on the middle page of wechat Pay
    • B. Users click “Cancel payment” or click “Finish” button after payment is completed. Therefore, there is no guarantee that when the page jumps back, the payment process has ended, so the merchant setredirect_urlThe address cannot perform a lookup automatically. The user should click the button to trigger the lookup.