Quick app access wechat H5 webpage payment

The phenomenon of description

Wechat Pay supports two access payment methods: APP payment access and web payment access.

Huawei mobile phones do not support app payment at present. Do not access app payment if your quick application is only promoted in Huawei. The following only describes the H5 webpage payment method.

Problem analysis

[Note] Starting from version 1040, web page payment will support setting referer mode, which no longer needs to realize the middle page, but the original way to realize the middle page jump will continue to support. To set the referer mode, set referer in the Pay interface, and configure Mweb_URL in the Extra parameter of the Pay interface. Referer is a domain name configured in the background of wechat Pay. Starting from version 1040, if the parameter is not empty when called by wechat web page, the wechat client will be pulled up by setting the referer.Copy the code

If you have not connected wechat payment capability to the H5 website before, you are advised to check the official documents of wechat.

The access to wechat H5 payment in Kuaiapp is consistent with the introduction in wechat documents. Kuaiapp only provides a Webview running H5 web pages, and uses the ability of H5 page to pull up wechat payment to provide developers with wechat payment interface.

Steps for kuaiapp to access wechat H5 payment:

1.Apply for a new registration on the wechat open platformH5 * * * * website

Open.weixin.qq.com/cgi-bin/fra…

**2.** Completes the connection of the payment server

The access of the server is completed according to the official document of wechat. What the server needs to do is to receive the payment request from the client, generate an order, and then send the order to the server of wechat. Wechat will return an Mweb_URL, and the server needs to return the Mweb_URL to the client.

**3.** Initiate wechat payment (choose one of the following two methods, the first method is recommended)

(1Middle page implementation is not requiredrefererWay)

Sample code:

