@activity-maker/popup-checkstand

说明文档

https://alidocs.dingtalk.com/i/team/Y7kmb58PWN4MXLq2/docs/Y7kmbE5yabbMWXLq

数据持久化

localstorage 缓存上一次支付成功方法: payMethod => {"rawData":"ALIPAY"}

API

import popupCheckstand, {
  lyConfigApiList,
  useInitPayPopup,
} from '@activity-maker/popup-checkstand';

popupCheckstand

| 参数 | 说明 | 类型 | 版本 | | --------------- | -------------- | ---------------------------------------- | ---- | | checkWeChatAuth | 微信静默授权 | (thirdPartyId: number)?: string | | | show | 唤起浮层收银台 | (p: PopupCheckstandParams)?: DestroyFn | |

PopupCheckstandParams extends PopPayCallbackParams

| 参数 | 说明 | 类型 | 必填 | 默认值 | 版本 | | ---------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---- | ------------------------ | ------ | | cashierInfo | 支付数据 | string ( JSON ) | 是 | | --- | | tradeOrderNosRef | 订单号 | { current?: string } | 否 | | --- | | openIdRef | openId | { current?: string } | 否 | | --- | | paymentBtnStyle | 支付底部按钮样式 | React.CSSProperties | 否 | | --- | | onClose | 支付数据 | () => void | 否 | | --- | | thirdPartyId | 支付数据 | number | 否 | 17 | --- | | domain | 标识 | number | 否 | 1 | --- | | pullToRefresh | 禁用下拉刷新 | boolean | 否 | false | --- | | onShow | 展示回调 | () => void | 否 | | --- | | onPaySuccess | 支付成功回调 | (params: { selectedMethod: string; orderNo: string }) => void | 否 | | 0.36.0 | | onPayError | 支付过程发生错误回调 | (params: {selectedMethod?: string;orderNo: string;errorCode: string \| number;errorMessage: string;payScene: '1' \| '2';}) => void | 否 | | 0.36.0 | | onSelectMethod | 支付方式选择 | (params: { selectedMethod: string; orderNo: string }) => void | 否 | | 0.36.0 | | onPayBefore | 确认支付前回调 | (params: { selectedMethod: string; orderNo: string }) => void | 否 | | 0.36.0 | | payMethodVersion | 支付方式版本号配置 | Record<T,{name: T;version: string;}> | 否 | 默认主站的支付方式版本号 | 0.36.2 |

lyConfigApiList

浮层收银台需要 lysdk 的方法参数

属性意义参考 lysdk

'payment.zf1', 'payment.zf2', 'payment.abcPay', 'payment.unionPay', 'payment.spdbPay', 'payment.isUnionPayInstalled', 'page.pullToRefresh', 'page.stopPullToRefresh', 'device.getDeviceInfo', 'storage.setItem', 'storage.getItem', 'payment.ccbPay', 'payment.bocPay', 'statistic.ubtSource',

useInitPayPopup

初始化浮层收银台暴露下单并唤起浮层收银台方法

const { cancelOrder, destroy, popPay } = useInitPayPopup(
  (config: UsePayConfig = {}),
);

| 参数 | 说明 | 类型 | 版本 | | ----------- | ------------------ | --------------------------- | ---- | | cancelOrder | 取消订单并销毁浮层 | (reason?: string)=> void | | | destroy | 销毁浮层 | () => void | | | popPay | 下单唤起浮层收银台 | (params: PopPayParams) => | |

UsePayConfig extends Omit<PopPayParams, 'orderItems' | 'context' | 'promotionItems'>

全局的基本配置，如果在调用支付组件中没有传对应的参数，会从这个全局配置中读取。

| 参数 | 说明 | 类型 | 必填 | 默认值 | | ------------- | ------------------------------------ | ----------- | ---- | ---------------------------------- | | appIdentifier | 业务身份标识 | string | 否 | a1o6nonh0f14ltckcgg6o7uuq07l6sgm | | thirdPartyId | 用于在微信环境下下单使用，wx 授权 id | string | 否 | 17 | | onClose | 全局点击支付组件关闭按钮回调 | ()=> void | 否 | - | | onShow | 支付组件弹出时的回调函数 | ()=> void | 否 | - | | pullToRefresh | 是否使用下拉刷新 | Boolean | 否 | - | | returnUrl | 成功回调 url | string | 否 | - | | onShow | 支付组件弹出时的回调函数 | ()=> void | 否 | - |

PopPayParams extends PopupCheckstandParams

