fs-payment v1.0.75
fs-payment
支付组件
使用前
添加服务器域名
- 小程序账号登录微信公众平台
- 开发 —> 开发管理 —> 开发设置 —> 服务器域名
在
request合法域名
中增加如下配置
https://prepaygw.51fubei.com
https://fshows-ecs-pro.cn-hangzhou.log.aliyuncs.com
引入付呗收银台插件
一. 申请付呗收银台插件使用权限
- 小程序账号登录微信公众平台
- 设置 —> 第三方设置 -> 插件管理 —> 添加插件,进入添加插件操作页面
- 搜索插件名
付呗收银台
并添加, 提交审核待通过
二. 在小程序 app.json 文件中加入配置
// app.json
{
"plugins": {
"fs-prepay-card-plugin": {
"version": "0.0.2",
"provider": "wx457df64656d1d334"
}
}
}
安装
通过 npm 安装
小程序支持使用 npm 安装第三方包,详见 npm 支持
# 通过 npm 安装
npm i fs-payment -S
构建
- 小程序开发者工具 -> 详情(工具右上角) -> 本地设置 -> 使用 npm 模块
- 小程序开发者工具 -> 工具 -> 构建 npm
- 构建成功后小程序代码包中将产出 "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;
}
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago