> For the complete documentation index, see [llms.txt](https://docs.coda.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.coda.co/https-coda-payments.gitbook.io-zhong-wen-coda-private-technical-documentation/codapay/tuo-guan-zu-jian-ji-cheng/ka-pian/zao-xing-yu-ding-zhi.md).

# 造型与定制

#### 自定义表单样式 <a href="#customizing-the-form-style" id="customizing-the-form-style"></a>

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

**`appearance.customStyle`特性**

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

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

#### 实现示例 <a href="#implementation-example" id="implementation-example"></a>

调用时将对象传递到属性`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'
    }
  }
});
```

#### 受影响的元素 <a href="#affected-elements" id="affected-elements"></a>

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

* 卡片输入字段：卡号、有效期和安全码。
* 客户信息：持卡人姓名和电子邮件地址。
* 身份字段：文档 ID 和出生日期（如果启用）。
* 选择元素：复选框和已保存卡片列表项。

[<br>](https://coda-payments.gitbook.io/coda-public-technical-documentation/codapay/hosted-component-integration/cards/check-a-transaction-status)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.coda.co/https-coda-payments.gitbook.io-zhong-wen-coda-private-technical-documentation/codapay/tuo-guan-zu-jian-ji-cheng/ka-pian/zao-xing-yu-ding-zhi.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.