支付功能页

支付功能页用于帮助插件完成支付,相当于 wx.requestPayment 的功能。

需要注意的是:插件使用支付功能,需要进行额外的权限申请,申请位置位于管理后台的“小程序插件 -> 基本设置 -> 支付能力”设置项中。另外,无论是否通过申请,主体为个人小程序在使用插件时,都无法正常使用插件里的支付功能。

调用参数

支付功能页使用 functional-page-navigator 进行跳转时,对应的参数 name 应为固定值 requestPayment,其他参数如下:

args参数说明:

参数名类型必填说明
feeNumber需要显示在页面中的金额,单位为分
paymentArgsObject任意数据,传递给功能页中的响应函数
currencyTypeString需要显示在页面中的货币符号的代码,默认为 CNY

currencyType 的合法值:

说明最低版本
CNY货币符号 ¥
USD货币符号 US$
JPY货币符号 J¥
EUR货币符号 €
HKD货币符号 HK$
GBP货币符号 £
AUD货币符号 A$
MOP货币符号 MOP$
KRW货币符号 ₩

代码示例:

  1. <!-- plugin/components/pay.wxml -->
  2. <!-- 上线时,version 应改为 "release",并确保插件所有者小程序已经发布 -->
  3. <functional-page-navigator
  4. version="develop"
  5. name="requestPayment"
  6. args="{{ args }}"
  7. bind:success="paymentSuccess"
  8. bind:fail="paymentFailed"
  9. >
  10. <button class="payment-button">支付 0.01 元</button>
  11. </functional-page-navigator>
  1. // plugin/components/pay.js
  2. Component({
  3. data: {
  4. args: {
  5. fee: 1, // 支付金额,单位为分
  6. paymentArgs: 'A', // 将传递到功能页函数的自定义参数
  7. currencyType: 'USD' // 货币符号,页面显示货币简写 US$
  8. }
  9. },
  10. methods: {
  11. // 支付成功的回调接口
  12. paymentSuccess: function (e) {
  13. console.log(e);
  14. e.detail.extraData.timeStamp // 用 extraData 传递数据,详见下面功能页函数代码
  15. },
  16. // 支付失败的回调接口
  17. paymentFailed: function (e) {
  18. console.log(e);
  19. }
  20. }
  21. })

用户点击该 navigator 后,将跳转到如下的支付功能页:

支付功能页

配置功能页函数

支付功能页需要插件开发者在插件所有者小程序中提供一个函数来响应插件中的支付调用。即,在插件中跳转到支付功能页时,这个函数就会在合适的时机被调用,来帮助完成支付。如果不提供功能页函数,功能页调用将通过 fail 事件返回失败。

支付功能页函数应以导出函数的形式提供在插件所有者小程序的根目录下的 functional-pages/request-payment.js 文件中,名为 beforeRequestPayment。该函数应接收两个参数:

参数名类型说明
paymentArgsObject即通过 functional-page-navigatorarg 参数中的 paymentArgs 字段传递到功能页的自定义数据
callbackFunction回调函数,调用该函数后,小程序将发起支付(类似于 wx.requestPayment

callback函数的参数:

参数名类型说明
errorObject失败信息,若无失败,应返回 null
requestPaymentArgsObject支付参数,用于调用 wx.requestPayment,参数如下

reqeustPaymentArgs 的参数:

用于发起支付,和 wx.requestPayment 的参数相同,但没有回调函数(success, fail, complete):

参数类型必填说明
timeStampString时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间
nonceStrString随机字符串,长度为32个字符以下。
packageString统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=*
signTypeString签名算法,暂支持 MD5
paySignString签名,具体签名方案参见小程序支付接口文档;
extraDataany由开发者决定的自定义数据段,该字段将被无修改地透传到支付成功的回调参数中,具体见代码示例中的使用方法。基础库 2.9.1 开始支持

了解更多信息,请查看微信支付接口文档

功能页函数代码示例:

  1. // functional-pages/request-payment.js
  2. exports.beforeRequestPayment = function (paymentArgs, callback) {
  3. // 注意:
  4. // 功能页函数(这个函数)不应 require 其他非 functional-pages 目录中的文件,
  5. // 其他非 functional-pages 目录中的文件也不应 require 这个目录中的文件,
  6. // 这样的 require 调用在未来将不被支持。
  7. //
  8. // 同在 functional-pages 中的文件可以 require
  9. var getOpenIdURL = require('./URL').getOpenIdURL;
  10. var paymentURL = require('./URL').paymentURL;
  11. // 自定义的参数,此处应为从插件传递过来的 'A'
  12. var customArgument = paymentArgs.customArgument;
  13. // 第一步:调用 wx.login 方法获取 code,然后在服务端调用微信接口使用 code 换取下单用户的 openId
  14. // 具体文档参考 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html?t=20161230#wxloginobject
  15. wx.login({
  16. success: function (data) {
  17. wx.request({
  18. url: getOpenIdURL,
  19. data: { code: data.code },
  20. success: function (res) {
  21. // 拉取用户 openid 成功
  22. // 第二步:在服务端调用支付统一下单,返回支付参数。这里的开发和普通的 wx.requestPayment 相同
  23. // 文档可以参考 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3
  24. wx.request({
  25. url: paymentURL,
  26. data: { openid: res.data.openid },
  27. method: 'POST',
  28. success: function (res) {
  29. console.log('unified order success, response is:', res);
  30. var payargs = res.data.payargs;
  31. // 第三步:调用回调函数 callback 进行支付
  32. // 在 callback 中需要返回两个参数: err 和 requestPaymentArgs:
  33. // err 应为 null (或者一些失败信息);
  34. // requestPaymentArgs 将被用于调用 wx.requestPayment,除了 success/fail/complete 不被支持外,
  35. // 应与 wx.requestPayment 参数相同。
  36. var error = null;
  37. var requestPaymentArgs = {
  38. timeStamp: payargs.timeStamp,
  39. nonceStr: payargs.nonceStr,
  40. package: payargs.package,
  41. signType: payargs.signType,
  42. paySign: payargs.paySign,
  43. extraData: { // 用 extraData 传递自定义数据
  44. timeStamp: payargs.timeStamp
  45. },
  46. };
  47. callback(error, requestPaymentArgs);
  48. }
  49. });
  50. },
  51. fail: function (res) {
  52. console.log('拉取用户openid失败,将无法正常使用开放接口等服务', res);
  53. // callback 第一个参数为错误信息,返回错误信息
  54. callback(res);
  55. }
  56. });
  57. },
  58. fail: function (err) {
  59. console.log('wx.login 接口调用失败,将无法正常使用开放接口等服务', err)
  60. // callback 第一个参数为错误信息,返回错误信息
  61. callback(err);
  62. }
  63. });
  64. }

注意:功能页函数不应 require 其他非 functional-pages 目录中的文件,其他非 functional-pages 目录中的文件也不应 require 这个目录中的文件。这样的 require 调用在未来将不被支持。

这个目录和文件应当被放置在插件所有者小程序代码中(而非插件代码中),它是插件所有者小程序的一部分(而非插件的一部分)。 如果需要新增或更改这段代码,需要发布插件所有者小程序,才能在正式版中生效;需要重新预览插件所有者小程序,才能在开发版中生效。