No third party licensors and public micro-channel pay H5 (front-end)

Due to business needs, to amounts paid by users through our public platform number directly into the user's own account, so it comes to third-party public authorization number;

As it involves a third party, so you need to create a third-party platform WeChat open platform;

Create a third-party platform: (application page link: https: //open.weixin.qq.com)

2, No. authorize public api address https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1453779503&token=&lang=zh_CN

Authorization There are two ways ::

Method 1: Authorized registration page scan code authorization

Second way: Click the link to mobile end fast authorization

This is about the way the authorization code swept away, the front aspect is relatively simple,

First: the interface through out the background to get pre-authorization code (pre_auth_code) pre-authorization code is necessary to achieve third-party platform, party authorized hosted

　　Pre-authorization code is needed to back off api micro-channel acquisition, the front end is only responsible for looking to get back on the line, where the background also need to return the callback URL, the next step needs

Second : get the pre-authorization, pre-authorization code directly by third parties and that is our own public appId No. appid parameters jump directly authorized URL:

Authorization at:

　　 https://mp.weixin.qq.com/cgi-bin/componentloginpage?component\_appid=xxxx&pre\_auth\_code=xxxxx&redirect\_uri=xxxx&auth\_type=xxx。

this.$api.getPreCode(param).then((res) => {
        if (this.$util.checkCode(this, res)) {
          this.preAuthCode = res.data.preAuthCode;
          this.redirectUri = res.data.redirectUri;
          this.componentAppId=res.data.componentAppId
       　　window.location.href = 'https://mp.weixin.qq.com/cgi-bin/componentloginpage?component_appid='+this.componentAppId+'&pre_auth_code='+this.preAuthCode+'&redirect_uri='+this.redirectUri+'&auth_type=1'
       }
       }).catch((err) => {
         this.$util.showCatchErr(this, err, "预授权码获取失败");
});

This address is the scan code address, it will automatically prompt or need authorization code after the sweep, the end of the authorization process.

Digression: If you want to pay the amount to the user's own account, users need business number, so it needs to provide business users to fill in the page number information; see the specific business needs

Due to business needs, after the authorization is completed, payment method to use to pay H5, H5 is the following payment-related content can be ignored. . .

First: Use H5 H5 pay need to pay to open a merchant number, you also need to fill in the payment domain name

Second: H5 pay

H5 refers to the merchant's mobile payment terminal outside the micro-letter web client display of goods or services, the user confirms the use of micro-channel payment, the merchant initiates this service call from the micro-channel client paid in the previous page.

The main scene for touch-screen version of the mobile browser requests a micro-channel pay. You can easily arouse the browser from the Ministry of micro-channel pay.

Request backstage unified under a single interface will return mweb_url url pay jump, then jump directly to the page to complete the payment on the line this url

$.ajax({
            type: 'POST',
            url: window.baseurl+"/property/user/weChatPay/order",
            data: param,//JSON.stringify(param)
            dataType : "json",
            async:false, 
            success: function (res) {
                if(res.msgCode==0){
                    var appId=res.data.appId;
                    var signType=res.data.signType;
                    var package=res.data.package;
                    var timestamp=res.data.timestamp;
                    var nonceStr=res.data.nonceStr;
                    var paySign=res.data.paySign;
                    console.log(res.data.mweb_url)
                    window.location.href=res.data.mweb_url//跳转微信H5支付页面
                }else{
                    alert(res.msg)
                }
            }, error: function (res) {
               
            }
        })

common problem

A callback page

Let's say you won through to the unified under a single interface to HTTPS = MWEB_URL: // wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096 

the address splicing is MWEB_URL = HTTPS: // WX .tenpay.com / cgi-bin / mmpayweb- bin / checkmweb? prepay_id = wx20161110163838f231619da20804912345 & package = 1037687096 & redirect_url = https% 3A% 2F% 2Fwww.wechatpay.com.cn

note:

1. urlencode need to be processed redirect_url

2. Because after setting redirect_url, rebound specified page operation may occur: 1, micro-channel pay after the middle of the page invoking micro-channel checkout counter more than 5 seconds 2, the user clicks "Cancel payment" or the payment is complete click "Finish" button. There is no guarantee when the page rebound, the payment process has ended, so redirect_url address of the business set does not automatically perform a single search operation, should allow users to click a single button to trigger the search operation. Bounce page showing the effect can refer to the figure

Will return to the normal flow of users pay to complete to initiate the payment page, you want to return to a specified page, the parameters can be spliced on redirect_url after MWEB_URL, to specify a callback page.

For example, you want the user to pay after the completion of the jump to https://www.wechatpay.com.cn, can be treated as follows:

No third party licensors and public micro-channel pay H5 (front-end)

Guess you like