Payments & E-Commerce

Secure Payment Fields for Online Checkout

Credit card numbers exist as plaintext in standard HTML inputs. Any JavaScript on your checkout page can read them. SmartField encrypts card data at the keystroke level. No iframe. No third-party SDK. Just encrypted inputs.

What Data This Protects

Threats Blocked

How It Works

Replace your standard HTML input with SmartField. 2 lines of code:

<script src="https://cdn.smartfield.dev/v1/smartfield.js"></script> <smart-field type="password" placeholder="password" encrypt-key="/api/sf-key"></smart-field>

Every keystroke is encrypted with AES-256-GCM. The AES key is wrapped with RSA-2048. Only your server can decrypt.

Why Standard Inputs Fail

A standard <input> stores plaintext in the DOM. Any JavaScript on the page can read it:

document.querySelector('input').value // "MyBankPassword123" ← stolen

With SmartField, the same code returns:

document.querySelector('smart-field').value // "eyJ2IjoxLCJpdiI6IkNx..." ← encrypted

Compliance

SmartField helps meet requirements for: PCI-DSS Level 1, PSD2, GDPR

Frequently Asked Questions

Does SmartField replace Stripe Elements?+
It can. Stripe Elements uses an iframe to isolate card data. SmartField uses a closed Shadow DOM with AES-256 encryption. Both protect card data, but SmartField works with any payment processor, not just Stripe.
Is this PCI-DSS compliant?+
SmartField encrypts card data before it exists in the DOM. The plaintext never appears in your JavaScript environment. This is stronger than most PCI-DSS requirements for client-side protection.
Can Magecart attacks steal card data?+
No. Magecart injects JavaScript to read input values. SmartField returns encrypted payloads from .value. The attacker gets AES-256 encrypted gibberish, useless without your server's RSA private key.

Related Pages

Try Live Demo