# fs-payment
支付组件

## 使用前
### 添加服务器域名
1. 小程序账号登录[微信公众平台](https://mp.weixin.qq.com/)
2. 开发 —> 开发管理 —> 开发设置 —> 服务器域名
3. 在 `request合法域名` 中增加如下配置
   
```bash
https://prepaygw.51fubei.com
https://fshows-ecs-pro.cn-hangzhou.log.aliyuncs.com
```

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

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

#### 二. 在小程序 app.json 文件中加入配置
```json
// app.json
{
  "plugins": {
    "fs-prepay-card-plugin": {
      "version": "0.0.2",
      "provider": "wx457df64656d1d334"
    }
  }
}
```

## 安装

### 通过 npm 安装 

小程序支持使用 npm 安装第三方包，详见 [npm 支持](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm)

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

## 使用组件

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

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

## 代码演示

### 基础用法

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

```html
<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格式。当当微信支付或者支付宝支付时时可选填此字段。对于使用单品优惠的商户，该字段必须按照规范上传，详见“[单品优惠参数说明](https://pay.weixin.qq.com/wiki/doc/api/danpin.php?chapter=9_102&index=2)” | _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 |

有效数据示例

```json
[
  {
    "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
  }
]
```

空数据示例

```json
[
  {
    "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
  }
]
```


## 嵌入式支付组件

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

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

```js
// 确认支付
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 变量，即可对全局生效

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