> For the complete documentation index, see [llms.txt](https://coda-payments.gitbook.io/coda-public-technical-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://coda-payments.gitbook.io/coda-public-technical-documentation/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.