/** * Checkout + Confirm screens — Stripe Payment Element flow. * * Step 1 = address, Step 2 = pay (Stripe Elements). Server creates a * PaymentIntent up front (price recomputed from live DB) and the client * confirms it via stripe.confirmPayment(). On success the order is flipped * to 'paid' via /api/checkout/confirm and we navigate to the confirm screen. */ window.CheckoutScreen = function CheckoutScreen({ lang, cart, onNav, channel, user, onPlaced }) { const [step, setStep] = React.useState(1); const prefillName = (user?.name || '').trim().split(/\s+/); const [form, setForm] = React.useState({ email: user?.email || 'customer@yy.shop', phone: user?.phone || '+62 812 3456 7890', first: prefillName[0] || 'Anya', last: prefillName.slice(1).join(' ') || 'Wong', address1: 'Jalan Sudirman Kav. 12', address2: '', city: 'Jakarta', postal: '10220', country: 'Indonesia', shipping_method: 'YY Express · 5–7 days', }); // If user logs in mid-checkout, backfill email/phone/name. React.useEffect(() => { if (!user) return; const pn = (user.name || '').trim().split(/\s+/); setForm(f => ({ ...f, email: user.email || f.email, phone: user.phone || f.phone, first: pn[0] || f.first, last: pn.slice(1).join(' ') || f.last, })); }, [user?.id]); // eslint-disable-line const subtotal = cart.reduce((s, i) => s + Number(i.price) * (i.qty || 1), 0); const shipping = subtotal > 80 ? 0 : 12; const tax = Math.round(subtotal * 0.08 * 100) / 100; const total = subtotal + shipping + tax; const set = (k, v) => setForm(f => ({ ...f, [k]: v })); // -------- Stripe state -------- const [stripeJsReady, setStripeJsReady] = React.useState(!!window.Stripe); const [checkoutCfg, setCheckoutCfg] = React.useState(null); // { publishable_key, currency, enabled } const [intent, setIntent] = React.useState(null); // { clientSecret, orderId, ... } const [stripeInst, setStripeInst] = React.useState(null); const [stripeElements,setStripeElements]= React.useState(null); const [paying, setPaying] = React.useState(false); const [payError, setPayError] = React.useState(''); const [intentError, setIntentError] = React.useState(''); const peMountRef = React.useRef(null); // Pull /checkout/config to know if Stripe is enabled and which pk_ to use. React.useEffect(() => { window.YY_API.get('/checkout/config').then(setCheckoutCfg).catch(() => setCheckoutCfg({ enabled: false })); }, []); // Inject https://js.stripe.com/v3/ once. React.useEffect(() => { if (window.Stripe) { setStripeJsReady(true); return; } const id = 'stripe-js-v3'; if (document.getElementById(id)) return; const s = document.createElement('script'); s.id = id; s.src = 'https://js.stripe.com/v3/'; s.onload = () => setStripeJsReady(true); s.onerror = () => setPayError('Failed to load Stripe.js'); document.head.appendChild(s); }, []); // Step 2 mount: create a PaymentIntent on the server, then mount the Element. React.useEffect(() => { if (step !== 2) return; if (!stripeJsReady) return; if (!checkoutCfg?.enabled || !checkoutCfg?.publishable_key) { setIntentError( lang === 'zh' ? '请先在后台 → 系统设置 → Stripe 支付 中填好 Publishable / Secret Key,并保存。' : 'Please configure Stripe keys under Admin → Settings → Stripe Payments first.' ); return; } if (intent) return; (async () => { try { const r = await window.YY_API.post('/checkout/create-intent', { items: cart.map(i => ({ id: i.id, qty: i.qty || 1 })), customer: { email: form.email, phone: form.phone, name: [form.first, form.last].filter(Boolean).join(' '), address1: form.address1, address2: form.address2, city: form.city, postal: form.postal, country: form.country, }, shipping, tax, shipping_method: form.shipping_method, channel_id: channel, lang, }); setIntent(r); const stripe = window.Stripe(r.publishableKey || checkoutCfg.publishable_key); setStripeInst(stripe); const elements = stripe.elements({ clientSecret: r.clientSecret, appearance: { theme: 'stripe' }, }); const pe = elements.create('payment', { layout: 'tabs' }); // Defer mount until the ref is available (next tick after re-render). requestAnimationFrame(() => { if (peMountRef.current) pe.mount(peMountRef.current); }); setStripeElements(elements); } catch (e) { setIntentError(e.message); } })(); }, [step, stripeJsReady, checkoutCfg]); // eslint-disable-line // Trigger the actual charge. async function payNow() { if (!stripeInst || !stripeElements || !intent) return; setPayError(''); setPaying(true); try { const ret = await stripeInst.confirmPayment({ elements: stripeElements, redirect: 'if_required', confirmParams: { return_url: window.location.origin + '/#/confirm', receipt_email: form.email, }, }); if (ret.error) { setPayError(ret.error.message || 'payment_failed'); setPaying(false); return; } const piId = ret.paymentIntent?.id || intent.clientSecret.split('_secret_')[0]; const conf = await window.YY_API.post('/checkout/confirm', { orderId: intent.orderId, paymentIntentId: piId, }); if (conf.orderStatus === 'paid' || conf.status === 'succeeded') { onPlaced && onPlaced({ order_no: intent.orderNo, email: form.email, subtotal, shipping, tax, total, currency: 'USD', city: form.city, country: form.country, postal: form.postal, }); onNav('confirm'); } else { setPayError('Payment not yet succeeded — status: ' + (conf.status || 'unknown')); } } catch (e) { setPayError(e.message || 'payment_failed'); } finally { setPaying(false); } } return (

{t('checkout.title', lang)}

= 1 ? 'on' : '')}>{step > 1 ? '✓' : '1'}{t('checkout.step1', lang)}
= 2 ? 'on' : '')}>2{t('checkout.step2', lang)}
{step === 1 && (

{t('checkout.step1', lang)}

set('email', e.target.value)}/>
set('phone', e.target.value)}/>
set('first', e.target.value)}/>
set('last', e.target.value)}/>
set('address1', e.target.value)}/>
set('address2', e.target.value)}/>
set('city', e.target.value)}/>
set('postal', e.target.value)}/>
set('country', e.target.value)}/>
set('shipping_method', e.target.value)}/>
)} {step === 2 && (

{t('checkout.step2', lang)}

{intentError && (
{intentError}
)} {!intentError && !intent && (
{lang === 'zh' ? '正在创建支付意图…' : 'Creating payment intent…'}
)}
{payError && (
{payError}
)}
)}
); }; window.ConfirmScreen = function ConfirmScreen({ lang, cart, onNav, order }) { const orderNo = order?.order_no || 'YY-' + Math.floor(100000 + Math.random() * 900000); const subtotal = order ? Number(order.subtotal) : cart.reduce((s, i) => s + Number(i.price) * (i.qty || 1), 0); const shipping = order ? Number(order.shipping) : (subtotal > 80 ? 0 : 12); const tax = order ? Number(order.tax) : subtotal * 0.08; const total = order ? Number(order.total) : subtotal + shipping + tax; const email = order?.email || 'customer@yy.shop'; const shipTo = order ? `${order.city || ''}, ${order.country || ''} ${order.postal || ''}`.trim().replace(/^,\s*/, '') : 'Jakarta, Indonesia 10220'; return (

{t('order.success', lang)}

{t('order.thanks', lang)}. A receipt has been sent to {email}
{t('order.number', lang)}{orderNo}
{t('order.eta', lang)}{(() => { const fmt = (d) => d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); const a = new Date(Date.now() + 3 * 864e5); const b = new Date(Date.now() + 8 * 864e5); return `${fmt(a)} – ${fmt(b)}, ${b.getFullYear()}`; })()}
Shipping to{shipTo}
PaymentStripe
{t('common.total', lang)}${total.toFixed(2)} USD
{cart.slice(0, 4).map((item, i) => (
))}
); };