| 参数 | 说明 | 类型 | 必填 | 版本 | | ------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---- | ------ | | orderItems | 售卖商品 | OrderItem[] | 是 | ---- | | domain | 标识 | DomainType | 否 | ---- | | tradeType | 交易类型 | number 1:消费,2:充值,4:拼团,5:买赠 | 否 | ---- | | context | | Record<string, any> | 否 | ---- | | returnUrl | 成功回调 url | string | 否 | ---- | | onShow | 打开回调 | () => void | 否 | ---- | | onClose | 关闭回调 | () => void | 否 | ---- | | promotionItems | 促销信息 | TradePromotionItemType[] | 否 | ---- | | onPlaceOrderFail | 下单失败回调 | (errorCode: number, errorMsg: string) => void | 否 | ---- | | onPlaceOrderSuccess | 下单成功回调 | (res: any) => void | 否 | ---- | | onPaySuccess | 支付成功回调 | (params: { selectedMethod: string; orderNo: string }) => void | 否 | 0.36.0 | | onPayError | 支付过程发生错误回调 | (params: {selectedMethod?: string;orderNo: string;errorCode: string \| number;errorMessage: string;payScene: '1' \| '2';}) => void | 否 | 0.36.0 | | onSelectMethod | 支付方式选择 | (params: { selectedMethod: string; orderNo: string }) => void | 否 | 0.36.0 | | onPayBefore | 确认支付前回调 | (params: { selectedMethod: string; orderNo: string }) => void | 否 | 0.36.0 | | paymentBtnStyle | 支付底部按钮样式 | React.CSSProperties | 否 | --- |

公共回调

PopPayCallbackParams

• /** 关闭回调 */ onClose?: () => void;
• /** 打开回调 _/ onShow?: () => void;
• /** 支付方式选择回调 _/ onSelectMethod?: (params: { selectedMethod: string; orderNo: string; }) => void;
• /** 确认支付前回调 */ onPayBefore?: (params: { selectedMethod: string; orderNo: string }) => void;
• /** 支付成功回调 _/ onPaySuccess?: (params: { selectedMethod: string; orderNo: string }) => void;
• /** 支付过程发生错误回调 _/ onPayError?: (params: { selectedMethod?: string; orderNo: string; errorCode: string | number; errorMessage: string; payScene: '1' | '2'; }) => void;

Demo

import PopupCheckstand, {
  lyConfigApiList,
  useInitPayPopup,
} from '@activity-maker/popup-checkstand';

openId = PopupCheckstand.checkWeChatAuth(17); // 微信授权

PopupCheckstand.show({
  cashierInfo: value.cashierInfo,
  thirdPartyId: 17,
  paymentBtnStyle: {
    background: 'linear-gradient(180.02deg, #FFDD12 0.03%, #FFBE1D 100.75%)',
  },
  onShow: (params: any) => {
    console.log('onShow', params);
  },
  onPayBefore: (params: any) => {
    console.log('onPayBefore', params);
  },
  onSelectMethod: (params: any) => {
    console.log('onSelectMethod', params);
  },
  onPaySuccess: (params: any) => {
    console.log('onPaySuccess', params);
  },
  onPayError: (params: any) => {
    console.log('onPayError', params);
  },
  payMethodVersion: {
    ABCPAY: {
      name: 'ABCPAY',
      version: '8.3.46.1',
    },
    UNIONPAY: {
      name: 'UNIONPAY',
      version: '9.0.42',
    },
    SPDBPAY: {
      name: 'SPDBPAY',
      version: '6.0.22',
    },
    CCBSTAPAY: {
      name: 'CCBSTAPAY',
      version: '8.0.22',
    },
    BOCPAY: {
      name: 'BOCPAY',
      version: '0.0.22',
    },
  },
});

import { useInitPayPopup } from '@activity-maker/popup-checkstand';

const { destroy, popPay, cancelOrder } = useInitPayPopup({
  onClose: () => {},
});

popPay({
  orderItems: utilFun.getOrderItems({
    itemId: params.id,
    quantity: 1,
  }),
  context: params.context,
  promotionItems: params.promotionItems,
  onPlaceOrderFail: (_errCode: string | number, errMsg: string) => {},
  onPaySuccess: () => {},
  payMethodVersion: {},
});

支付方式

• 'WXPAY' 微信支付
• 'ALIPAY' 支付宝
• 'XIDIAN' 喜点
• 'PCREDIT' 花呗
• 'CCBPAY' 建行
• 'jdPay' 京东支付 TODO: 暂时不展示
• 'ABCPAY' 农行支付
• 'UNIONPAY' 银联支付
• 'SPDBPAY' 浦发支付
• 'DCPAY' 数字货币
• 'CCBSTAPAY' 建行二三类户
• 'BOCPAY' 中国银行
• 'CMHBPAY' 和包支付