Credit Card Numbers
Encrypted Credit Card Input Field
Credit card numbers in standard inputs are targets for Magecart, JavaScript skimmers, and session replay tools. SmartField encrypts card data at the keystroke level with built-in Luhn validation.
The Problem
Credit Card Numbers entered in a standard HTML input are immediately accessible to any JavaScript on the page:
// Any script, extension, or tracker:
document.querySelector('input').value
// Your credit card numbers in plaintext
The Solution
<smart-field type="password" encrypt-key="/api/sf-key"
placeholder="Enter credit card numbers"></smart-field>
Now the same attack returns AES-256-GCM encrypted data. The credit card numbers never exist as plaintext in the browser.
What the User Sees
The user types normally. The screen shows animated cipher characters: ΣΩΔψξλμπ
The real credit card numbers are stored in a WeakMap (invisible to JavaScript) and encrypted with AES-256-GCM (unreadable without the server key).
Server-Side Decryption
// Node.js
const sf = require('@smartfield-dev/server');
await sf.init();
const data = await sf.decrypt(req.body.field);
// Your credit card numbers in plaintext, server-side only
Frequently Asked Questions
How does SmartField encrypt credit card numbers?+
SmartField generates a new AES-256 key and IV for every encryption. Credit Card Numbers are encrypted before they exist in the DOM. The AES key is wrapped with RSA-2048. Only your server can decrypt.
Can trackers like Hotjar capture credit card numbers?+
No. Hotjar records DOM content. SmartField stores credit card numbers in a WeakMap inside a closed Shadow DOM. Hotjar only captures cipher characters.
What server languages are supported?+
SmartField provides SDKs for Node.js, Python, Java, Go, PHP, and Ruby. All tested and verified.
Related Pages