Skip to main content

​
Elements

Ozura Elements are embeddable UI components that let you collect sensitive payment data — card numbers, CVVs, bank account numbers — on your own page while keeping that data completely off your servers. Each field runs inside an isolated iframe served from Ozura’s domain. Tokenization happens in the browser and talks directly to Vault. Your page never sees raw card or bank data — only a vault token.

​
Why Use Elements?

ElementsUsing the APICheckout
Your own UI / branding✅ Full control✅ Full control❌ Ozura-hosted page
Sensitive data on your server❌ Never⚠️ Yes — increases PCI scope❌ Never
Client-side integration required✅ Yes❌ No (backend only)❌ No
Requires merchant account❌ No❌ No✅ Yes
Choose Elements when you want your own checkout form without the PCI scope of handling raw card data.

​
Supported Field Types

​
Card fields

TypeDescription
cardNumberCard number with live Luhn validation, brand detection, and auto-formatting
expirationDateMM / YY expiry with future-date validation
cvv3 or 4 digit CVV (auto-adjusts for Amex)

​
Bank fields

TypeDescription
accountNumber4–17 digit bank account number (masked, password-type input)
routingNumber9-digit US ABA routing number with checksum validation

​
How It Works

  1. Fields mount as iframes in your DOM — you control placement and styling.
  2. On submit, you call createToken() or createBankToken().
  3. The tokenizer iframe posts data directly to Vault.
  4. You receive a token (and optional CVC session for cards) to pass to your backend.
  5. Your backend uses the token with the Proxy or PayAPI.

​
Quick Look

import { OzVault } from '@ozura/elements';

const vault = new OzVault('YOUR_VAULT_API_KEY', {
  pubKey: 'YOUR_PUB_KEY',
});

// Card elements
const cardNumber = vault.createElement('cardNumber');
const expiry     = vault.createElement('expirationDate');
const cvv        = vault.createElement('cvv');

cardNumber.mount('#card-number');
expiry.mount('#expiry');
cvv.mount('#cvv');

// Tokenize
const { token, cvcSession } = await vault.createToken({
  billing: { firstName: 'Jane', lastName: 'Smith' },
});

​
Integration Guides

Card Payments with Elements

Full walkthrough for embedding card fields — install, mount, tokenize, style, and test.

Bank Payments with Elements

Embed account number and routing number fields and tokenize for ACH.

​
SDK Deep Dive

The guides above cover the integration flow. For the complete API reference, React components, TypeScript types, and advanced customization options, head to the SDK docs:

Elements SDK

Full SDK reference — OzVault, OzElement, all options, events, and types.

React Components

OzElements provider, useOzElements hook, and pre-built component reference.

Styling Reference

Complete list of supported style properties and theming options.

Error Handling

OzError codes, retry logic, and how to surface errors to users.