Preface
During this period, a three-end integrated project was developed through Uniapp, involving payment methods for different platforms. Here is a brief introduction to you, hoping it will be helpful;
read:WeChat payment documents
1. WeChat mini program payment
- Get the code through () and call the backend interface to obtain openid;
({
success (res) {
if () {
//Initiate a network request to obtain openid, which is generally to access the interface encapsulated by the backend, or to obtain it by accessing the official WeChat interface ({
url: 'Backend interface address, get openid',
method: 'GET',
success(res) {
//Get openid: the user's real unique id is saved ()
}
})
} else {
('Login failed! ' + )
}
}
})
- Call the backend interface to create an order and get the orderId;
({
url: 'Backend interface address, get order id',
method: 'POST',
data: { Parameters required for incoming interface,Such as the amount of goods,Number of products, etc. },
success(res) {
()
}
})
- Call the backend interface to obtain the payment core parameters and prepay;
({
url: 'Backend interface address, obtain payment core data',
method: 'POST',
data: { Parameters required for incoming interface,Like orderID,openIdwait },
success(res) {
()
//The interface will return the following core parameters //timeStamp Timestamp //nonceStr random string //package Unify the prepay_id parameter value returned by a single interface //signType signature algorithm //paySign Sign }
})
- Payment is initiated by calling() via payment core parameters;
//Call the WeChat official payment interface to pop up the payment interface, enter the password to deduct the payment ({
timeStamp, //Time stamp nonceStr, //Random string package, //prepay_id
signType, //Signature Algorithm MD5 paySign, //sign success (res) {
if ( == "requestPayment:ok"){
('Payment Successfully', res)
}else{
('Pay failed')
}
},
fail (res) {
('Pay failed', res)
}
})
2. Public account H5 payment
There are two ways to refer to the payment method:
- JSAPI Payment: Obtain the necessary parameters for initiating payment through the JSAPI order interface, and then use the front-end JS method provided by WeChat Pay to adjust the official account to pay
- After obtaining the order id and openid, call prepayment to obtain the core JSAPI parameters;
({
url: 'Backend interface address, obtain payment core data',
method: 'POST',
data: { Parameters required for incoming interface,Like orderID,openIdwait },
success(res) {
//Call the payment method below wxpay（）
()
//The interface will return the following core parameters //appId official account ID //timeStamp Timestamp //nonceStr random string //package Unify the prepay_id parameter value returned by a single interface //signType WeChat signature method RSA //paySign WeChat signature
}
})
- Payment is initiated through JSAPI core parameters;
// Detect WeixinJSBridge in payment environment function wxpay(data) {
if (typeof WeixinJSBridge == "undefined") {
if () {
('WeixinJSBridgeReady', onBridgeReady(data), false);
} else if () {
('WeixinJSBridgeReady', onBridgeReady(data));
('onWeixinJSBridgeReady', onBridgeReady(data));
}
} else {
onBridgeReady(data);
}
}
function onBridgeReady(data) {
(
'getBrandWCPayRequest', {
// Pass in the core parameters returned by the backend interface in the first step "appId": , //Official account "timeStamp": , //Time stamp "nonceStr": , //Random string "package": , //prepay_id
"signType": , // WeChat signature method RSA "paySign": //WeChat Signature },
function(res) {
// Payment successfully if (res.err_msg == "get_brand_wcpay_request:ok") {
// Use the above method to judge the front-end return, the WeChat team solemnly reminds: //res.err_msg will return ok after the user pays successfully, but it does not guarantee that it is absolutely reliable. }
// User cancellation during payment if (res.err_msg == "get_brand_wcpay_request:cancel") {
}
// Payment failed if (res.err_msg == "get_brand_wcpay_request:fail") {
}
/**
* Others
* 1. Please check whether the prepay session identifier prepay_id has expired
* 2. Is the requested appid consistent with the appid of the ordering interface?
* */
if (res.err_msg == "Call payment JSAPI missing parameter: total_fee") {
}
});
}
- In the JSSDK of WeChat official account:JS-SDK documentation;Note: Currently, the official document has cancelled the choiceWXPay interface, but recommends JSAPI payment;
- In the project, you need to introduce jweixin file: /open/js/jweixin-1.6.
Or bynpm i jweixin-moduleUse jWeixin object; - Verify the configuration through the config interface inject permissions;
//Calling the backend interface to obtain configuration parameters({
url: 'Backend interface address, get verification configuration',
method: 'POST',
data: { Parameters required for incoming interface,Such as page pathurl },
success({data}) {
//Inject permission verification configuration ({
debug: false, // Turn on debug mode, the return values of all APIs called will be alerted on the client. To view the passed parameters, you can open them on the PC side. The parameter information will be printed through the log and will only be printed on the PC side. (Remember to turn off the test) appId: , // The unique identifier of the official account timestamp: , // Generate the signature timestamp nonceStr: , // Generate a random string of signatures signature: , // sign jsApiList: ['chooseWXPay'], // JS interface list })
}
})
- Successfully processed through the ready interface and called for payment;
(function () {
// After config information is verified, the ready method will be executed. All interface calls must be obtained after the config interface obtains the result. config is an asynchronous operation of a client. Therefore, if you need to call the relevant interface when the page is loaded, the relevant interface must be placed in the ready function to be called to ensure correct execution. For interfaces that are called only when the user triggers, they can be called directly without putting them in the ready function. ({
timestamp: ,
package: ,
nonceStr: ,
signType: ,
paySign: ,
success: function (res: any) {
if ( == "chooseWXPay:ok") {
('Payment Successfully')
} else {
('Pay failed')
},
fail: function (res: any) {
('Pay failed')
},
});
});
3. Payment of app mini program
App payment is suitable for scenarios where WeChat payment functions are integrated into mobile apps. The merchant app calls the SDK provided by WeChat to call the WeChat payment module. The merchant app will jump to WeChat to complete the payment. After payment, jump back to the merchant app and finally display the payment results. The specific operation process is as follows (the process is similar to the applet):
- After logging in to obtain openId, create an order to obtain the order ID; (It should be noted here that you need to make relevant configurations when using WeChat to log in:View link）
//Log in({
"provider": "weixin",
success: function(event){
// Log in successfully, get openid const {openid,access_token}=
//Get user information ({
provider: 'weixin',
success: function(info) {
// Acquisition of user information successfully, call the backend interface to complete the login }
})
},
fail: function (err) {
// Login authorization failed // It's the error code }
})
//Create an order when placing an order after login is successful```javascript
({
url: 'Backend interface address, get order id',
method: 'POST',
data: { Parameters required for incoming interface,Such as the amount of goods,Number of products, etc. },
success(res) {
()
}
})
- Call the backend interface to obtain the payment core parameters and prepay;
({
url: 'Backend interface address, obtain payment core data',
method: 'POST',
data: { Parameters required for incoming interface,Like orderIDwait },
success(res) {
()
//The interface will return the following core parameters //timeStamp Timestamp //nonceStr random string //package Unify the prepay_id parameter value returned by a single interface //signType signature algorithm //paySign Sign
//Initiate payment through the API below }
})
- Call () to initiate payment: Payment platform function application -> Configure payment parameters in uni-app to call API to make paymentOfficial website process reading
({
provider: 'wxpay',
orderInfo: , //WeChat and Alipay order data [Note the order information of WeChat, the keys and values should all be lowercase and cannot be named by camel] nonceStr: ,
package: ,
timeStamp: ,
signType: ,
paySign: ,
success: function (res) {
if ( == "requestPayment:ok") {
('Payment Successfully')
}else{
('Pay failed')
}
},
fail: function (err) {
('Pay failed:' + (err));
}
});
Summarize
- Login: Call/call the WeChat interface, get the code, call the backend background to get the openid;
- Order: Call the backend interface to obtain the order ID, and then call the backend interface to pass in parameters such as openid, product id, product unit price, product quantity and other parameters to obtain important parameters for prepayment (timestamp timeStamp, random string nonceStr, prepayment id package, signature algorithm signType, signature paySign)
- Payment: Call uni/WeChat payment method, pass 5 important parameters, and obtain payment results (success or failure)
- Because H5 payment cannot directly call the WeChat API, it needs to configure the corresponding interface through JSSDK;
If multi-end payment is involved in development, multi-end differences need to be processed through conditional compilation. You can refer toOfficial website documentationIn actual development, you can refer to the documents of all the big guys to find a method suitable for your project development. You are also welcome to discuss and provide suggestions and supplements...
This is the article about the implementation of WeChat payment function of uniapp front-end. For more related WeChat payment content in uniapp front-end, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!