# 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 →](https://docs.odus.com/docs/guides/checkout/drop-in/getting-started.md)**

### 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 →](https://docs.odus.com/docs/guides/checkout/elements/getting-started.md)**

## 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? Read the [Choosing Between Drop-in and Elements](https://docs.odus.com/docs/guides/checkout/choosing-integration.md) guide for a detailed comparison with a decision flowchart. You can also try the interactive [Drop-in Builder](https://docs.odus.com/docs/guides/checkout/drop-in/builder.md) or [Elements Builder](https://docs.odus.com/docs/guides/checkout/elements/builder.md) to experiment directly in your browser.