Enrollment requires affirmative, unambiguous consent

FTC Negative Option Rule (2025) and MITA (Restore Online Shoppers' Confidence Act successor) require that the consumer's authorization of a recurring charge be unambiguous — a generic 'Pay' button without an adjacent charge acknowledgment does not meet the threshold. Pre-checked checkboxes are opt-out mechanisms, not opt-in consent, and are explicitly called out in the FTC's Dark Patterns Report (2022) as deceptive. Under California ARL, the subscription consent must be obtained separately from any other purchase consent. A form that can be submitted without the checkbox checked means the consent field is cosmetic, not functional.

Add a required, unchecked checkbox to the enrollment form and tie the submit button's enabled state to it. In components/CheckoutForm.tsx:

<label className="consent-label flex items-start gap-2">
  <input
    type="checkbox"
    required
    checked={consentChecked}
    onChange={e => setConsentChecked(e.target.checked)}
  />
  <span className="text-sm">
    I authorize {COMPANY_NAME} to charge my payment method ${plan.price}/{plan.period}
    {plan.trialDays > 0 ? ` after my ${plan.trialDays}-day free trial` : ' starting today'},
    and on each renewal date until I cancel.
  </span>
</label>
<button type="submit" disabled={!consentChecked}>
  {plan.trialDays > 0
    ? `Start free trial — $${plan.price}/${plan.period} after trial`
    : `Subscribe — $${plan.price}/${plan.period}`}
</button>

Also enforce server-side: reject the subscription creation in app/api/checkout/route.ts if consentGiven !== true in the request body.