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
• Elements — use applyTheme() or per-element setTheme() as documented in the Theming guide

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.