Never add paid extras through a pre-ticked box

Region

European Union (EU). The duty comes from the law there. The rule applies only when the project serves people there, and its Applies when also holds.

How to do it

Article 22 of the Consumer Rights Directive requires the consumer's express consent to any payment on top of the main price. Consent by default options, which the consumer must reject to avoid the payment, does not count. The consumer may then claim the money back. The same goes for an extra kept in the cart from an earlier visit or added by a recommendation widget. Keep the main price and the extras as separate lines, so the total in Show the total price with every mandatory fee stays honest. Store on each extra line who added it and when.

Examples

TypeScript example

// Playwright: no paid option starts ticked
const paidOptions = page.locator('form#checkout input[type=checkbox][data-adds-cost]');
for (const option of await paidOptions.all()) await expect(option).not.toBeChecked();

Python example

# Playwright for Python: the same check
from playwright.sync_api import expect

for option in page.locator("form#checkout input[type=checkbox][data-adds-cost]").all():
    expect(option).not_to_be_checked()

How to check

A browser test opens every checkout step as an EU consumer and reads each checkbox and toggle that adds a cost. None is checked when the page loads. A server test places an order with no extras chosen, and its total equals the main lines plus mandatory fees and shipping.

Sources

• Consumer Rights Directive 2011/83/EU, Article 22

Related rules

• PAY-58 Show the total price with every mandatory fee in Payments and billing
• UXD-5 Give yes and no the same weight in UX and deceptive design