> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ozura.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Elements Overview

> Embed secure payment fields in your own UI and tokenize in the browser with Ozura Elements.

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

|                                      | Elements       | Using the API                | Checkout            |
| ------------------------------------ | -------------- | ---------------------------- | ------------------- |
| **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

| Type             | Description                                                                 |
| ---------------- | --------------------------------------------------------------------------- |
| `cardNumber`     | Card number with live Luhn validation, brand detection, and auto-formatting |
| `expirationDate` | MM / YY expiry with future-date validation                                  |
| `cvv`            | 3 or 4 digit CVV (auto-adjusts for Amex)                                    |

### Bank fields

| Type            | Description                                                  |
| --------------- | ------------------------------------------------------------ |
| `accountNumber` | 4–17 digit bank account number (masked, password-type input) |
| `routingNumber` | 9-digit US ABA routing number with checksum validation       |

***

## How It Works

```mermaid theme={null}
sequenceDiagram
  participant Page as Your Page
  participant Frame as Ozura iframe
  participant Vault as Ozura Vault

  Page->>Frame: mount element
  Note over Frame: User types card data
  Page->>Frame: createToken() / createBankToken()
  Frame->>Vault: POST /tokenize (raw data, never leaves iframe)
  Vault-->>Frame: { token, cvcSession }
  Frame-->>Page: { token, cvcSession }
  Page->>Page: send token to your backend
```

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](/guides/vault/proxy/overview) or [OzuraPay API](/guides/payments/payapi/overview).

***

## Quick Look

```js theme={null}
import { OzVault, OzError } from '@ozura/elements';

let vault;
try {
  vault = await OzVault.create({
    pubKey:     'YOUR_PUB_KEY',           // omit for test vault keys
    sessionUrl: '/api/oz-session',
  });
} catch (err) {
  if (err instanceof OzError) console.error('Vault init failed:', err.message);
  throw err;
}

// 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' },
});
```

<Info>
  See [Sandbox](/guides/sandbox) for how to create a Test project at ozuravault.com and grab a test vault key — no pub key required.
</Info>

***

## Integration Guides

<CardGroup cols={2}>
  <Card title="Card Payments with Elements" icon="credit-card" href="/guides/vault/card-payments/elements">
    Full walkthrough for embedding card fields — install, mount, tokenize, style, and test.
  </Card>

  <Card title="Bank Payments with Elements" icon="landmark" href="/guides/vault/bank-payments/elements">
    Embed account number and routing number fields and tokenize for ACH.
  </Card>
</CardGroup>

***

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

<CardGroup cols={2}>
  <Card title="Elements SDK" icon="code" href="/sdks/elements/overview">
    Full SDK reference — OzVault, OzElement, all options, events, and types.
  </Card>

  <Card title="React Components" icon="atom" href="/sdks/elements/react">
    OzElements provider, useOzElements hook, and pre-built component reference.
  </Card>

  <Card title="Styling Reference" icon="palette" href="/sdks/elements/styling">
    Complete list of supported style properties and theming options.
  </Card>

  <Card title="Error Handling" icon="triangle-alert" href="/sdks/elements/error-handling">
    OzError codes, retry logic, and how to surface errors to users.
  </Card>
</CardGroup>