fs-payment

支付组件

使用前

添加服务器域名

1. 小程序账号登录微信公众平台
2. 开发 —> 开发管理 —> 开发设置 —> 服务器域名
3. 在 request合法域名 中增加如下配置

https://prepaygw.51fubei.com
https://fshows-ecs-pro.cn-hangzhou.log.aliyuncs.com

引入付呗收银台插件

一. 申请付呗收银台插件使用权限

1. 小程序账号登录微信公众平台
2. 设置 —> 第三方设置 -> 插件管理 —> 添加插件，进入添加插件操作页面
3. 搜索插件名 付呗收银台 并添加, 提交审核待通过

二. 在小程序 app.json 文件中加入配置

// app.json
{
  "plugins": {
    "fs-prepay-card-plugin": {
      "version": "0.0.2",
      "provider": "wx457df64656d1d334"
    }
  }
}

安装

通过 npm 安装

小程序支持使用 npm 安装第三方包，详见 npm 支持

# 通过 npm 安装
npm i fs-payment -S

构建

1. 小程序开发者工具 -> 详情(工具右上角) -> 本地设置 -> 使用 npm 模块
2. 小程序开发者工具 -> 工具 -> 构建 npm
3. 构建成功后小程序代码包中将产出 "miniprogram_npm" 文件夹，确保文件夹内有fs-payment文件夹。

使用组件

以全屏页面版组件为例，只需要在 json 文件中引入组件即可

{
  "usingComponents": {
    "fs-pay-page": "/miniprogram_npm/fs-payment/fsPayPage/index"
  }
}

代码演示

基础用法

需要传入一个payInfo的对象，对象属性见文档下方表格。

<fs-pay-page
  wx:if="{{showPayPage}}"
  payInfo="{{payInfo}}"
  customNavigate="{{true}}"
  bind:paysuccess="handlePaySuccess"
  bind:payfailed="handlePayFailed"
  bind:close="handlePayPageClose"
/>

• 如果要在同一页面展示组件，用wx:if控制组件的显示隐藏；如果新跳页面展示组件，则不需要wx:if。
• 如果您使用组件的页面是自定义导航栏模式，那么可以设置customNavigate为true，打开组件内部的自定义导航栏。

API

Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | payInfo | 支付组件入参对象 | Object | {} | | customNavigate | 是否使用自定义导航栏 | boolean | false | | zIndex | 组件层级 | number | 999 |

Events

| 事件名 | 说明 | 参数 | | --- | --- | --- | | bind:paysuccess | 支付成功时触发 | event.detail | | bind:payfailed | 支付失败时触发 | event.detail | | bind:close | 点击组件的自定义导航栏的关闭按钮，关闭组件时触发;前置接口错误，需要销毁组件时触发； | 无 |

paysuccess的e.detail

| 键名 | 说明 | 类型 | 是否必填 | 备注 | | --- | --- | --- | --- | --- | | payStatus | 支付状态 | number | Y | 1-已付款 | | merchantOrderSn | 外部订单号 | string | N | - | | orderSn | 付呗交易订单号 | string | N | - | | payplugOrderSn | 收银组件订单号 | string | N | - |

payfailed的e.detail

| 键名 | 说明 | 类型 | 是否必填 | 备注 | | --- | --- | --- | --- | --- | | errorCode | 错误状态码 | number | N | - | | errorMsg | 错误消息 | string | N | - | | payStatus | 支付状态 | number | N | 2-已取消 4-已关闭 5-撤销中 6-已撤销 7-撤销失败 | | merchantOrderSn | 外部订单号 | string | N | - | | orderSn | 付呗交易订单号 | string | N | - | | payplugOrderSn | 收银组件订单号 | string | N | - |

payInfo

API中的payInfo为一个对象，有以下key：

| 键名 | 说明 | 类型 | 默认值 | 是否必传(Y/N) | | --- | --- | --- | --- | --- | | orderPrice | 支付金额 | string | - | Y | | merchantId | 商户id | string | - | Y | | merchantName | 商户名称 | string | - | N | | orgId | 广场id | string | - | Y | | openId | 用户openid | string | - | Y | | unionId | 用户unionid | string | - | Y | | phone | 用户手机号(加密后的) | string | - | Y | | merchantOrderSn | 订单id | string | - | Y | | platformType | 平台类型 | number | 1 - 万达 | Y | | storeId | 门店id | string | - | N | | scene | 用户支付场景 'APPLET_CONSUME_SCENE'-正常场景 'BUY_PRE_PAY_CARD_SCENE'-购卡场景 'PREPAY_CARD_CONSUME_SCENE'-只支持预付费卡支付场景 | string | APPLET_CONSUME_SCENE | N | | goodsTag | 订单优惠标记，代金券或立减优惠功能的参数（使用单品券时必传） | string | - | N | | detail | 订单包含的商品信息，Json格式。当当微信支付或者支付宝支付时时可选填此字段。对于使用单品优惠的商户，该字段必须按照规范上传，详见“单品优惠参数说明” | string | - | N | | couponList | 优惠券列表（对象数组），券信息见下面coupon表 | Array | - | N | | orderTimeoutExpress | 订单支付剩余时间，单位秒 | number | 15 * 60，默认15分钟 | N | | royalty | 分账自定义打标参数；0-不分帐 1-分帐 | number | 0 | N | | payplugAttach | 扩展参数 | string(1024) | - | N | | payplugCallbackUrl | 回调地址 | string | - | N | | appId | 小程序id 注意：如果对接插件组件，这个值不能传; | string | - | N |

