> For the complete documentation index, see [llms.txt](https://docs.omni.integratedcommerce.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.omni.integratedcommerce.io/payment-sdk/theming.md).

# Theming

Match the payment form to your brand with the theme option.

Pass a `theme` object to customize the payment form and its card fields.

```javascript
ic.payment.v1.mount({
  sessionId: "...",
  container: "#payment-container",
  theme: {
    primary: "#7c3aed",
    primaryHover: "#6d28d9",
    borderRadius: "8px",
    textColor: "#111827",
  },
});
```

## Theme examples

{% columns %}
{% column %}

<figure><img src="https://2831455276-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZEhfhCESvZbNNPd1VI61%2Fuploads%2Fgit-blob-90024147a36326086453df7991d9a7ddc304b100%2Fhpf.png?alt=media" alt="Payment form with a light background and navy payment button"><figcaption><p>A light appearance for the payment form.</p></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://2831455276-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZEhfhCESvZbNNPd1VI61%2Fuploads%2Fgit-blob-86bfa195571c8551b1e35826c41e3cad87554db6%2Fhpf-dark-theme.png?alt=media" alt="Payment SDK form with a custom dark background and warm text colors"><figcaption><p>A custom theme applied to a checkout with a dark background.</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

## Why theming is the only styling route

The form is a Custom Element with Shadow DOM, so your page's stylesheets do not reach inside it. That isolation is deliberate: it keeps the card fields visually predictable and prevents your CSS from accidentally hiding or overlaying them.

{% hint style="warning" %}
Do not try to reach into the component with `::part`, `!important`, or DOM traversal. Internal structure is not a supported API and can change between SDK releases. If `theme` does not cover something you need, contact <support@integratedcommerce.io>.
{% endhint %}

## Accessibility

Theme colours are yours to choose, which makes contrast your responsibility. Keep text and interactive elements at a contrast ratio of at least 4.5:1 against their background - a payment form that a customer cannot read is a payment you do not take.