> 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/codapay/hosted-component-integration/cards/styling-and-customization.md).

# Styling & Customization

This reference outlines the configuration options available for customizing the visual appearance of the CodaCard secure fields. You can adjust the form's style to match your brand's identity by passing a `customStyle` object within the `appearance` parameter during initialization.

### Customizing the Form Style

To style your components, define a `customStyle` object. This object supports a variety of CSS-like properties that control everything from typography to field borders.

#### `appearance.customStyle` Properties

The following attributes are currently supported. If you require additional fields for your integration, they can be extended upon request.

<table><thead><tr><th width="311.97265625">Property</th><th>Description</th></tr></thead><tbody><tr><td><code>backgroundColor</code></td><td>The background color of the form container.</td></tr><tr><td><code>fontFamily</code></td><td>The font family used for labels and input text.</td></tr><tr><td><code>fontWeight</code></td><td>The thickness of the text.</td></tr><tr><td><code>fontSize</code></td><td>The size of the text within the fields.</td></tr><tr><td><code>borderRadius</code></td><td>The roundness of the input field corners.</td></tr><tr><td><code>verticalSpacing</code></td><td>The vertical margin between form elements.</td></tr><tr><td><code>horizontalSpacing</code></td><td>The horizontal margin between adjacent fields.</td></tr><tr><td><code>titleColor</code></td><td>The color of the section titles.</td></tr><tr><td><code>fieldBackgroundColor</code></td><td>The background color of the individual input fields.</td></tr><tr><td><code>fieldLabelColor</code></td><td>The color of the labels above or inside the fields.</td></tr><tr><td><code>fieldTextColor</code></td><td>The color of the text entered by the user.</td></tr><tr><td><code>fieldBorderColor</code></td><td>The color of the input field borders in their default state.</td></tr><tr><td><code>fieldFocusBorderColor</code></td><td>The color of the border when a field is focused.</td></tr><tr><td><code>fieldPlaceholderColor</code></td><td>The color of the placeholder hint text.</td></tr><tr><td><code>checkBoxActiveBackgroundColor</code></td><td>The background color of a checkbox when checked.</td></tr><tr><td><code>checkBoxDeactiveBackgroundColor</code></td><td>The background color of a checkbox when unchecked.</td></tr><tr><td><code>checkBoxBorderWidth</code></td><td>The thickness of the checkbox border.</td></tr><tr><td><code>checkMarkColor</code></td><td>The color of the checkmark icon itself.</td></tr></tbody></table>

### Implementation Example

Pass the `customStyle` object inside the `appearance` property when calling `codaCard.components()`.

**Code Example**

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

### Affected Elements

The styles defined in `customStyle` are automatically applied across all relevant sub-components in the payment form, including:

* Card Entry Fields: Card Number, Expiry, and Security Code.
* Customer Info: Cardholder Name and Email fields.
* Identity Fields: Document ID and Birth Date (if enabled).
* Selection Elements: Checkboxes and Saved Card list items.


---

# 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/codapay/hosted-component-integration/cards/styling-and-customization.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.