fs-payment-components v1.0.33

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": {
    "**": {
      "version": "",
      "provider": ""
    }
  }
}

安装

通过 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

Events

paysuccess的e.detail

payfailed的e.detail

payInfo

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

coupon

couponSubsidyDetail

是list形式

有效数据示例

[
  {
    "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-payment-list
  id="fsPayment"
  payInfo="{{payInfo}}"
  bind:paysuccess="handlePaySuccess"
  bind:payfailed="handlePayFailed"
/>

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

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

Props

Events

paySuccess的e.detail

payFailed的e.detail

定制主题

定制全局主题样式

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

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