> ## 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.

# Overview - Elements SDK

> Drop-in, PCI-reducing card fields for your own checkout page — tokenize card data in a RadiumOne-hosted iframe before it ever reaches your server.

* **Your own checkout UI** — Elements replaces only the card fields.
* **Tokenized in the iframe** — your JavaScript never sees the card number.
* **JavaScript or React** — use the npm packages or the CDN build.
* Start here: [Accept a card payment](/elements/accept-a-card-payment) · [SDK reference](/elements/reference/radiumone)

RadiumOne Elements is a JavaScript SDK that renders card input fields inside sandboxed, RadiumOne-hosted iframes on your own checkout page. Shoppers type their card details directly into the iframe — your website's JavaScript never sees the raw card number, expiry, or CVV.

## Why Elements

* **You keep your own checkout UI.** Elements only replaces the card input fields; the rest of the page (cart, shipping, your branding) is yours.
* **Tokenization happens in the iframe.** When you call `submit()`, the iframe encrypts the card data and exchanges it for an opaque, single-use token directly with RadiumOne — your server only ever handles the token.
* **Works with or without 3D Secure.** Use Elements alone for card-only payments, add [RadiumOne 3D Secure](/elements/three-d-secure/add-three-d-secure), or run your own 3DS provider alongside Elements.

With Elements, card fields render inside RadiumOne-hosted iframes and tokenize the card before it reaches your server. Your website never touches raw card data, which keeps your PCI DSS scope reduced compared to handling card numbers directly.

## Packages

| Package | Use |
| - | - |
| `@cubepay/radiumone-js` | Core SDK — works with any framework, including plain HTML/JS |
| `@cubepay/react-radiumone-js` | React components and hooks built on the core package |

There's also a CDN script-tag build if you don't want an npm dependency. See [Install and load Elements](/elements/install-and-load), or [Modules and packages](/elements/modules-and-packages) for how the packages, runtime objects, and iframes all connect — Elements has more moving parts than a single `<script>` tag once you add 3D Secure.

## What's in this tab

| Page | What it's for |
| - | - |
| [Architecture](/elements/architecture) | Where Elements sits, and the trust boundaries that keep card data out of your systems |
| [Modules and packages](/elements/modules-and-packages) | Every package and runtime object, and which one you need |
| [Install and load Elements](/elements/install-and-load) | Add the SDK with npm, CDN, or React |
| [Accept a card payment](/elements/accept-a-card-payment) | Mount a card field and charge your first test payment |
| [Card fields and events](/elements/card-fields-and-events) | Split fields, validation states, and events |
| [Add 3D Secure](/elements/three-d-secure/add-three-d-secure) | Authenticate a card before charging it |
| [Content Security Policy](/elements/content-security-policy) | The CSP directives Elements needs |
| [Handle failures](/elements/handle-failures/overview) | Recover from load, tokenization, session, and 3D Secure failures |
| [Elements SDK errors](/elements/errors/error-object-and-handling) | The full `ElementsError` reference |
| [Elements SDK reference](/elements/reference/radiumone) | Method and event signatures |

## Browser support

| Browser | Minimum version |
| - | - |
| Chrome | 90 |
| Firefox | 90 |
| Safari | 14 (15.4+ for split card fields) |
| Edge | 90 |

Elements requires a secure context (HTTPS) and the Web Crypto API. Split card fields (separate number/expiry/CVV inputs) additionally require `BroadcastChannel`, available in Safari 15.4+.

## Next steps

<Columns cols={2}>
  <Card title="Architecture" icon="layout-panel-top" href="/elements/architecture">
    Where Elements sits, and the trust boundaries that keep card data out of your systems.
  </Card>

  <Card title="Install and load Elements" icon="download" href="/elements/install-and-load">
    Add the SDK to your page with npm, CDN, or React — the first guide.
  </Card>

  <Card title="Accept a card payment" icon="credit-card" href="/elements/accept-a-card-payment">
    Mount a card field and charge your first test payment.
  </Card>

  <Card title="Handle failures overview" icon="list-checks" href="/elements/handle-failures/overview">
    Find the right recovery guide by symptom — load, tokenization, session, or 3D Secure.
  </Card>
</Columns>