Skip to content

详细配置

本页详细介绍卡组件所有配置详情。

1. API

使用方法 PMdropin.API

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

1.1 create

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

ComponentName详解

ComponentName字段类型描述
cardstring卡组件

Options详解

Options是否必填字段类型描述默认值
clientKeyYString客户端公钥-
sessionKeyYString安全访问令牌-
sandboxNBoolean沙盒环境false
languageNString语言en
themeNString主题light
customLocalizationNObject自定义语言-
customThemeNObject自定义主题-
grayscaleNString页面灰度'0'
isRtlNBoolean从右到左false
hideSaveCardNBoolean隐藏Save保存false
hideCardBrandsNBoolean隐藏头部卡组织LOGOfalse
hideCardHolderNameNBoolean隐藏卡姓名false

1.2 mount

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

Tag详解

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

1.3 on

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

Event详解

Tag描述返回值
ready组件加载完成时触发null
form-check实时监听卡组件校验状态参阅下方 Event Response

示例:

PMdropin.on('form-check', function(event) {
  if (event.isFormValid) {
    // 表单校验通过
  }
});

1.4 emit

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

EventParams描述
canMakePayment-获取卡标识
switchLanguagestring切换语言
switchThemestring切换主题
addLocalizationObject添加自定义语言
addThemeObject添加自定义主题
setDisabledBoolean设置组件可用状态
setRtlBoolean设置组件从右到左布局
setGrayscalestring设置组件页面灰度
1.4.1 emit.canMakePayment

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

// 示例
PMdropin.emit('canMakePayment')
  .then(function(response) {
    // 验证成功
    if (response.code === 'APPLY_SUCCESS') {
      // 获取 paymentToken 
      var paymentToken = response.data.paymentToken
      // 进行后续支付操作
    }
  })
  .catch(function(error) {
    // 捕获内部异常错误
    console.log(error);
  })

canMakePayment Response:

// 接口成功示例
{
  code: 'APPLY_SUCCESS',
  data: {
    // 卡标识
    paymentToken: 'xxx'
  },
  msg: ''
}

// 接口失败示例
{
  code: 'FORM_INVALID',
  msg: 'Invalid params: cvv'
}
CODE码描述
APPLY_SUCCESS成功获取 paymentToken
FORM_INVALID表单校验失败
UNKNOWN_ISSUE异常信息
1.4.2 emit.switchLanguage
1.4.3 emit.switchTheme
1.4.4 emit.addLocalization
1.4.5 emit.addTheme
1.4.6 emit.setDisabled
  • 设置组件可用状态
  • 类型 Boolean
  • 默认:false
// 不可编辑状态
PMdropin.emit('setDisabled', true)

// 可编辑状态
PMdropin.emit('setDisabled', false)

1.4.7 emit.setRtl
  • 设置组件从右到左布局
  • 类型: Boolean
  • 默认:false
// 从右到左布局
PMdropin.emit('setRtl', true)

// 从左到右布局
PMdropin.emit('setRtl', false)

1.4.8 emit.setGrayscale
  • 设置组件页面灰度
  • 类型: String
  • 默认:0
// 设置 0 - 1 灰度值
PMdropin.emit('setGrayscale', '1')

Released under the MIT License.