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.

• ID: subscription-compliance.enrollment.affirmative-consent

• Severity: critical

• What to look for: Find the subscription enrollment UI — the page or modal where the user submits their payment information to start a subscription. Look specifically at how the user's agreement to recurring charges is captured. Is there an explicit affirmative action required beyond clicking "Pay" or "Subscribe"? The FTC's negative option marketing rule (effective 2025) requires that the charge authorization be unambiguous — a generic "Submit" button that also serves as purchase confirmation is now under regulatory scrutiny. Look for: (1) a checkbox that must be checked to proceed (not pre-checked), (2) disclosure text directly above or below the submit button that explicitly states the user is authorizing a recurring charge, or (3) a double-confirmation step. Check the submit button label — "Start free trial" alone does not constitute clear consent to a charge. Also check whether the consent mechanism is required (i.e., can the form be submitted without it?) by examining form validation logic. Count all instances found and enumerate each.

• Pass criteria: Subscription enrollment requires an affirmative user action that specifically acknowledges the recurring charge. Either: (a) a required, unchecked checkbox adjacent to text that explains the recurring charge, or (b) the submit button label explicitly states what will happen (e.g., "Agree and Subscribe for $29/month"), or (c) a disclosure immediately above the submit button states "By clicking below, you authorize [Company] to charge your payment method $29/month until you cancel." The mechanism is required — the form cannot be submitted without it. At least 1 implementation must be confirmed.

• Fail criteria: The only confirmation is a generic "Pay" or "Submit" button with no adjacent charge disclosure. A pre-checked checkbox is used as the consent mechanism (pre-checked = opt-out, not opt-in). The disclosure exists but is not tied to the submit action (it is in a separate section the user may not read). The consent element is present in the UI but not validated — the form can be submitted with the checkbox unchecked.

• Skip (N/A) when: The application has no subscription or recurring billing.

• Detail on fail: Specify what is missing. Example: "Checkout form has 'Subscribe' button with no adjacent charge disclosure or consent checkbox. No affirmative acknowledgment of recurring billing required." or "Checkbox present but pre-checked by default and not validated — form submits successfully with it unchecked.".

• Remediation: Add a required, unchecked consent acknowledgment to the enrollment form:

  // components/CheckoutForm.tsx
  'use client'
  import { useState } from 'react'
  
  export function CheckoutForm({ plan }: { plan: Plan }) {
    const [consentChecked, setConsentChecked] = useState(false)
  
    async function handleSubmit(e: React.FormEvent) {
      e.preventDefault()
      if (!consentChecked) {
        // Prevent submission — this should also be enforced server-side
        return
      }
      // proceed with payment
    }
  
    return (
      <form onSubmit={handleSubmit}>
        {/* ...payment fields... */}
  
        {/* Affirmative consent — required, starts unchecked */}
        <label className="consent-label">
          <input
            type="checkbox"
            required             // HTML5 required prevents submission
            checked={consentChecked}
            onChange={e => setConsentChecked(e.target.checked)}
          />
          <span>
            I authorize {COMPANY_NAME} to charge my payment method ${plan.price}/{plan.period}
            starting {plan.trialDays > 0 ? `after my ${plan.trialDays}-day free trial` : 'today'},
            and on each renewal date until I cancel. I can cancel anytime in my account settings.
          </span>
        </label>
  
        <button
          type="submit"
          disabled={!consentChecked}
          className="subscribe-button"
        >
          {plan.trialDays > 0
            ? `Start free trial — $${plan.price}/${plan.period} after trial`
            : `Subscribe — $${plan.price}/${plan.period}`}
        </button>
      </form>
    )
  }
  

  Also validate the consent field server-side: accept a consentGiven: true flag in the request body and reject the subscription creation if it is absent or false.