造型与定制

本文档概述了可用于自定义 CodaCard 安全字段视觉外观的配置选项。您可以在初始化期间通过appearance参数传递一个customStyle对象来调整表单样式，使其与您的品牌标识相匹配。

自定义表单样式

要设置组件样式，请定义一个customStyle对象。该对象支持各种类似 CSS 的属性，可以控制从字体到字段边框的所有内容。

appearance.customStyle特性

目前支持以下属性。如果您需要其他字段以进行集成，可以根据要求进行扩展。

backgroundColor	表单容器的背景颜色。
fontFamily	用于标签和输入文本的字体系列。
fontWeight	文字的粗细。
fontSize	字段内文本的大小。
borderRadius	输入框边角的圆角程度。
verticalSpacing	表单元素之间的垂直边距。
horizontalSpacing	相邻字段之间的水平间距。
titleColor	章节标题的颜色。
fieldBackgroundColor	各个输入框的背景颜色。
fieldLabelColor	字段上方或字段内部标签的颜色。
fieldTextColor	用户输入的文本颜色。
fieldBorderColor	输入字段边框的默认颜色。
fieldFocusBorderColor	当焦点对准某个区域时，边框的颜色。
fieldPlaceholderColor	占位符提示文本的颜色。
checkBoxActiveBackgroundColor	复选框选中时的背景颜色。
checkBoxDeactiveBackgroundColor	复选框未选中时的背景颜色。
checkBoxBorderWidth	复选框边框的粗细。
checkMarkColor	对勾图标本身的颜色。

实现示例

调用时将对象传递到属性customStyle中。appearancecodaCard.components()

代码示例

const components = codaCard.components({
  clientSecret: 'eyJ...',
  appearance: {
    customStyle: {
      fontFamily: 'Roboto, sans-serif',
      fontSize: '14px',
      borderRadius: '8px',
      fieldBorderColor: '#D1D5DB',
      fieldFocusBorderColor: '#3B82F6',
      checkBoxActiveBackgroundColor: '#3B82F6'
    }
  }
});

受影响的元素

此处定义的样式customStyle将自动应用于支付表单中的所有相关子组件，包括：

• 卡片输入字段：卡号、有效期和安全码。

• 客户信息：持卡人姓名和电子邮件地址。

• 身份字段：文档 ID 和出生日期（如果启用）。

• 选择元素：复选框和已保存卡片列表项。