前端接口

1. API

使用方法 PMdropin.API。

API	描述	详情
create	示例化一个内置组件	参阅create
mount	将实例化组件挂载到div标签	参阅mount
on	监听事件	参阅on
emit	触发事件	参阅emit

1.1 create

用于初始化组件，使用方法 PMdropin.create(ComponentName, Options)。

ComponentName详解

ComponentName	字段类型	描述
applepay	string	ApplePay组件

Options详解

Options	是否必填	字段类型	描述	默认值
clientKey	Y	String	客户端公钥	-
sessionKey	Y	String	安全访问令牌	-
sandbox	N	Boolean	沙盒环境	false
theme	N	String	主题	light
payButtonStyle	N	String	按钮样式	-

1.2 mount

用于挂载初始化组件实例，使用方法PMdropin.mount(Tag)。

Tag详解

Tag	描述
id	需要挂载的id元素值，如 PMdropin.mount('#applepay-frame')
class	需要挂载的class元素值，如 PMdropin.mount('.applepay-frame')

1.3 on

用于监听组件内置响应事件，使用方法PMdropin.on(Event, CallbackFunction)。

Event详解

Tag	描述	返回值
ready	组件加载完成时触发	null
payButtonClick	ApplePay按钮被点击时触发	null

示例：

PMdropin.on('payButtonClick', function(event) {
  // achieve paymentToken and orderAndPay
  applePay.emit('setDisabled', true)
  applePay.emit('canMakePayment')
    .then(res => {
      const paymentToken = res?.data?.paymentToken 
      if(paymentToken){
        orderAndPay()
      }else{ 
        applePay.emit('setDisabled', false)
      }
    })
    .catch(err => {
      applePay.emit('payFail')
      applePay.emit('setDisabled', false) 
    })
    
});

1.4 emit

用于调用组件内置方法，使用方法PMdropin.emit(Event, Params)。

Event	Params	描述
canMakePayment	-	获取本次支付token
switchTheme	string	切换主题
setDisabled	Boolean	设置组件可用状态
setPayButtonStyle	string	设置按钮样式

1.4.1 emit.canMakePayment

检查当前组件状态是否具备发起支付条件，如果校验通过则返回卡标识。

canMakePayment Response：

Code码	描述
APPLY_SUCCESS	成功获取 paymentToken
UNKNOWN_ISSUE	异常信息

1.4.2 emit.switchTheme

• 设置按钮主题
• 类型： Boolean
• 默认：light

主题名称	主题编码	效果预览
白色	light 默认
黑色	dark

1.4.3 emit.setDisabled

• 设置组件可用状态
• 类型 Boolean
• 默认：false

// 按钮不可用状态
PMdropin.emit('setDisabled', true)

// 按钮可用状态
PMdropin.emit('setDisabled', false)

1.4.4 emit.setPayButtonStyle

• 设置按钮样式
• 类型： Boolean
• 默认：false

// 设置ApplePay按钮宽高、内边距、边框弧度
PMdropin.emit('payButtonStyle', `width:20rem;height:4rem;border-radius: 4rem;padding:1rem 4rem;`)