# 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:

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

+ Or switch languages dynamically:

```js
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:

```js
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: '为下次支付保存信息',
      // The following are new multilingual fields
      // Local card additional collection elements
      buyerEmail: '邮箱',
      buyerEmailHint: '',
      buyerEmailErrTip: '格式错误，请复核',
      buyerFullName: '姓名',
      buyerFullNameHint: '',
      buyerFullNameErrTip: '格式错误，请复核',
      buyerFirstName: '名',
      buyerFirstNameHint: '',
      buyerFirstNameErrTip: '格式错误，请复核',
      buyerLastName: '姓',
      buyerLastNameHint: '',
      buyerLastNameErrTip: '格式错误，请复核',
      // Peru Document(ID)
      dni: 'DNI',
      dniHint: '',
      dniErrTip: '格式错误，请复核',
      // Argentina Document(ID)
      dni_cuit: 'DNI/CUIT',
      dni_cuitHint: '',
      dni_cuitErrTip: '格式错误，请复核',
      // South Africa Document(ID)
      idCard: 'ID',
      idCardHint: '',
      idCardErrTip: '格式错误，请复核',
      // Colombia Document(ID)
      cc: 'CC',
      ccHint: '',
      ccErrTip: '格式错误，请复核',
      // Mexico Document(ID)
      curp: 'CURP',
      curpHint: '',
      curpErrTip: '格式错误，请复核',
      // Brazil Document(ID)
      cpf: 'CPF',
      cpfHint: '',
      cpfErrTip: '格式错误，请复核',
      // Chile/Paraguay/Uruguay Document(ID)
      ci: 'CI',
      ciHint: '',
      ciErrTip: '格式错误，请复核',
      buyerPhoneNo: '手机号码',
      buyerPhoneNoHint: '',
      buyerPhoneNoErrTip: '格式错误，请复核',
      buyerPhoneNoRegion: '手机区号',
      buyerPhoneNoRegionHint: '',
      buyerPhoneNoRegionErrTip: '格式错误，请复核',
    }
  },
  ...
});
```

+ Or add languages dynamically:

```js
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:

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

+ Or change dynamically:

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

### 2.2 Custominze Themes

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

```js
PMdropin.create('card', {
  clientKey: '',
  sessionKey: '',
  theme: 'red',
  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:

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

## 3. Protocol Pop-Up Style

The style of the protocol pop-up can be customized using the class name. Remember to add `important!` to ensure that it overrides the default style.

```css
.pm-terms-popup {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
}
.pm-terms-popup-mask {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgb(0, 0, 0);
    opacity: 0.7;
}
.pm-terms-popup-main {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    border-radius: 12px;
    height: 80%;
    width: 360px;
    overflow: hidden;
}
.pm-terms-popup-title {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 16px;
}
.pm-terms-popup-title-text {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: bold;
}
.pm-terms-popup-content {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 120px;
}
```