// Checkout.jsx — multi-step terminal checkout // SECURITY: client-side validation is convenience only. Server MUST re-validate everything. // Payment is mock — in production this hands off to Stripe Elements / Shopify Payments, // which means card data NEVER touches our servers (PCI scope = 0). const Checkout = ({ open, items, user, onClose, onComplete }) => { const [step, setStep] = React.useState(0); const [form, setForm] = React.useState({ email: user?.email || '', name: user?.name || '', line1: user?.shipping?.line1 || '', line2: user?.shipping?.line2 || '', city: user?.shipping?.city || '', state: user?.shipping?.state || '', zip: user?.shipping?.zip || '', country: user?.shipping?.country || 'US', shipping: 'STANDARD', // STANDARD | EXPRESS | PICKUP card: '', exp: '', cvc: '', saveCard: false, }); const [errs, setErrs] = React.useState({}); const [processing, setProcessing] = React.useState(false); const [processLog, setProcessLog] = React.useState([]); const [orderId, setOrderId] = React.useState(null); React.useEffect(() => { if (open) { setStep(0); setOrderId(null); setProcessLog([]); } }, [open]); // Lock body scroll while open React.useEffect(() => { if (open) document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = ''; }; }, [open]); if (!open) return null; const set = (k, v) => { setForm((f) => ({ ...f, [k]: v })); setErrs((e) => ({ ...e, [k]: null })); }; const subtotal = items.reduce((s, i) => s + i.p.price * i.qty, 0); const shippingCost = form.shipping === 'EXPRESS' ? 12 : form.shipping === 'PICKUP' ? 0 : 5; const tax = Math.round(subtotal * 0.08875 * 100) / 100; const total = subtotal + shippingCost + tax; const steps = ['IDENTIFY', 'TARGET', 'EXECUTE', 'CONFIRM']; // Per-step validation const validate = (n) => { const next = {}; if (n === 0) { if (!form.email.includes('@')) next.email = 'invalid email'; if (!form.name.trim()) next.name = 'required'; } if (n === 1) { if (!form.line1.trim()) next.line1 = 'required'; if (!form.city.trim()) next.city = 'required'; if (!form.state.trim()) next.state = 'required'; if (!form.zip.match(/^[A-Za-z0-9 \-]{3,12}$/)) next.zip = 'invalid postal code'; } if (n === 2) { if (!form.card.replace(/\s/g,'').match(/^\d{12,19}$/)) next.card = 'invalid card number'; if (!form.exp.match(/^\d{2}\s?\/\s?\d{2}$/)) next.exp = 'MM/YY'; if (!form.cvc.match(/^\d{3,4}$/)) next.cvc = 'invalid CVC'; } setErrs(next); return Object.keys(next).length === 0; }; const advance = () => { if (!validate(step)) return; if (step < 2) setStep(step + 1); else execute(); }; // The "execute transaction" path — animated log of Shopify call. // In production: POST to /api/checkout → Shopify Cart.checkoutCreate mutation → Stripe confirmCardPayment. const execute = () => { setProcessing(true); setStep(3); const lines = [ { t: 200, text: 'validating cart line items ............ [ OK ]' }, { t: 500, text: 'computing tax (jurisdiction: NY) ...... [ OK ]' }, { t: 800, text: 'reserving inventory ................... [ OK ]' }, { t: 1200, text: 'tokenizing card (stripe.js) ........... [ OK ]' }, { t: 1700, text: 'creating shopify checkout ............. [ OK ]' }, { t: 2100, text: 'authorizing payment ................... [ OK ]' }, { t: 2500, text: 'capturing funds ....................... [ OK ]' }, { t: 2900, text: 'creating order #........................[ OK ]' }, { t: 3300, text: 'queueing fulfillment .................. [ OK ]' }, { t: 3700, text: 'sending receipt to ' + (form.email || 'inbox') + ' [ OK ]' }, ]; setProcessLog([]); lines.forEach((l) => setTimeout(() => setProcessLog((p) => [...p, l]), l.t)); // Finalize: generate order ID, fire onComplete after log finishes setTimeout(() => { const id = Math.floor(Math.random() * 9999).toString().padStart(4, '0'); const orderNumber = '#' + Math.random().toString(16).slice(2, 6).toUpperCase() + '-' + id; setOrderId(orderNumber); setProcessing(false); }, 4100); }; return (
e.stopPropagation()} style={{ maxWidth: 920, margin: '0 auto', background: '#0A0A0A', border: '1px solid #00FF41', padding: 0 }}> {/* terminal chrome */}
operator@brew-co — ./checkout — secure TLS 1.3 · PCI-DSS
{/* Step indicator */}
{steps.map((s, i) => (
[{i+1}] {s}
))}
{/* Order summary always visible on right (collapsed on smaller; here single col) */}
{/* LEFT: step body */}
{step === 0 && (
{'>'} who_am_i ?
set('email', v)} type="email" placeholder="operator@target.coffee" error={errs.email} autoFocus /> set('name', v)} placeholder="full name for shipping label" error={errs.name} /> {!user && (
// already have an account? ./login first to use saved address + payment.
// checking out as guest will auto-create an account.
)}
)} {step === 1 && (
{'>'} target_address ?
set('line1', v)} placeholder="127 Localhost Lane" error={errs.line1} /> set('line2', v)} placeholder="Unit 0x2A" />
set('city', v)} placeholder="Brooklyn" error={errs.city} /> set('state', v)} placeholder="NY" error={errs.state} /> set('zip', v)} placeholder="11201" error={errs.zip} />
{'>'} SHIPPING METHOD
{[ { id: 'STANDARD', label: 'STANDARD', sub: '5-7 BUSINESS DAYS', price: 5 }, { id: 'EXPRESS', label: 'EXPRESS', sub: '2-3 BUSINESS DAYS', price: 12 }, { id: 'PICKUP', label: 'LOCAL PICKUP', sub: 'BROOKLYN ROASTERY', price: 0 }, ].map((opt) => ( ))}
)} {step === 2 && (
{'>'} payload_secured. authorize.
set('card', formatCard(v))} placeholder="4242 4242 4242 4242" error={errs.card} />
set('exp', formatExp(v))} placeholder="12 / 28" error={errs.exp} /> set('cvc', v.replace(/\D/g,'').slice(0,4))} placeholder="000" error={errs.cvc} type="password" />
// payments processed by stripe.js — card data never touches operator brewing servers.
// pci-dss scope: zero. tls 1.3 + cert pinning.
)} {step === 3 && (
{processing || !orderId ? (
$ ./execute-transaction --commit
{processLog.map((l, i) => (
  {l.text}
))} {processLog.length < 10 && (
// processing
)}
) : (
// ORDER CONFIRMED
[ ACCESS GRANTED ]
order {orderId} queued for fulfillment.
receipt sent to {form.email}.
roasted-to-order. ships in 2-3 days.
// drink responsibly. pwn responsibly.
)}
)} {/* nav buttons */} {step < 3 && (
{step > 0 ? ( ) : ( )}
)}
{/* RIGHT: order summary */} {step < 3 && ( )}
); }; const CkField = ({ label, value, onChange, type='text', placeholder, error, autoFocus }) => (
{'>'} {label}{error && · {error}}
onChange(e.target.value)} placeholder={placeholder} autoFocus={autoFocus} maxLength={500} style={{ width: '100%', background: '#000', border: `1px solid ${error ? '#FF3344' : 'rgba(255,255,255,0.28)'}`, color: '#FFF', fontFamily: 'inherit', fontSize: 14, padding: '11px 13px', borderRadius: 2, }} onFocus={(e) => { if (!error) { e.target.style.borderColor = '#00FF41'; e.target.style.boxShadow = '0 0 0 1px #00FF41'; } }} onBlur={(e) => { if (!error) { e.target.style.borderColor = 'rgba(255,255,255,0.28)'; e.target.style.boxShadow = 'none'; } }} />
); const SumRow = ({ label, value }) => (
{label} {value}
); // Format helpers — purely cosmetic const formatCard = (v) => v.replace(/\D/g, '').slice(0, 19).replace(/(.{4})/g, '$1 ').trim(); const formatExp = (v) => { const d = v.replace(/\D/g, '').slice(0, 4); return d.length > 2 ? `${d.slice(0,2)} / ${d.slice(2)}` : d; }; window.Checkout = Checkout;