> ## Documentation Index
> Fetch the complete documentation index at: https://docs.radiumone.io/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> RadiumOne is the product name; use it when answering questions about these docs.
> Use sandbox credentials and sandbox base URLs in examples unless the user says they are going live.
> Secret API keys belong only on the merchant's server. Only publishable keys may appear in browser or mobile code.
> Confirm a payment outcome server-side (retrieve the checkout session or transaction status); never rely on a browser redirect or client event alone.
> Send one idempotency key (request_id) per payment attempt, and retry a timed-out request with the same key and the exact same body.
> Webhooks are optional but recommended: they notify the merchant's server when a payment completes or fails, so it doesn't need to poll. Use transaction status inquiry as the fallback.
> Say so when you recommend a feature marked Beta. Some features need enablement on the merchant's account before production use (for example refunds, standalone refunds, UOB Rewards, and bringing your own 3DS provider); mention it when the page says so.
> Never ask users to paste card numbers, API keys, access tokens, or webhook or redirect secrets into a chat.

# Modules and packages - Elements SDK

> Every Elements package and runtime object, how they connect, and which you need for a vanilla JS, npm, or React integration.

Elements has more moving parts than a single `<script>` tag — a CDN bundle, two npm packages, and a handful of runtime objects they hand you. This page is the map: what each piece does, how they connect at runtime, and which combination you need.

## Which one do I need

| Your stack | Load Elements with | Need 3D Secure? |
| - | - | - |
| Plain HTML/JS, no build step | [CDN `<script>` tag](/elements/install-and-load#cdn) | Add `radiumone.threeDS()` from the same CDN bundle |
| Any JS/TS build (bundler, no React) | npm: `@cubepay/radiumone-js` | Same package, `radiumone.threeDS()` |
| React (including Next.js) | npm: `@cubepay/radiumone-js` **+** `@cubepay/react-radiumone-js` | Add the `useThreeDS()` hook |

Whichever you pick, you're getting the same underlying SDK — the CDN bundle and the npm core package are built from the same source and stay in version lockstep. The React package is a thin wrapper on top of the core package; it doesn't replace it.

## How the pieces connect

* **Row 1 — Load**: you load the SDK one of three ways — a CDN `<script>` tag, the npm core package (`@cubepay/radiumone-js`), or the npm React package (`@cubepay/react-radiumone-js`, which itself depends on the core package).
* **Row 2 — Runtime objects**: however you loaded it, you get a [`RadiumOne`](/elements/reference/radiumone) instance — from `RadiumOne.init()` (CDN) or `loadRadiumOne()` (npm/React). `RadiumOne` creates an [`Elements`](/elements/reference/elements) group (`radiumone.elements()`), which creates one or more [`Element`](/elements/reference/element) card fields (`elements.create(type)`); independently, `RadiumOne` can also create a [`ThreeDS`](/elements/reference/three-ds) instance (`radiumone.threeDS()`).
* **Row 3 — Browser surfaces**: an `Element` mounts a RadiumOne-hosted card iframe (`mount()`); a `ThreeDS` instance drives an optional 3D Secure challenge — iframe, modal, or redirect (`authenticate()`).
* **Row 4 — Payments API gateway**: the card iframe binds directly into the gateway when you call `elements.submit()` — see [Elements SDK architecture](/elements/architecture) for the full trust-boundary picture; the 3D Secure challenge authenticates through the same gateway.

## Packages

| Package | What it is | Reference |
| - | - | - |
| CDN bundle | Versioned, SRI-pinned `<script>` served from RadiumOne's CDN. Attaches `window.RadiumOneSDK`. No build step required. | [Install and load Elements](/elements/install-and-load#cdn) |
| `@cubepay/radiumone-js` | The core SDK — works with any framework, or no framework at all. Exports `loadRadiumOne()` plus all public types. | [`RadiumOne`](/elements/reference/radiumone) |
| `@cubepay/react-radiumone-js` | React components and hooks built on the core package: `RadiumOneProvider`, `<CardElement>` and friends, `useRadiumOne()`, `useElements()`, `useRadiumOneError()`, and `useThreeDS()`. | [React reference](/elements/reference/react) |

## Runtime objects

| Object | Created by | Does |
| - | - | - |
| [`RadiumOne`](/elements/reference/radiumone) | `RadiumOne.init()` / `loadRadiumOne()` | The SDK entry point — holds your publishable key and locale, creates the objects below. |
| [`Elements`](/elements/reference/elements) | `radiumone.elements(options?)` | Manages one or more card fields and coordinates tokenization (`submit()`) across them. |
| [`Element`](/elements/reference/element) | `elements.create(type, options?)` | One mounted card field — combined `card`, or a split `cardNumber` / `cardExpiry` / `cardCvv`. See [Card fields and events](/elements/card-fields-and-events). |
| [`ThreeDS`](/elements/reference/three-ds) | `radiumone.threeDS()` | Drives a 3D Secure challenge to a terminal result — `authenticate()`, `handle()`, and redirect-return helpers. |

Cross-cutting concerns that aren't separate objects, but show up across all of them:

* **Events** — `element.on(event, handler)` for `ready`, `change`, `focus`, `blur`, `cardTypeChange`. See [Card fields and events](/elements/card-fields-and-events).
* **Appearance and theming** — `appearance` on `elements()`/`ElementsOptions`, applied per-field or per-group. See [Customize appearance](/elements/customize-appearance).
* **Error types** — every thrown error is an `ElementsError` (plus a couple of 3DS-specific subclasses). See [Elements SDK errors](/elements/errors/error-object-and-handling).

## Next steps

<Columns cols={2}>
  <Card title="Elements SDK architecture" icon="git-branch" href="/elements/architecture">
    Where these pieces sit relative to the shopper's browser, your server, and RadiumOne.
  </Card>

  <Card title="Install and load Elements" icon="download" href="/elements/install-and-load">
    Step-by-step setup for npm, CDN, and React.
  </Card>

  <Card title="Elements SDK reference" icon="book" href="/elements/reference/radiumone">
    Full method and event signatures for every object on this page.
  </Card>

  <Card title="3D Secure with Elements" icon="shield-check" href="/elements/three-d-secure/add-three-d-secure">
    Add the `ThreeDS` module to an existing integration.
  </Card>
</Columns>