<div id="integration-guide">

<div class="ig-section">
<div class="ig-section-header">
<div class="ig-section-icon embedded-components"><i class="fas fa-paint-brush"></i></div>
<h2>Customize Split Card Elements</h2>
</div>
<p class="ig-section-desc">Customise each individual card field's appearance using theme presets, CSS variables, and element-specific options.</p>

<div class="ig-subsection">
<h3>cardNumber Options</h3>

<table class="ig-comparison">
<thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr><td><code>showIcon</code></td><td><code>boolean</code></td><td>Show the card brand icon (default: false)</td></tr>
<tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Disable user input</td></tr>
</tbody>
</table>
</div>

<div class="ig-subsection">
<h3>cardExpiry / cardCvc Options</h3>

<table class="ig-comparison">
<thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Disable user input</td></tr>
</tbody>
</table>
</div>

<div class="ig-subsection">
<h3>Theme Presets &amp; Variables</h3>
<p>Split card elements use the same theme presets and CSS variables as all other elements. See <a href="/partners/online-payments/embedded-components/checkout/customize">Embedded Checkout Customize</a> for the full reference on themes, variables, custom CSS rules, fonts, and locales.</p>
</div>

<div class="ig-subsection">
<h3>Callbacks</h3>

<table class="ig-comparison">
<thead>
<tr>
<th>Callback</th>
<th>Available on</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr><td><code>onReady</code></td><td>All fields</td><td>Fired when the field is ready</td></tr>
<tr><td><code>onChange</code></td><td>All fields</td><td>Fired when field state changes (cardNumber includes <code>brand</code>)</td></tr>
<tr><td><code>onFocus</code></td><td>All fields</td><td>Fired when the field gains focus</td></tr>
<tr><td><code>onBlur</code></td><td>All fields</td><td>Fired when the field loses focus</td></tr>
</tbody>
</table>

```admonition
icon: fas fa-info-circle
title: Payment submission
content: Split card fields do not have `submitPayment()`. Use `teya.elements.submitPayment()` to submit payments with split card elements.
```
</div>

</div>
</div>
