\n );\n}\n```\n\nTab navigation between split fields is handled automatically.\n\n### Element Props\n\nAll element components accept these props:\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `onChange` | `(event: ChangeEvent) => void` | Field value/validity changed |\n| `onReady` | `(event: ReadyEvent) => void` | Iframe loaded, field is interactive |\n| `onFocus` | `(event: FocusEvent) => void` | Field received focus |\n| `onBlur` | `(event: BlurEvent) => void` | Field lost focus |\n| `options` | `CreateElementOptions` | `{ showIcon, autoAdvance }` — set once at mount |\n| `className` | `string` | CSS class for the container `
` |\n| `id` | `string` | ID for the container `
` |\n| `style` | `CSSProperties` | Inline styles for the container `
` |\n\n`` also accepts:\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `onCardTypeChange` | `(event: CardTypeChangeEvent) => void` | Detected card brand changed |\n\nAll standard `
` HTML attributes are forwarded to the container element.\n\n## Hooks\n\n### `useElements()`\n\nReturns the `Elements` instance (or `null` while loading / during SSR).\n\n```tsx\nfunction PayButton() {\n const elements = useElements();\n\n const handlePay = async () => {\n if (!elements) return;\n const result = await elements.submit({ sessionId, sessionSecret, pubkeyJws });\n // result.token, result.lastFour, result.cardBrand\n };\n\n return ;\n}\n```\n\n### `useRadiumOne()`\n\nReturns the `RadiumOne` SDK instance (or `null`). Rarely needed — use `useElements()` for most cases.\n\n## Imperative methods\n\n`useElements()` returns the same `Elements` instance the vanilla SDK exposes —\nReact doesn't proxy individual element refs. Reach a specific element via\n`elements.getElement(type)`:\n\n```tsx\nimport { useElements, CardElement } from '@cubepay/react-radiumone-js';\n\nfunction PaymentForm() {\n const elements = useElements();\n return (\n <>\n \n \n \n \n );\n}\n```\n\n`getElement(type)` returns `null` until the matching `` (or\nsplit-field component) has mounted.\n\n## SSR / Next.js\n\nWorks out of the box with Next.js App Router and Pages Router.\n\n- During server render, components render empty `
` containers\n- `loadRadiumOne()` returns `null` on the server (no `window`)\n- SDK initializes client-side only after hydration\n- `useElements()` and `useRadiumOne()` return `null` during SSR\n\n```tsx\n// app/checkout/page.tsx (Next.js App Router)\n'use client';\n\nimport { loadRadiumOne } from '@cubepay/radiumone-js';\nimport { RadiumOneProvider, CardElement } from '@cubepay/react-radiumone-js';\n\nconst radiumonePromise = loadRadiumOne('r1pk_prod_your_key');\n\nexport default function CheckoutPage() {\n return (\n \n { /* ... */ }} />\n \n );\n}\n```\n\n## TypeScript\n\nFull type definitions included. Import types from either package:\n\n```tsx\nimport type { ChangeEvent, BindResult, CardBrand } from '@cubepay/radiumone-js';\nimport type { BaseElementProps, CardNumberElementProps } from '@cubepay/react-radiumone-js';\n```\n\n## Requirements\n\n- React 18+ or React 19+\n- `@cubepay/radiumone-js` (peer dependency)\n- HTTPS (secure context required for Web Crypto API)\n\n## License\n\nProprietary. See LICENSE.md in the published package for details.\n","readmeFilename":"README.md"}