Project 74, E-commerce and business
Checkout Form
A calm, one page checkout. Browsers can autofill every field, delivery choices change the total, and card numbers are checked before anything is sent.
- Main API
- autocomplete tokens
- Card check
- Luhn algorithm
- Dependencies
- None
- Your browser
- Checking
Check out
Try a test card like 4242 4242 4242 4242 with any future date. Change delivery and watch the summary. Nothing is sent.
How it works
- Let the browser fill it inEvery field has the right autocomplete token, like given-name, postal-code and cc-number, so one tap can fill the whole form.
- Format as they typeCard numbers get a space every four digits and expiry dates get a slash, which makes mistakes easy to spot.
- Check with LuhnThe Luhn algorithm catches most typos in card numbers before the form is sent. Expiry must be in the future.
function luhn(num) {
let sum = 0, alt = false;
for (let i = num.length - 1; i >= 0; i--) {
let d = +num[i];
if (alt) { d *= 2; if (d > 9) d -= 9; }
sum += d; alt = !alt;
}
return sum % 10 === 0;
}
luhn("4242424242424242"); // true
// <input autocomplete="cc-number" inputmode="numeric">