Payment method included

The payment function is a very common and important function. There are many payment platforms that can be used for payment. The more common ones are WeChat payment, Alipay payment and payment methods of major banks.

This article only explains some common work that needs to be done on the front end of WeChat payment and Alipay payment. In the process of implementing the payment function, the front-end needs to do less work than the back-end. The focus of the specific business implementation of the payment function is on the back-end. All the front-end needs to do is to send the data processed by the back-end through the APIs of major payment platforms.

The payment functions introduced in this article can only be used after applying for the corresponding open payment platform. Please refer to the instructions of the corresponding platform for details.

WeChat Pay

WeChat payment is more common in mini programs and WeChat official accounts, as well as general web applications that have introduced WeChat payment.
For details on WeChat payment, please see WeChat payment platform

WeChat Mini Program Payment

The front-end process of WeChat mini program payment is as follows:

1. The front-end first calls the back-end interface to obtain payment data.
2. After the front-end obtains the data, it can send a request through the payment API provided by the WeChat applet.

wx.requestPayment({
    
    
nonceStr, //随机字符串
			package, // prepay_id= 统一下单接口返回的prepay_id
			paySign, // MD5签名 appid、timeStamp、nonceStr、package
			signType, // 签名算法
			timeStamp, // 时间戳
});

WeChat official account web payment

The front-end process of WeChat official account web payment is as follows:

1. The front-end first calls the back-end interface to obtain payment data.
2. After the front-end gets the data, it can call the payment interface provided by WeChat

There are two payment methods for WeChat official account webpages

1. jssdk
   To use jssdk, you need to introduce jssdk into the project to use it, and call chooseWeiXinPay() when paying.

   jWeiXin.choosePay({
         
         
   // 请求参数
   });
   

2. Use the interface that comes with the WeChat browser
   In the WeChat browser, you can call the payment interface through the WXJSBridge object

   WXJSBridge.invoke('getBrandWCPayRequest',{
         
         
   // 请求参数 
   });
   

WeChat Pay for Non-WeChat Clients

If you need to use WeChat Pay in a non-WeChat browser, you need to apply for permission on the WeChat Pay Open Platform and configure relevant merchant information before you can use it.
This payment method requires very little work on the front end. It only needs to call the back-end interface. The back-end interface will return a URL. The front-end only needs to redirect the page to the returned URL.

Pay with Ali-Pay

Alipay payment mainly includes Alipay applet payment and Alipay Life Account web payment. For details on Alipay payment, please seeAlipay Open Platform

Alipay Life Account web payment

The front-end process of Alipay Life Account web payment:

1. The front end first calls the back end interface and gets the formData returned by the back end.
2. The front-end uses js to simulate form submission and submits the formData to the specified Alipay URL. This URL is also returned by the back-end.

const form = document.createElement('form');
		const html = '';
		Obbject.keys(payInfo).forEach(item => {
    
    
			html = html + `<input name="${
      
      item}" value="${
      
      payInfo[item]}" />`;
		});
		form.innerHTML = html;
		form.setAttribute('action', '后端返回的url');
		form.submit();

Alipay mini program payment

The front-end process of Alipay mini program payment:

1. The front end calls the back end interface to get the payment data
2. The front end can call the payment interface provided by the Alipay applet. Before calling the payment interface, the authorization interface needs to be called.

my.getAuthCode({
scoped:'auth_base',
success:(res)=>{
my.tradePay({
tradeNO:'后端返回的数据'
});
},
fail:()=>{}

});