# Payment Features Page
The payment function page is used to help the plugin complete the payment, which is equivalent to wx.requestPayment Of the function.
Self-base library version 2.22.1 Can be called directly in the plug-in wx.requestPluginPayment Implementing Jump Paymentsadopt functional-page-navigator The jump will be abandoned.
When the following conditions are met, call the wx.requestPluginPayment
Or click navigator
Will directly pull up the payment cashier, skip the payment function page:
The Mini Program is tied to the plug-in in the same open The platform account.
Small programs and plug-ins are open The same subject of the account / When the subject is associated.
It is important to note that: the plugin uses the payment function and requires an additional permission request. The request location is located in the Management background of “Mini Program plug-in -> Basic settings -> Ability to pay”In the settings item. In addition, regardless of whether the application is passed, the main body is a personal Mini Program that cannot normally use the payment function in the plug-in when using the plug-in.
# Call parameter
Dxplaination of parameters:
Parameter name | type | Required | Introductions |
---|---|---|---|
fee | Number | yes | Amount that needs to be displayed in the page, in points |
paymentArgs | Object | no | Arbitrary data, passed to the response function in the function page |
currencyType | String | no | Code that requires a currency symbol to be displayed in the page, defaults to CNY |
currencyType The legal value:
value | Introductions | Minimum version |
---|---|---|
CNY | Currency symbol | |
USD | Currency symbol US$ | |
JPY | Currency symbol J | |
EUR | Currency symbol | |
HKD | Currency symbol HK$ | |
GBP | Currency symbol | |
AUD | Currency symbol A$ | |
MOP | Currency symbol MOP$ | |
KRW | Currency symbol |
# sample code
# wx.requestPluginPayment mode
Self-base library version 2.22.1 Recommend using this method.
<!-- plugin/components/pay.wxml -->
<button bindtap="handlePay" >Pay 0.01 yuan</button>
// plugin/components/pay.js
Component({
data: {
fee: 1, // Amount to be paid in cents
paymentArgs: 'A', // Custom arguments to be passed to the function on the function page
currencyType: 'USD' // Currency symbol, the page shows the currency abbreviation US$
version: 'develop', // When launched, version Should read "release," and make sure that the plug-in owner Mini Program has been released
},
methods: {
HandlePay () {
const { fee, paymentArgs, currencyType, version } = this.data
wx.requestPluginPayment({
fee,
paymentArgs,
currencyType,
version,
success(r) {
console.log(r)
},
fail(e) {
console.error(e)
}
})
}
}
})
# functionl-page-navigator Way (to be abandoned)
This method will be discarded for reference only.
<!-- plugin/components/pay.wxml -->
<!-- When launched, version Should read "release," and make sure that the plug-in owner Mini Program has been released -->
<!-- Name Parameters are fixed as "requestPayment" -->
<functional-page-navigator
version="develop"
name="requestPayment"
args="{{ args }}"
bind:success="paymentSuccess"
bind:fail="paymentFailed"
>
<button class="payment-button">Pay 0.01 yuan</button>
</functional-page-navigator>
// plugin/components/pay.js
Component({
data: {
args: {
fee: 1, // Amount to be paid in cents
paymentArgs: 'A', // Custom arguments to be passed to the function on the function page
currencyType: 'USD' // Currency symbol, the page shows the currency abbreviation US$
}
},
methods: {
// Callback interface for successful payment
paymentSuccess: function (e) {
console.log(e)
e.detail.extraData.timeStamp // use extraData Pass the data, see the function code in the function page below
},
// Callback interface for failed payments
paymentFailed: function (e) {
console.log(e)
}
}
})
User call wx.requestPluginPayment
Or click navigator
After that, the authority will be judged, and then directly pull up the payment cashier or jump to the following payment function page:
# Configuration function page function
The payment function page requires the plugin developer to provide a function in the plugin owner Mini Program that responds to a payment call in the plugin. That is, in the plug-in jump to the payment function page or call wx.requestPluginPayment
This function is called at the right time to help complete the payment. If a function page function is not provided, the function page call is passed by the fail
Event return failed.
In the root directory of the plugin owner Mini Program functional-pages/request-payment.js
File, named beforeRequestPayment
The function should receive two arguments:
Parameter name | type | Introductions |
---|---|---|
paymentArgs | Object | Namely through functional-page-navigator of arg In the parameter paymentArgs Field to the custom data passed to the feature page |
callback | Function | Callback function call for the Mini Program to initiate a payment similar to wx.requestPayment) |
callback Parameters of the function:
Parameter name | type | Introductions |
---|---|---|
error | Object | Failure information, if no failure, should be returned null |
requestPaymentArgs | Object | Payment parameter, which is used to call the wx.requestPayment, the parameters are as follows |
requestPaymentArgs Of the parameters:
Used to initiate the payment, and wx.requestPayment With the same arguments, but without a callback functionsuccess
, fail
, complete
):
parameter | type | Required | Introductions |
---|---|---|---|
timeStamp | String | yes | The time stamp from the 1970 year 1 month 1 day 00:00:00 The number of seconds so far, which is the current time |
NonceStr | String | yes | Random character string of length 32 The following characters. |
package | String | yes | Returned by the Unified Order Interface prepay_id Parameter values, submitted in a format such as: prepay_id=*** |
signType | String | yes | Signature algorithm, temporary support MD5 |
paySign | String | yes | Signature. See the specific signature scheme Mini Program payment interface document |
extraData | any | no | A custom data segment determined by the developer, the field will be passed to the callback parameter of the successful payment without modification, as shown in the code example. Base library 2.9.1 Start support |
For more information, check out the Weixin Pay interface document
Function page function code example:
// functional-pages/request-payment.js
exports.beforeRequestPayment = function (paymentArgs, callback) {
// Note:
// The function page function (this function) should not be Require Other non functional-pages Files in the directory,
// Other non functional-pages Files in the directory should also not be Require The files in this directory,
// Like this Require Calls will not be supported in the future.
//
// to be with functional-pages The files in the Require
var getOpenIdURL = Require('./URL').getOpenIdURL
var paymentURL = Require('./URL').paymentURL
// Custom parameters passed from the plug-in 'A'
var customArgument = paymentArgs.customArgument
// Step 1: Call wx.login Method acquisition Code, and then call the WeChat interface in the service end to use Code In exchange for the user. openId
// Specific Document Reference https://mp.weixin.qq.com/debug/wxadoc/dev/api/API-Login .html?t=20161230#wxloginobject
wx.login({
success: function (Data) {
wx.request({
url: getOpenIdURL,
data: { code: data.code },
success: function (res) {
// Pull User Openid success
// The second step: call the service to pay a unified order, return the payment parameters. Development here and the ordinary wx.requestPayment identical
// Documentation can refer to the https://pay.weixin.qq.com/Wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3
wx.request({
url: paymentURL,
data: { openid: res.data.openid },
method: 'POST',
success: function (res) {
console.log('unified order success, response is:', res)
var Payargs = res.data.payargs
// Step 3: Call the callback function callback Make a payment
// in callback You need to return two parameters: err and requestPaymentArgs:
// err Should be null (or some failure information)
// requestPaymentArgs Will be used to call the Wx.requestpayment, in addition to success/fail/complete Unsupported,
// Should be associated with wx.requestPayment Same parameters.
var error = null
var requestPaymentArgs = {
timeStamp: payargs.timeStamp,
NonceStr:: payargs.nonceStr,
package: payargs.package,
signType: payargs.signType,
paySign: payargs.paySign,
extraData: { // use extraData Delivering custom data
timeStamp: payargs.timeStamp
},
}
callback(error, requestPaymentArgs)
}
})
},
fail: function (res) {
console.log('pull user Openid Failure, will not be able to use the open interface and other services, res)
// callback The first argument is an error message. The error message is returned
callback(res)
}
})
},
fail: function (err) {
console.log('wx.login Interface call failure, will not be able to use the open interface and other services, " err)
// callback The first argument is an error message. The error message is returned
callback(err)
}
})
}
Note: Function page functions should not Require
Other non functional-pages
Files in the directory, other non functional-pages
Files in the directory should also not be Require
Files in this directory. Like this Require
Calls will not be supported in the future.
This directory and file should be placed in the plug-in owner Mini Program code (not in the plug-in code), which is part of the plug-in owner Mini Program (not part of the plug-in). If you need to add or change this code, you need to release the plug-in owner Mini Program to take effect in the official version.You need to re-preview the plug-in owner Mini Program before it can take effect in the development version.