Customization

You can customize our card components in the following ways.

1. Localization

Use our localization settings to change the language of your payment form or customize your language.

1.1 Use Preset Languages

You can quickly set localization parameters in our preset language list. such as language: 'zh'. The supported preset languages are as follows:

Languages	Language Code
English	en Default
Chinese	zh

• Example for Initialization:

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

• Or switch languages dynamically:

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

1.2 Customize language

When our preset languages cannot meet your bussiness scenario, you can use customLocalization to customize language.

• Example for Initialization:

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

• Or add languages dynamically:

PMdropin.emit('addLocalization', {
  'zh': {
    // The parameters are shown as above
  }
});

2. Theme Style

Use our theme features to help you build a style that better suits your website.

2.1 Use Preset Themes

Two preset colors are set already, you can use theme to customize theme. The supported preset themes are as follows:

Theme Name	Theme Code
White	light Default
Black	dark

• Example for Initialization:

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

• Or change dynamically:

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

2.2 Custominze Themes

You can modify the style by customizing the theme package. Examples are as follows:

PMdropin.create('card', {
  clientKey: '',
  sessionKey: '',
  customTheme: [
    {
      // Topic name [required]
      name: 'red', 
      // Style used to fill the background color [optional]
      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;
        }`
    }
  ]
});

• Or add themes dynamically:

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