定制化配置

您可以通过以下方式定制我们的卡组件。

1. 本地化

使用我们的本地化设置更改付款表单的语言，也可以自定义语言。

1.1 使用预置语言

您可以在我们预置语言列表中快速设置本地化参数。如language: 'zh'。 支持的预置语言如下：

语言	语言编码
英语	en 默认
中文	zh

• 初始化示例：

PMdropin.create('card', {
  clientKey: '',
  sessionKey: '',
  language: 'zh',
  ...
});

• 或者动态切换语言：

PMdropin.emit('switchLanguage', 'zh')

1.2 自定义语言

当我们预置语言无法满足您的使用场景，您可以通过customLocalization自定义语言。

• 初始化示例：

PMdropin.create('card', {
  clientKey: '',
  sessionKey: '',
  customLocalization: {
    // 添加中文示例
    'zh': {
      loading: '加载中',
      loadingFailed: '加载失败',
      refresh: '刷新',
      confirm: '确定',
      cancel: '取消',
      removeCard: '移除卡',
      removeCardTip: '确定移除当前选中卡吗?',
      addNewCard: '使用新卡',
      useSavedCard: '使用已存卡',
      cardnum: '银行卡号',
      cardnumHint: 'XXXX XXXX XXXX XXXX',
      cardnumErrTip: '卡号不正确',
      cardbinErrTip: {
        // {cardOrg} 变量字段，无需翻译
        CARD_NOT_SUPPORT: '不支持{cardOrg}，请检查卡号或者更换其他卡重试',
        // {cardType} 变量字段，无需翻译
        CARD_INVALID: '不支持{cardType}的卡类型',
        CARD_NO_INVALID: '请确认卡号输入是否正确',
      },
      expdate: '过期日期',
      expdateHint: '月/年',
      expdateErrTip: '过期日期不正确',
      cvv: 'CVV/CVC',
      cvvHint: '123',
      cvvErrTip: 'CVV/CVC 格式不正确',
      name: '持卡人姓名',
      nameHint: 'XX XX',
      nameErrTip: '姓名格式不正确',
      saveCardInfoTip: '为下次支付保存信息'
    }
  },
  ...
});

• 或者动态添加语言：

PMdropin.emit('addLocalization', {
  'zh': {
    // 参数如上所示
  }
});

2. 主题样式

使用我们的主题功能，帮助您构建一个更加符合自身网站的样式搭配。

2.1 使用预置主题

我们预置了两款主题色，您可以通过theme自定义主题。 支持的预置主题如下：

主题名称	主题编码
白色	light 默认
黑色	dark

• 初始化示例：

PMdropin.create('card', {
  clientKey: '',
  sessionKey: '',
  theme: 'dark'
});

• 或者动态切换：

PMdropin.emit('switchTheme', 'dark');

2.2 自定义主题

您可以通过自定义主题包来修改样式，示例如下：

PMdropin.create('card', {
  clientKey: '',
  sessionKey: '',
  customTheme: [
    {
      // 主题名称【必填】
      name: 'red', 
      // 用于填充底色的样式【可选】
      base: 'light',
      style: `:root {
          /* --- common --- */
          --bg-primary: #ffffff;
          --color-primary: #3782ff;
          --border-color-primary: #eaeaea;
          --border-color-hover-primary: #dcdcdc;
          --font-size-primary: 13px;
          --border-radius-primary: 6px;
        
          /* --- frame --- */
          --padding-frame: 16px;
          --bg-color-frame: var(--bg-primary);
          --bg-color-mask: rgba(255, 255, 255, 0.8);
        
          /* --- text --- */
          --color-text-primary: #333333;
          --color-text-secondary: #666666;
          --color-text-tip: #c8c8c8;
          --color-text-error: #e64949;
        
          /* --- button --- */
          /* plain button */
          --bg-color-btn-plain: var(--bg-primary);
          --border-color-btn-plain: var(--border-color-primary);
          --border-color-hover-btn-plain: var(--border-color-hover-primary);
          --font-size-btn-plain: var(--font-size-primary);
          --border-radius-btn-plain: var(--border-radius-primary);
        
          /* text button */
          --color-btn: var(--color-primary);
          --color-active-btn: #2c68cc;
          --font-size-btn-text: var(--font-size-primary);
        
          /* --- input --- */
          --bg-color-input: var(--bg-primary);
          --border-color-input: var(--border-color-primary);
          --border-color-hover-input: var(--border-color-hover-primary);
          --border-color-focus-input: var(--color-primary);
          --shadow-color-focus-input: rgba(55, 130, 255, 0.2);
          --label-color-input: var(--color-text-primary);
          --label-color-focus-input: var(--color-primary);
          --action-color-input: var(--border-color-input);
          --action-color-hover-input: var(--border-color-hover-input);
          --action-color-active-input: #bbbbbb;
          --color-placeholder-input: #dcdcdc;
          --color-input: var(--color-text-primary);
          --font-size-input: 12px;
          --font-size-input-label: var(--font-size-input);
          --font-size-input-tip: var(--font-size-input);
          --height-input: 36px;
          --size-checkbox: 16px;
          --border-radius-input: var(--border-radius-primary);
          --border-radius-checkbox: calc(var(--border-radius-input)/2);
        
          /* --- item --- */
          --bg-color-item: var(--bg-primary);
          --bg-color-selected-item: #f5f9ff;
          --border-color-item: var(--border-color-primary);
          --border-color-hover-item: var(--border-color-hover-primary);
          --border-color-selected-item: var(--color-primary);
          --font-size-item: 15px;
          --height-item: 36px;
          --height-item-btn: var(--height-item);
          --height-selected-item: 48px;
          --border-radius-item: var(--border-radius-primary);
        
          /* --- others --- */
          --divider-color: #f4f4f4;
        }`
    }
  ]
});

• 或者动态添加主题：

PMdropin.emit('addTheme', [
  {
    name: 'red', 
    base: 'light',
    style: ''
  }
]);