webPay: function () { console.info('wxpay call function webPay') pay.pay({ prepayid: 'wx09113246667953cfb8d067ad1892777375', // your order prepayid,eg: wx20170101abcdef1234567890 referer: 'https://www.huawei.cn', //your host name configured in wechat extra: { mweb_url: 'https%3A%2F%2Fwx.tenpay.com%2Fcgi-bin%2Fmmpayweb-bin%2Fcheckmweb%3Fprepay_id%3Dwx09113246667953cfb8d067ad1892777375%26p ackage%3D299247950%26redirect_url%3Dhttps%3A%2F%2Fm.vip.com%2Fuser-order-detail-list-0.html', prepayid: 'wx09113246667953cfb8d067ad1892777375' }, fail: function (data, code) { console.log('WX PAY ' + pay.getType() + ' failed, code = ' + code); prompt.showToast({ message: 'WX PAY ' + pay.getType() + ' failed, code = ' + code }) }, cancel: function (data) { console.log('WX PAY ' + pay.getType() + ' cancelled by user'); prompt.showToast({ message: 'WX PAY ' + pay.getType() + ' cancelled by user' }) }, success: function (data) { console.log('WX PAY ' + pay.getType() + ' success'); prompt.showToast({ message: 'WX PAY ' + pay.getType() + ' success' }) } }) }Copy the code

(2) Complete an intermediate jump page

The middle page needs to be resolved to the MWeb_URL from the page’s GET parameter when it is loaded, and then automatically redirect to that URL, without needing anything else or a UI.

About this middle page:

(1) Why is this middle page needed?

The way to pull up the payment interface of wechat H5 payment is to jump to mweb_URL, but wechat will do anti-theft chain check through ref, and the jump action needs to be completed in the developer’s page

(2) When will the middle page be loaded and run?

After calling wechat Pay’s Pay interface, the platform will automatically load and run the page

(3) What parameters do I get when LOADING and running the middle page?

All parameters passed in when calling wechat Pay’s Pay interface will be passed to this page as GET parameters

Sample code:

Wxpay. Pay ({/ / WeChat web payment prepayId prepayId: 'your order prepayId, eg: wx20170101abcdef1234567890', extra: {// Custom parameters passed to the payment page, set as needed, are concatenated by urlEncode at the end of the configured URL mweb_URL: 'https://wx.tenpay.com/cgi-bin/mmpayweb-bin', customeKey1: 'customeValue1', customeKey2: 'customeValue2' }, fail: function(data, code) { console.log("WX H5 PAY handling fail, code=" + code); }, cancel: function(data) { console.log("WX H5 PAY handling cancel"); }, success: function(data) {// in H5 mode, successful payment callback only means that the order has been submitted to wechat, does not mean that the payment has successfully completed console.log("WX H5 PAY handling success"); }})Copy the code

**4.** Configure the middle page address in the quick application

When declaring wxpay in manifest.json, fill it in. Refer to the URL field declared by the interface in the official app documentation.

FAQ: 1. Can I specify wechat H5 **** for payment? No, H5 payment is the fallback scheme of App payment. If App payment can be made, payment will not fallback to H5. The exact method of payment that should be used depends on the return value of getType.

2.appPayment, received2001**** Error. What can I do?

2001 Error is wechat rejected payment request, possible reasons:

(1) The signature configuration in wechat background or manifest.json is incorrect

(2) The sign field in the order information is incorrectly generated

(3) The background review process of Android App has not passed

3.WeChatH5 **** payment, did not pull up the wechat payment interface, what is the reason?

Check whether the logic of automatically moving the middle page to Mweb_URL takes effect. If not, modify the logic of the middle page. In addition, because the middle page does not show UI logic, only jump, so in addition to JS execution permission, other permissions are not granted, including common domStorage permission.

4.We already had one online beforeandroid appAccess wechat payment, you can directly put thisIs the package name and signature configuration for app**** used in fast apps?

No, if configured this way, kuaiapp and Android App will conflict when initiating wechat payment at the same time.

Sample configuration of wechat payment in manifest.json:

{ "name": "service.wxpay", "params": { "package": "com.your.package.name", "sign": "MIIDDTCCAfWgAwIBAgIEfiu92jANBgkqhkiG9w0BAQsFADA3MQswCQYDVQQGEwJVUzEQMA4GA1UEChMHQW5kcm9pZDEWMBQGA1UEAxMNQW5kcm9pZCBEZWJ 1ZzAeFw0xNjA0MTMwNTUyMDhaFw00NjA0MDYwNTUyMDhaMDcxCzAJBgNVBAYTAlVTMRAwDgYDVQQKEwdBbmRyb2lkMRYwFAYDVQQDEw1BbmRyb2lkIERlYnV nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAz/dFKLrU3NmabX/byI0vL5ctZkg64Yhas5dsvl6bZZO/FWrgR+ZWiCcVFLQt/CpzLj3fMpIBoUi EuqPVRJoZdRn4gML1oIfj1meM9X9HSQHXzXr0NkOZhOzrlGvuWuy0//m3I18I8V9HXka4xiT9xGBiiMTWbP90vj7fTU+B3Q0UQxbMibdZfap9gCn2QKq7Y8k 73n9wLsbmznlHiBeL2kJAcVL+3EtEle1PZaN90w7YGjaKijuXwv8MS0guvzy63t2rqUjEL41wlBz+/DnzfdolAD6toN5aynuFan51pUqrY5CD9CQIbiTeJXg jsz8vaZotSj+61ISqy2sXrpySAwIDAQABoyEwHzAdBgNVHQ4EFgQUhtto5p0PfrnZlj12MpIF6gzYawEwDQYJKoZIhvcNAQELBQADggEBAJcNfFIJCWh9YIF zM7+eg4P9pNME+Q9Oug+NVA+g6+Vuhi2eFMBe29GnSr//EMpnluXhmfNy40whv9uUKdz4ekejDVyHucs8AvJI2cI5WhoenHO2jqw5IpsxIBqyca6zpXpElU3 5NZnqNoD9Rs5AZrEVxCB3AzhWviGe5QmxXqRMAVOju3X1B+Nv3dVvou9y64UI9mK3Z4Sz0gUNcYsyrSU3uPmCAYGgh/3/ygGZA9LL5a2jvWZVWPq2/+pFzWL 10CbFLCXaWT0dJrxDbLWZcd/6N95kT0sMwVJkwL+v/jrnyXpCpbB7UaYw5JSLsWMnk+4/pSeAoDwcZIgdBlRYPmM=", "url": "https://your.transitional.page/para=value" } },Copy the code

WeChat tools to grab the signature of the sample: fcaa113908d343444c1894dc4b42ac13

The original link: developer.huawei.com/consumer/cn…

Original author: Mayism