# 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 beforeRequestPaymentThe 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.