# Feature Page of Payment
The feature page of payment helps a plug-in with payment and is functionally equivalent to wx.requestPayment.
Note: To enable the payment feature for a plug-in, you need to additionally apply for the permission in Mini Program Plug-In > Basic Settings > Payment Capability on the Admin Console. In addition, personal Mini Programs are not allowed to use the payment feature in a plug-in, regardless of whether the payment permission application is approved.
# Call Parameters
When functional-page-navigator is used for redirection to the feature page of payment, the corresponding parameter name should be set to the fixed value requestPayment
. Other parameters are set as follows:
Parameters of args:
Parameter Name | Type | Required | Description |
---|---|---|---|
fee | Number | Yes | Amount to be displayed on the payment feature page, in fen |
paymentArgs | Object | No | Any data, which is passed to the response function on the payment feature page |
currencyType | String | No | Code of the currency symbol to be displayed on the payment feature page. It is CNY by default. |
Valid values of currencyType:
Value | Description | 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 ₩ |
Callback result:
Callback Type | errMsg | Description |
---|---|---|
success | requestPayment:ok | Payment calling succeeds |
fail | requestPayment:fail cancel | The user cancels payment. |
fail | requestPayment:fail (detail message) | Payment calling fails. The detail message is the detailed failure reason returned by the backend. |
Code example:
<!-- plugin/components/pay.wxml -->
<!-- Before release, set version to "release", and ensure that the plug-in owner Mini Program has been released. -->
<functional-page-navigator
version="develop"
name="requestPayment"
args="{{ args }}"
bind:success="paymentSuccess"
bind:fail="paymentFailed"
>
<button class="payment-button">Paid 0.01 CNY</button>
</functional-page-navigator>
// plugin/components/pay.js
Component({
data: {
args: {
fee: 1, // Payment amount, in fen
paymentArgs: 'A', // Custom parameter to be passed to a feature page function
currencyType: 'USD' // Currency symbol. The abbreviation of the currency symbol, for example, US$, is displayed on the page.
}
},
methods: {
// Callback API for successful payment
paymentSuccess: function (e) {
console.log(e);
},
// Callback API for failed payment
paymentFailed: function (e) {
console.log(e);
}
}
})
When a user clicks navigator
, the following payment feature page will be displayed:
# Configuring Feature Page Functions
A plugin developer must provide a function in a plugin owner Mini Program for the payment feature page to respond to payment calling in a plugin. To be specific, when the plug-in is redirected to the feature page of payment, this function will be called at the right time to help complete payment. If this feature page function is not provided, calling of the feature page will fail and the fail
event is returned.
The payment feature page function should be named beforeRequestPayment
and provided as an export function in the functional-pages/request-payment.js
file under the root directory of the plug-in owner Mini Program.
Parameter Name | Type | Description |
---|---|---|
paymentArgs | Object | Custom data passed to the feature page via the paymentArgs field in the arg parameter of functional-page-navigator |
callback | Function | Callback function. After calling the function, a Mini Program will initiate payment (similar to wx.requestPayment). |
Parameters of the callback function:
Parameter Name | Type | Description |
---|---|---|
error | Object | Failure information. If no failure occurs, null should be returned. |
requestPaymentArgs | Object | Payment parameters used to call wx.requestPayment. Included parameters are as follows. |
Parameters of requestPaymentArgs:
These parameters are used to initiate payment and are the same as those of wx.requestPayment, except that callback functions (success
, fail
, and complete
) are not included.
Parameter | Type | Required | Description |
---|---|---|---|
timeStamp | String | Yes | Timestamp in seconds, from January 1st 1970 at 00:00:00 to the present time |
nonceStr | String | Yes | A random string of less than 32 characters |
package | String | Yes | Value of the prepay_id parameter returned by the unified order placement API, which should be submitted in the following format: prepay_id=*** |
signType | String | Yes | Signature algorithm. Only MD5 is supported currently. |
paySign | String | Yes | Signature. For specific signature schemes, see Mini Program Payment API Documentation; |
For more information, see WeChat Payment API Documentation.
Sample code of the feature page function:
// functional-pages/request-payment.js
exports.beforeRequestPayment = function (paymentArgs, callback) {
// Note:
// The feature page function (this function) should not require other files outside the functional-pages directory.
// Other files outside the functional-pages directory should not require files in this directory.
// Such a require call will not be supported in the future.
//
// Files in the functional-pages directory can be required.
var getOpenIdURL = require('./URL').getOpenIdURL;
var paymentURL = require('./URL').paymentURL;
// Custom parameter. The value should be 'A' passed from a plug-in.
var customArgument = paymentArgs.customArgument;
// Step 1: Obtain code by calling the wx.login method, and exchange the openId of the order placer with the code by calling the Weixin API on the server.
// For specific documentation, visit 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) {
// The openid of the user is obtained.
// Step 2: Call the unified order placement API on the server for payment. Payment parameters are returned. Development of this is the same as that of the common wx.requestPayment.
// For specific documentation, visit 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 to complete payment.
// The callback function must return two parameters: err and requestPaymentArgs.
// The err parameter should be set to null (or some failure information).
// The requestPaymentArgs parameter is used to call wx.requestPayment. The success, fail, and complete functions are not supported.
// Other included parameters should be the same as those of wx.requestPayment.
var error = null;
var requestPaymentArgs = {
timeStamp: payargs.timeStamp,
nonceStr: payargs.nonceStr,
package: payargs.package,
signType: payargs.signType,
paySign: payargs.paySign,
};
callback(error, requestPaymentArgs);
}
});
},
fail: function (res) {
console.log(' Failed to obtain the openid of the user, so services such as open APIs are unavailable.', res);
// The first parameter of the callback function is error information. Error information is returned.
callback(res);
}
});
},
fail: function (err) {
console.log('wx.login Failed to call the API, so services such as open interfaces are unavailable.', err)
// The first parameter of the callback function is error information. Error information is returned.
callback(err);
}
});
}
** Note: Feature page functions should not require
other files outside the functional-pages
directory, and files outside the functional-pages
directory should not require
files in this directory. Such a require
call will not be supported in the future.**
This directory and its files should be included in the code of a plug-in owner Mini Program (not the plug-in code) as part of the plug-in owner Mini Program (not a part of the plug-in). To add or modify this part of code, you need to release the plug-in owner Mini Program to take it into effect in the official version, or re-preview the plug-in owner Mini Program to take it into effect in the developer version.