Installation
npm / yarn
npm install @ozura/elements
import { OzVault, OzError } from '@ozura/elements';
import { OzElements, useOzElements, OzCardNumber, OzExpiry, OzCvv, OzCard } from '@ozura/elements/react';
CDN (Script Tag)
If you’re not using a bundler, load the UMD build directly from the Ozura CDN:
<script src="https://elements.ozura.com/oz-elements.umd.js"></script>
<script>
const { OzVault } = window.OzElements;
const vault = new OzVault('YOUR_API_KEY', { pubKey: 'YOUR_PUB_KEY' });
</script>
<script type="module">
import { OzVault } from 'https://elements.ozura.com/oz-elements.esm.js';
const vault = new OzVault('YOUR_API_KEY', { pubKey: 'YOUR_PUB_KEY' });
</script>
TypeScript
The package ships with full TypeScript definitions — no @types package needed. Import types directly:
import {
OzVault,
OzElement,
OzError,
ElementType,
BankElementType,
ElementOptions,
ElementStyleConfig,
ElementChangeEvent,
VaultOptions,
TokenizeOptions,
TokenResponse,
BankTokenizeOptions,
BankTokenResponse,
BillingDetails,
BillingAddress,
FontSource,
Appearance,
AppearanceVariables,
OzTheme,
} from '@ozura/elements';
Credentials
You need both values from the Ozura Dashboard. Both must be passed to initialize the SDK — tokenization will fail if either is missing.
| Credential | Notes |
|---|
| Vault API Key | Client-side key passed as the first argument to OzVault. Use an environment variable. |
| Vault Pub Key | Authenticates the tokenize request. Passed via options.pubKey. Use an environment variable — do not hardcode it in source code. |
const vault = new OzVault(process.env.VAULT_API_KEY, {
pubKey: process.env.VAULT_PUB_KEY,
});
Do not hardcode credentials directly in source code or commit them to version control. Use environment variables to inject them at build time.
Constructor Options
new OzVault(apiKey: string, options: VaultOptions)
| Option | Type | Required | Default | Description |
|---|
apiKey | string | ✅ | — | Your Vault API key (server-side) |
options.pubKey | string | ✅ | — | Your Vault pub key (client-safe) |
options.apiUrl | string | — | https://api.ozuravault.com | Override the Vault API base URL |
options.frameBaseUrl | string | — | https://elements.ozura.com | Override where iframe assets are served from |
options.fonts | FontSource[] | — | [] | Custom web fonts to load inside iframes |
options.appearance | Appearance | — | — | Global theme and CSS variable overrides. See Styling. |
options.onLoadError | () => void | — | — | Called if the tokenizer iframe fails to load |
options.loadTimeoutMs | number | — | 10000 | Timeout in ms before onLoadError fires |
Next Steps
