// Paywall — vial selection. Checkout applies the current product price: // $299 membership base plus any compound difference above $299. // AI-reviewed framing, never "clinician-led". const PLAN_OPTIONS = [ { id: 'solo', slots: 1, price: 299, name: '1 peptide plan', desc: 'One monthly vial.' }, { id: 'paired', slots: 2, price: 578, name: '2 peptide plan', desc: 'Two monthly vials. Save $20.', recommended: true }, { id: 'full', slots: 3, price: 877, name: '3 peptide plan', desc: 'Three monthly vials. Save $20.' }, ]; const SUPPORT_OPTIONS = [ { id: 'none', tier: 'none', price: 0, name: 'Not now', desc: 'Peptide membership only.' }, { id: 'monthly-care', tier: 'group_monthly', price: 129, name: 'Provider care rooms', desc: 'One provider-led care room monthly.' }, { id: 'twice-care', tier: 'group_twice_monthly', price: 199, name: 'Provider care rooms plus', desc: 'Two provider-led care rooms monthly.', recommended: true }, { id: 'direct-support', tier: 'private_access', price: 299, name: 'Provider care rooms + 1:1', desc: 'Care rooms plus direct 1:1 access.' }, ]; const Paywall = ({ track, contact, onPay, onBack, verified }) => { const trackInfo = CATEGORIES.find(t => t.id === track) || CATEGORIES[0]; const planHint = React.useMemo(() => ({ tier: window.sessionStorage?.getItem('axo_peptide_plan_tier') || 'paired', slots: Number(window.sessionStorage?.getItem('axo_peptide_plan_slots') || 0), price: Number(window.sessionStorage?.getItem('axo_peptide_plan_price') || 0), label: window.sessionStorage?.getItem('axo_peptide_plan_label') || '', anchorName: window.sessionStorage?.getItem('axo_peptide_anchor_name') || '', }), []); const [selectedPlan, setSelectedPlan] = React.useState(() => { const hinted = PLAN_OPTIONS.find(p => p.id === planHint.tier || p.slots === planHint.slots); return hinted || PLAN_OPTIONS[1]; }); const [selectedSupport, setSelectedSupport] = React.useState(SUPPORT_OPTIONS[0]); const [checkoutContact, setCheckoutContact] = React.useState(() => ({ legalName: contact?.legalName || '', email: contact?.email || '', phone: contact?.phone || '', address1: contact?.address1 || '', address2: contact?.address2 || '', city: contact?.city || '', state: contact?.state || '', zip: contact?.zip || '', })); const [submitting, setSubmitting] = React.useState(false); const [error, setError] = React.useState(''); const [paymentProvider, setPaymentProvider] = React.useState('stripe'); React.useEffect(() => { let alive = true; fetch('/api/checkout-config') .then((res) => res.ok ? res.json() : null) .then((data) => { if (!alive || !data) return; if (data.provider === 'stripe' || data.provider === 'whop') { setPaymentProvider(data.provider); } }) .catch(() => {}); return () => { alive = false; }; }, []); const total = selectedPlan.price + selectedSupport.price; const anchorName = planHint.anchorName || `Primary peptide · ${trackInfo.name.toLowerCase()}`; const plannedVials = Array.from({ length: selectedPlan.slots }, (_, index) => ({ id: index === 0 ? 'primary' : `slot-${index + 1}`, name: index === 0 ? anchorName : `Peptide ${index + 1}`, planId: selectedPlan.id, planSlots: selectedPlan.slots, planPrice: selectedPlan.price, })); const submit = async (e) => { e.preventDefault(); setError(''); const email = checkoutContact.email.trim(); const legalName = checkoutContact.legalName.trim(); const phone = checkoutContact.phone.trim(); const shipping = { address1: checkoutContact.address1.trim(), address2: checkoutContact.address2.trim(), city: checkoutContact.city.trim(), state: checkoutContact.state.trim().toUpperCase(), zip: checkoutContact.zip.trim(), }; if (!legalName) { setError('Full name is required before checkout.'); return; } if (!email || !email.includes('@')) { setError('Email is required before checkout.'); return; } if (!phone || !shipping.address1 || !shipping.city || !shipping.state || !shipping.zip) { setError('Shipping address and phone are required before checkout.'); return; } setSubmitting(true); const checkoutState = { vials: plannedVials, plan: selectedPlan, support: selectedSupport, total, track, contact: { ...contact, legalName, email, phone, ...shipping }, shipping, savedAt: new Date().toISOString(), }; window.sessionStorage?.setItem('axo_site_checkout_state', JSON.stringify(checkoutState)); try { const siteRoot = window.location.origin; const items = [{ name: selectedPlan.name, supply: `${selectedPlan.slots} monthly vial${selectedPlan.slots === 1 ? '' : 's'}`, price: selectedPlan.price * 100, quantity: 1, billingKind: 'peptide_plan', metadata: { planId: selectedPlan.id, slots: selectedPlan.slots, track, anchorName, }, }]; if (selectedSupport.id !== 'none') { items.push({ name: selectedSupport.name, supply: selectedSupport.desc, price: selectedSupport.price * 100, quantity: 1, billingKind: 'provider_support', metadata: { supportId: selectedSupport.id, careTier: selectedSupport.tier, }, }); } const res = await fetch('/api/checkout', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ items, customerEmail: email, customerName: legalName, careTier: selectedSupport.tier, peptidePlan: selectedPlan, providerSupport: selectedSupport, paymentProvider, visitorId: window.localStorage?.getItem('axo_site_visitor_id') || null, customerRef: contact?.userId || null, shipping: { name: legalName, phone, ...shipping, }, successUrl: `${siteRoot}/dashboard?checkout_session_id={CHECKOUT_SESSION_ID}`, cancelUrl: `${siteRoot}/checkout`, }), }); const data = await res.json().catch(() => ({})); if (!res.ok || !data.url) throw new Error(data.error || 'Checkout failed'); onPay?.({ vials: plannedVials, plan: selectedPlan, support: selectedSupport, contact: checkoutState.contact, checkoutStatus: 'started', }); window.top.location.href = data.url; } catch (err) { setError(err instanceof Error ? err.message : 'Checkout failed'); setSubmitting(false); } }; const fname = (checkoutContact.legalName || contact?.legalName || '').split(' ')[0]; return (
{verified && (
✓ IDENTITY VERIFIED
)}

{fname ? `${fname}, choose ` : 'Choose '}your monthly plan.

— YOUR INFORMATION
— SELECT YOUR PLAN SIZE
{PLAN_OPTIONS.map((plan) => ( ))}
— PROVIDER SUPPORT
{SUPPORT_OPTIONS.map((support) => ( ))}
{error && (
{error}
)}
Secure checkout · cancellable any time · COA on every shipment
); }; Object.assign(window, { Paywall, PLAN_OPTIONS, SUPPORT_OPTIONS });