Checkout SDK

Odus Checkout SDK provides two integration paths for accepting payments in your application. Both are part of the @odus/checkout package and share the same backend APIs, 3DS handling, and payment lifecycle — they differ in how much control you have over the UI.

Choose Your Integration

Drop-in Checkout (OdusCheckout)

A pre-built, full checkout form rendered into a single container. Ideal when you want to get up and running quickly with minimal frontend code.

• Single mount('#container') call renders the entire form (card inputs, pay button, error display, alternative payment methods)
• Highly customizable through configuration objects (appearance, layout, initialValues)
• Handles validation and authorization internally

Get started with Drop-in →

Elements (OdusElements)

Composable, headless individual input elements that you mount into your own layout. Ideal when you need full control over the checkout experience.

• Mount only the elements you need — unmounted elements are automatically skipped during validation and authorization
• Full layout control with Shadow DOM encapsulation per element
• CSS custom property theming via applyTheme() or per-element setTheme()
• You provide and control the pay button, form layout, and submission flow

Get started with Elements →

Comparison

Feature	Drop-in	Elements
Import	@odus/checkout	@odus/checkout/elements
Styles import	@odus/checkout/styles	Built-in (none needed)
UI control	Configuration-based	Full merchant layout
Layout control	appearance.layout config object	Mount elements anywhere in your DOM
Pay button	Built-in	Merchant-provided
Validation	Automatic on submit	validate() called by merchant
Authorization trigger	Built-in pay button	authorize() called by merchant
Shadow DOM	Single root for entire form	Per-element Shadow DOM
Styling approach	appearance.styles config object	CSS custom properties (applyTheme())
Ideal use case	Quick integration, standard layout	Custom checkout experiences

tip

Not sure which integration fits best? Try the interactive Drop-in Builder or Elements Builder to experiment with both approaches directly in your browser.