How to implement the H5 page payment _javascript skills of the built-in browser in micro-credit payment

Because the project needs, in the H5 page to add micro-letter payment, so go to try, just want to say really very pit, especially debugging up inconvenient

This is the micro-letter official API document micro-Credit API

The preparation of micro-credit payment

Apply for public number, apply for open payment, this is very simple, its own Baidu
After applying, configure the "Payment authorization Directory", "Test Authorization Directory", and "test whitelist" on the "micro-mail Payment" page of the micro-trust public Platform page, "Development Configuration tab".
Find "AppID (Application ID)" and "Appsecret (Application key)" in the "Developer Center" of the Micro-trust public platform page.
Find the merchant number of the micro-credit payment distribution on the merchant platform and configure a merchant payment key yourself

Specific steps

First of all, through the micro-credit API to get paid for the prepay_id, where you need to use the above mentioned "AppID (Application ID)", "Appsecret (Application Key)", "micro-letter Payment distribution merchant number", "Merchant payment key" And some other parameters (specific reference to the micro-letter development document) with MD5 encryption into a signature (first signature) after obtaining prepay_id, with Prepay_ ID and some other parameters (specific reference to the micro-credit development document) with MD5 encryption into a signature (second signature) and then in the front end through the micro-mail built-in browser to provide the JS Api,weixinjsbridge.invoke to call the micro-letter Payment Pop-up page, this need to use the above the second signature

The specific code is as follows

$.get ('/xxx ', function (data) {
 if (data && data!== "") {
  var _data = $.parsejson (data) [0];
  if (parseint (_data.useragent) < 5) {
  alert (' Your micro-letter version is less than 5.0, cannot be paid with a micro-letter!) ');
  return false;
  }
  Weixinjsbridge.invoke (' Getbrandwcpayrequest ', {
  ' appId ': _data.appid,
  ' timeStamp ': _data.timestamp,
  ' Noncestr ': _data.noncestr,
  ' package ': ' prepay_id= ' + _data.packageone,
  ' signtype ': _data.signtype,
  ' Paysign ': _data.paysign
  },function (res) {
   if (res.err_msg = = ' Get_brand_wcpay_request:ok ') {
   alert ( ' Pay success, return to order list! ');
   } else if (res.err_msg = = ' Get_brand_wcpay_request:cancel ') {
   alert (' Cancel payment!) ');
   }
  });

 }
});

Several easy to fail points need attention

The payment link does not match the link configured on the development platform

A total of 2 signatures required, and the required parameters are different, in the JS used in the signature is the second signature, do not confuse parameter transmission can not be wrong

If there is Chinese in the body that needs to be escaped, there are some problems that are not completely resolved, is the location of the payment does not have a judgement of the expiration of the time, if the micro-credit to pay the pop-up layer stay too long, may be the order on our website has been invalidated, can still be paid in the micro-letter payment success, If an expert knows how to solve this problem, I hope to tell the solution.