How to call WeChat payment in uniapp

With the popularity of mobile payment, WeChat payment is becoming more and more widely used on the mobile terminal. When developing some mobile applications, many developers will integrate WeChat payment functions to enable users to pay online. WeChat payment can also be integrated into applications developed based on uniapp. Let's take a look at how uniapp calls WeChat payment.

1. First obtain WeChat payment parameters

Before calling WeChat payment, you need to obtain WeChat payment parameter information and generate a unique order number. Obtaining WeChat payment parameters requires calling the backend interface. We assume that the parameters returned by the interface include the following parameters:

Parameter name	Type	Description
appId	string	The appId of WeChat developer platform, used for payment signature verification
nonceStr	string	Random string used for payment signature verification
timeStamp	string	Time stamp, used for payment signature verification
#package	string	The prepay_id parameter returned by the unified order interface Value, used to initiate WeChat payment
signType	string	Signature type, currently supports MD5 and HMAC-SHA256, the default is MD5

After obtaining these parameters, the front end needs to pass them to the WeChat payment interface.

2. Call up WeChat payment

In uniapp, to call WeChat payment, you only need to call the API provided by uniapp. The API code is as follows:

uni.requestPayment({
    provider: 'wxpay',
    timeStamp: payParams.timeStamp,
    nonceStr: payParams.nonceStr,
    package: payParams.package,
    signType: payParams.signType,
    paySign: payParams.paySign,
    success: function (res) {
        console.log('支付成功');
    },
    fail: function (res) {
        console.log(res);
        console.log('支付失败');
    }
});

Things to note Yes, payParams is the object of payment parameters, which has been obtained previously. Here you need to pass it as a parameter to the uni.requestPayment() function. In addition, the provider parameter needs to be set to wxpay, indicating the use of WeChat payment.

After successfully calling uni.requestPayment(), the WeChat payment page will automatically open, and the user can complete the payment operation on this page. If the user's payment is successful, the success callback function will be triggered; if the user's payment fails, the fail callback function will be triggered.

3. Payment result verification

After the user completes the payment, in order to ensure the security of the payment, the payment result needs to be verified. The verification method is to send the query order interface to the background to obtain the payment result status.

The way to send requests in uniapp is very similar to other front-end frameworks, so I won’t go into details here. However, it should be noted that the order number needs to be passed to the backend in the query order interface. The backend queries the payment result status through the order number and returns the results to the frontend. If the payment result is successful, it means that the order has been paid and the developer can perform subsequent operations on the front end.

Summary:

Through the above steps, we can integrate the WeChat payment function in uniapp very simply. However, it should be noted that WeChat Pay requires developers to first register and activate on the WeChat Developer Platform, and they need to generate orders and other related information on their own backend servers. With this information, we can jump to the payment page on the front end and verify the payment results.

When developing WeChat applets or mobile applications, if you need to use WeChat payment, you can implement it according to the above reference code.

The above is the detailed content of How to call WeChat payment in uniapp. For more information, please follow other related articles on the PHP Chinese website!