支付场景： 万达预付费卡购买场景：WANDA_PREPAY_CARD_BUY_SCENE 万达预付费卡消费场景：WANDA_PREPAY_CARD_CONSUME_SCENE 万达微信支付场景：WANDA_WECHAT_CONSUME_SCENE 万达支付宝支付场景：WANDA_ALIPAY_CONSUME_SCENE 万达全类型支付场景：WANDA_APPLET_CONSUME_SCENE 付呗微信支付场景：FUBEI_WECHAT_CONSUME_SCENE 付呗支付宝支付场景：FUBEI_ALIPAY_CONSUME_SCENE

coupon

| 键名 | 说明 | 类型 | 默认值 | 是否必传(Y/N) | | --- | --- | --- | --- | --- | | couponId | 卡券ID | string | - | Y | | couponName | 卡券名称 | string | - | Y | | couponQuantity | 卡券数量 | string | - | Y | | couponPrice | 卡券单价：单位为分 | number | - | Y | | couponCode | 卡券的券码 | string | - | Y | | couponSubsidyDetail | 卡券补贴详情 1、使用卡券时必传：JSON格式，补贴的5个组成部分缺一不可 2、补贴部分金额总合需要与卡券面额相等 | string | - | Y |

couponSubsidyDetail

是list形式

| 参数 | 说明 | 类型 | 默认值 | 是否必传(Y/N) | | --- | --- | --- | --- | --- | | subsidyRole | 卡券补贴角色：传入角色名称即可 | string | - | Y | | subsidyType | 卡券补贴类型：1-顾客实际支付 2-商家补贴 3-机构补贴(万达) 4-银行补贴 5-其他 | number | - | Y | | subsidyPrice | 卡券补贴金额，单位为分 | number | - | Y |

有效数据示例

[
  {
    "subsidyRole": "顾客支付",
    "subsidyType": 1,
    "subsidyPrice": 70000
  },
  {
    "subsidyRole": "商家XX",
    "subsidyType": 2,
    "subsidyPrice": 10000
  },
  {
    "subsidyRole": "万达xxx广场",
    "subsidyType": 3,
    "subsidyPrice": 10000
  },
  {
    "subsidyRole": "建设银行",
    "subsidyType": 4,
    "subsidyPrice": 10000
  },
  {
    "subsidyRole": "其他",
    "subsidyType": 5,
    "subsidyPrice": 10000
  }
]

空数据示例

[
  {
    "subsidyRole": "顾客支付",
    "subsidyType": 1,
    "subsidyPrice": 90000
  },
  {
    "subsidyRole": "商家",
    "subsidyType": 2,
    "subsidyPrice": 10000
  },
  {
    "subsidyRole": "",
    "subsidyType": 3,
    "subsidyPrice": 0
  },
  {
    "subsidyRole": "",
    "subsidyType": 4,
    "subsidyPrice": 0
  },
  {
    "subsidyRole": "其他",
    "subsidyType": 5,
    "subsidyPrice": 0
  }
]

嵌入式支付组件

{
  "usingComponents": {
    "fs-pay-list": "/miniprogram_npm/fs-payment/fsPayList/index"
  }
}

<fs-pay-list
  id="fsPayment"
  payInfo="{{payInfo}}"
  bind:selectcard="handleSelectCard"
  bind:paysuccess="handlePaySuccess"
  bind:payfailed="handlePayFailed"/>

// 确认支付
handlePay () {
  const fsPayment = this.selectComponent('#fsPayment')
  fsPayment.confirmPay() // 子组件的方法
}

组件外部调组件内部confirmPay方法，唤起支付

| 事件名 | 说明 | 参数 | | --- | --- | --- | | confirmPay | - | - |

Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | payInfo | 支付组件入参对象 | Object | {} |

Events

| 事件名 | 说明 | 参数 | | --- | --- | --- | | bind:paysuccess | 支付成功时触发 | e.detail | | bind:payfailed | 支付失败时触发 | e.detail | | bind:selectcard | 确认选择预付卡后触发 | e.detail |

paysuccess的e.detail

| 键名 | 说明 | 类型 | 是否必填 | 备注 | | --- | --- | --- | --- | --- | | payStatus | 支付状态 | number | Y | 1-已付款 | | merchantOrderSn | 外部订单号 | string | N | - | | orderSn | 付呗交易订单号 | string | N | - | | payplugOrderSn | 收银组件订单号 | string | N | - |

payfailed的e.detail

| 键名 | 说明 | 类型 | 是否必填 | 备注 | | --- | --- | --- | --- | --- | | errorCode | 错误状态码 | number | N | - | | errorMsg | 错误消息 | string | N | - | | payStatus | 支付状态 | number | N | 2-已取消 4-已关闭 5-撤销中 6-已撤销 7-撤销失败 | | merchantOrderSn | 外部订单号 | string | N | - | | orderSn | 付呗交易订单号 | string | N | - | | payplugOrderSn | 收银组件订单号 | string | N | - |

selectcard的e.detail

| 键名 | 说明 | 类型 | 是否必填 | 备注 | | --- | --- | --- | --- | --- | | cardNo | 卡号 | string | N | - | | balance | 余额 | number | N | - | | cardType | 卡类型 2-线上卡 3-线下卡 | number | N | - |

定制主题

定制全局主题样式

在 app.wxss 中，写入 CSS 变量，即可对全局生效

page {
  --button-border-radius: 10px;
  --button-default-background-color: #f2f3f5;
  --button-default-color: #f2f3f5;
  --button-default-border-color: #f2f3f5;
}