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

# SDK fails to load - Elements SDK

> Why the Elements SDK can fail to load, and how to detect and recover from it.

`loadRadiumOne()` (npm) or the CDN `<script>` tag can fail to load — from a blocked network request, a Subresource Integrity (SRI) mismatch, or a slow connection. Detect this before the shopper reaches the pay button.

<Info>
  TL;DR: `loadRadiumOne()` rejects, or the CDN script never runs → catch it, check CSP/SRI first, then retry once before falling back to a page reload.
</Info>

## When this happens

* The CDN script request is blocked or fails (ad blocker, firewall, DNS failure, offline).
* The request doesn't complete within 10 seconds — `loadRadiumOne()` enforces a fixed 10-second deadline and rejects if the script hasn't loaded by then.
* The browser's own SRI check fails (the `integrity` hash on the `<script>` tag doesn't match the fetched file). This blocks the script **silently** — no `error` event, no rejected promise — because it's the browser's own security enforcement, not the SDK's.

## What you see

| Signal | Value |
| - | - |
| `loadRadiumOne()` promise | Rejects with `Error: RadiumOne SDK failed to load within 10s` (timeout) or `Error: Failed to load RadiumOne SDK from CDN` (network/`script.onerror`) |
| `window.RadiumOneSDK` | `undefined` |
| SRI mismatch | No JS error at all — check the browser console/network tab for an "integrity" or "SRI" violation message |

## What to do

<Steps>
  <Step title="Catch the rejection">
    Wrap `loadRadiumOne()` in a `try`/`catch` (or handle the rejected promise) and show a fallback — don't let an unhandled rejection block the rest of your checkout page.

    ```js theme={null}
    let radiumone;
    try {
      radiumone = await loadRadiumOne("r1pk_test_YOUR_KEY");
    } catch (err) {
      showError("Payment fields are unavailable. Please refresh the page.");
      // err.message is developer-facing; log it, don't show it to the shopper
    }
    ```
  </Step>

  <Step title="Rule out CSP or SRI first">
    Check the browser console for a Content Security Policy or SRI violation before assuming a network issue. See [Content Security Policy](/elements/content-security-policy) for the `script-src`/`frame-src` directives Elements needs, and [Subresource Integrity](/elements/install-and-load#subresource-integrity) for the `integrity` hash.
  </Step>

  <Step title="Retry once, then stop">
    A transient network blip can resolve on a single retry. Don't retry in a tight loop — if the second attempt also fails, show the fallback and let the shopper reload the page instead.
  </Step>
</Steps>

## Prevent it

* Load with npm (`loadRadiumOne()`) rather than a hand-copied CDN tag — the SRI hash is baked in at publish time, so there's nothing to get out of sync. See [Install and load Elements](/elements/install-and-load).
* If you use the CDN tag directly, pin the immutable `/elements/v<X.Y.Z>/` path and copy the `integrity` hash from that version's release notes, not from the manifest served at the same path.
* Roll out CSP changes as `Content-Security-Policy-Report-Only` first so a missing `script-src`/`frame-src` directive shows up in reports instead of silently blocking the SDK in production.

## Test it

See [Test your integration](/resources/test-your-integration#elements) for sandbox test cards and scenarios.

## Related

<Columns cols={2}>
  <Card title="Install and load Elements" icon="download" href="/elements/install-and-load">
    npm, CDN, and React install paths, plus key-validation errors.
  </Card>

  <Card title="SDK and integration errors" icon="triangle-alert" href="/elements/errors/sdk-and-integration-errors">
    The full integration and SDK error code table.
  </Card>
</Columns>