Build a PCI-Safe Browser Checkout with Therius JS SDK
Step-by-step guide to building a PCI-safe browser checkout with Therius hosted fields or the drop-in widget — card numbers never touch your server.
When a customer types a card number into your checkout page, that number must never travel through your own server. Routing raw card data through your backend dramatically expands your PCI DSS compliance scope and creates a direct liability if your server is ever compromised. Therius’s JavaScript SDK eliminates this risk by rendering sensitive fields inside isolated iframes hosted on Therius infrastructure. Your page never sees the raw card number — instead, the SDK returns a short-lived, single-use nonce that your server exchanges for a charge. The nonce is useless outside the context of your merchant account and expires after 15 minutes.
Therius gives you two ways to collect card details in the browser:
Option A — Hosted Fields
Mount individual iframe inputs (card number, expiry, CVV) into your own form. You control 100 % of the layout and styling while Therius handles the sensitive data.
Option B — Checkout Widget
Drop in a fully pre-built payment form with saved-card support, 3DS handling, and wallet buttons. Fastest path to a production checkout.
Never pass raw card numbers from the browser to your own server and then forward them to Therius. Always collect card data through hosted fields or the checkout widget, and send only the resulting nonce to your backend. Passing raw card data through your server brings your entire infrastructure into PCI DSS scope.
Nonces are single-use and expire after 15 minutes. If the customer takes longer than that to complete checkout (for example, they stepped away), call sdk.createNonce() again before submitting to your server.
