Skip to main content
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

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 instance — from RadiumOne.init() (CDN) or loadRadiumOne() (npm/React). RadiumOne creates an Elements group (radiumone.elements()), which creates one or more Element card fields (elements.create(type)); independently, RadiumOne can also create a ThreeDS 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 for the full trust-boundary picture; the 3D Secure challenge authenticates through the same gateway.

​
Packages

​
Runtime objects

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.
  • Appearance and theming — appearance on elements()/ElementsOptions, applied per-field or per-group. See Customize appearance.
  • Error types — every thrown error is an ElementsError (plus a couple of 3DS-specific subclasses). See Elements SDK errors.

​
Next steps

Elements SDK architecture

Where these pieces sit relative to the shopper’s browser, your server, and RadiumOne.

Install and load Elements

Step-by-step setup for npm, CDN, and React.

Elements SDK reference

Full method and event signatures for every object on this page.

3D Secure with Elements

Add the ThreeDS module to an existing integration.
Last modified on September 15, 2026