🏆 What this system provides: Complete PCI Isolation via Iframes

AuxVault.js is a zero-deployment payment library that keeps merchants completely out of PCI scope by isolating every single field in cross-origin iframes hosted on our PCI Level 1 certified server.

🔒 Why This Keeps You Out of PCI Scope

Traditional payment forms expose merchants to PCI liability because card data touches their page, even momentarily. AuxVault eliminates this risk entirely:

🎨 Full CSS Control

Developers have complete control over styling. The iframes are transparent and inherit styles from parent containers. You can style the container divs however you want:

/* Light theme example */
.field {
    border: 2px solid #ddd;
    border-radius: 4px;
    height: 44px;
    background: white;
}

.field:focus-within {
    border-color: #2c3e50;
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

/* Dark theme example */
body.dark-mode .field {
    background: #2d2d2d;
    border-color: #4a4a4a;
    color: #e0e0e0;
}

Try it: Click the "🌙 Dark Mode" button in the top right to see live CSS theming!

🚀 Incredibly Easy & Flexible

Merchants only need to:

• Add field containers wherever they want in their HTML
• Include one script tag with their API key
• That's it! No JavaScript to write, no files to deploy

The SDK automatically:

• ✅ Detects which fields are on the page
• ✅ Creates secure iframes for each field
• ✅ Provides smart defaults for missing fields
• ✅ Handles all transaction submission
• ✅ Updates itself with security patches (CDN hosted)

📦 Architecture Overview

Merchant Page (merchant.com)
├─ Field containers (just empty divs)
├─ Your CSS styling
└─ <script src="luqratoken.com/sdk/auxVault.js">

PCI Level 1 Server (luqratoken.com)
├─ https://luqratoken.com/sdk/auxVault.js (SDK - creates iframes)
└─ auxvault-field.html (loaded once per field)
    └─ Each iframe: collects data, validates, returns securely

Your Domain: ZERO payment data ✔
Our Domain: ALL payment data ✔

🎯 Real-World Benefits

• No PCI audit headaches - Your infrastructure never touches card data
• No security updates - SDK auto-updates from CDN
• No deployment complexity - One script tag, done
• No iframe wrangling - SDK handles all postMessage communication
• Professional & trustworthy - Same architecture as Stripe, Square, etc.

🚀 How to Use - Three Simple Steps

Use the configurator above to get started in minutes. No complex setup required.

🔗 Receive Amount From External Source

Test sending amounts to test.html checkout page.

Method 1: URL Link

<a href="test.html?amount=10.58" target="_blank">Buy Now</a>

Method 2: Form POST (via sessionStorage)

<form id="postForm">
    <input type="number" name="amount" value="49.99">
    <button type="submit">Submit</button>
</form>

<script>
document.getElementById('postForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const amount = this.amount.value;
    sessionStorage.setItem('auxvault_amount', amount);
    window.open('test.html', '_blank');
});
</script>