定制化
您可以通过以下方式定制我们的卡组件。
1. 本地化
使用我们的本地化设置更改付款表单的语言，也可以自定义语言。
1.1 使用预置语言
您可以在我们预置语言列表中快速设置本地化参数。如language: 'zh'。 支持的预置语言如下：
| 语言 | 语言编码 |
|---|---|
| 英语 | en 默认 |
| 中文 | zh |
- 初始化示例：
js
PMdropin.create('card', {
clientKey: '',
sessionKey: '',
language: 'zh',
...
});- 或者动态切换语言：
js
PMdropin.emit('switchLanguage', 'zh')1.2 自定义语言
当我们预置语言无法满足您的使用场景，您可以通过customLocalization自定义语言。
- 初始化示例：
js
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: '为下次支付保存信息',
// 以下为新增多语言字段
// 本地卡额外采集要素
buyerEmail: '邮箱',
buyerEmailHint: '',
buyerEmailErrTip: '格式错误，请复核',
buyerFullName: '姓名',
buyerFullNameHint: '',
buyerFullNameErrTip: '格式错误，请复核',
buyerFirstName: '名',
buyerFirstNameHint: '',
buyerFirstNameErrTip: '格式错误，请复核',
buyerLastName: '姓',
buyerLastNameHint: '',
buyerLastNameErrTip: '格式错误，请复核',
// 秘鲁 Document(ID)
dni: 'DNI',
dniHint: '',
dniErrTip: '格式错误，请复核',
// 阿根廷 Document(ID)
dni_cuit: 'DNI/CUIT',
dni_cuitHint: '',
dni_cuitErrTip: '格式错误，请复核',
// 南非 Document(ID)
idCard: 'ID',
idCardHint: '',
idCardErrTip: '格式错误，请复核',
// 哥伦比亚 Document(ID)
cc: 'CC',
ccHint: '',
ccErrTip: '格式错误，请复核',
// 墨西哥 Document(ID)
curp: 'CURP',
curpHint: '',
curpErrTip: '格式错误，请复核',
// 巴西 Document(ID)
cpf: 'CPF',
cpfHint: '',
cpfErrTip: '格式错误，请复核',
// 智利/巴拉圭/乌拉圭 Document(ID)
ci: 'CI',
ciHint: '',
ciErrTip: '格式错误，请复核',
buyerPhoneNo: '手机号码',
buyerPhoneNoHint: '',
buyerPhoneNoErrTip: '格式错误，请复核',
buyerPhoneNoRegion: '手机区号',
buyerPhoneNoRegionHint: '',
buyerPhoneNoRegionErrTip: '格式错误，请复核',
}
},
...
});- 或者动态添加语言：
js
PMdropin.emit('addLocalization', {
'zh': {
// 参数如上所示
}
});2. 主题样式
使用我们的主题功能，帮助您构建一个更加符合自身网站的样式搭配。
2.1 使用预置主题
我们预置了两款主题色，您可以通过theme自定义主题。 支持的预置主题如下：
| 主题名称 | 主题编码 |
|---|---|
| 白色 | light 默认 |
| 黑色 | dark |
- 初始化示例：
js
PMdropin.create('card', {
clientKey: '',
sessionKey: '',
theme: 'dark'
});- 或者动态切换：
js
PMdropin.emit('switchTheme', 'dark');2.2 自定义主题
您可以通过自定义主题包来修改样式，示例如下：
js
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;
}`
}
]
});- 或者动态添加主题：
js
PMdropin.emit('addTheme', [
{
name: 'red',
base: 'light',
style: ''
}
]);