# Migration to Checkout V1 (iFrame fields)

The Checkout SDK renders card payment fields inside secure iFrames instead of native browser inputs. This change reduces your PCI DSS scope — sensitive card data (card number, expiry, CVV, and cardholder name) no longer enters your page.

important

Native card inputs will be fully removed on **June 3, 2026**. After that date, all checkout sessions will use iFrame-based fields exclusively.

## Is action required?

Update your SDK dependency to the latest release:

```
npm install @odus/checkout@latest
```

Use version `1.12.0` or later before 4 November 2026. Version `1.12.0` is the first SDK release that calls only API v2. SDK versions that call API v1 routes stop working when v1 stops being served.

Beyond the version bump, the iFrame migration is automatic and server-managed. Your existing SDK initialization code, callbacks, and payment flow remain unchanged:

* `OdusCheckout` / `OdusElements` — same constructor options
* `mount()` — same behavior
* `associatePayment()` — same behavior
* `onPaymentSucceeded` / `onPaymentFailed` — same callback signatures

If you have not customized the checkout beyond the documented `appearance` configuration, no additional changes are needed.

## What changed

| Aspect                                    | Before (native inputs)                                   | After (iFrame fields)                               |
| ----------------------------------------- | -------------------------------------------------------- | --------------------------------------------------- |
| Card number, expiry, CVV, cardholder name | Rendered as `<input>` elements directly in your page DOM | Rendered inside secure iFrames managed by ODUS      |
| PCI scope                                 | Card data passes through your page                       | Card data is isolated — never touches your page     |
| Field loading                             | Immediate                                                | Brief skeleton placeholder while iFrames initialize |

## Behavioral differences

You and your customers may notice these minor UX changes:

1. **Loading skeleton** — Card fields display a brief placeholder animation while iFrames load. This typically resolves within 1–2 seconds on a standard connection.

## Styling considerations

If your integration relies on custom CSS that directly targets card input elements (e.g., styling `.form-input` or `input[name="cardNumber"]`), those selectors will no longer reach the fields inside iFrames.

Instead, use the SDK's built-in styling options:

* **Drop-in Checkout** — configure `appearance.styles` (borderRadius, fontFamily, fontSize, textColor) as documented in the [Appearance guide](https://docs.odus.com/docs/guides/checkout/drop-in/appearance.md)
* **Elements** — use `applyTheme()` or per-element `setTheme()` as documented in the [Theming guide](https://docs.odus.com/docs/guides/checkout/elements/theming.md)

tip

The `appearance.styles.borderRadius`, `appearance.styles.fontFamily`, and `appearance.styles.fontSize` options are fully applied to iFrame fields. If your checkout already uses these options, the fields will look identical to before.