> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Voorwaarden verplichten vóór de checkout

> Een Cart SDK use case die een algemene-voorwaarden-checkbox aan de Aftersell Cart toevoegt en de checkout blokkeert totdat de shopper accepteert.

Voeg een checkbox toe onder de checkout-knop en verhinder dat de shopper doorgaat totdat hij hem aanvinkt. Handig voor het accepteren van voorwaarden, leeftijdscontroles en bevestigingen bij made-to-order.

<Warning>
  **Het `checkout`-event kan de checkout niet annuleren.** Het vuurt af als notificatie vlak voordat de browser navigeert, dus `false` teruggeven of `preventDefault` aanroepen doet niets. De enige manier om de checkout te gaten is de knop laten stoppen met reageren op klikken *voordat* erop wordt gedrukt, en dat is wat deze pagina laat zien.

  Beschouw dit als een UI-afschrikmiddel, niet als een juridische garantie. Een vastberaden shopper kan de checkout nog steeds rechtstreeks bereiken.
</Warning>

<div id="how-it-works">
  ## Hoe het werkt
</div>

Drie onderdelen:

1. Een **Custom code block** onder de checkout-knop rendert de checkbox.
2. Zolang het vakje leeg is, voegt het block een class toe aan de checkout- en express-payment-knoppen van de winkelwagen via de [shadow root](/nl/aftersell/cart/sdk-overview#shadowroot).
3. **Custom CSS** zorgt dat die class klikken uitschakelt.

<div id="step-1-add-the-checkbox-block">
  ## Stap 1: het checkbox-block toevoegen
</div>

Voeg een [Custom code block](/nl/aftersell/cart/custom-code-blocks) toe onder je Checkout button-block, schakel het naar de modus **React component**, en plak:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
function CustomCode(props) {
  const [accepted, setAccepted] = useState(false);

  useEffect(() => {
    const root = window.aftersell?.cart?.shadowRoot;
    if (!root) return;

    const targets = root.querySelectorAll(
      '.cart-external-checkout-button, .cart-external-express-buttons'
    );
    targets.forEach((el) => el.classList.toggle('checkout-gated', !accepted));
  }, [accepted, props.cart]);

  return (
    <div style={{ width: '100%', fontSize: '14px', textAlign: 'center' }}>
      <label style={{ display: 'flex', gap: '6px', justifyContent: 'center', alignItems: 'center' }}>
        <input
          type="checkbox"
          checked={accepted}
          onChange={(e) => setAccepted(e.target.checked)}
        />
        <span>
          I accept the{' '}
          <a href="https://yourstore.com/terms" target="_blank" rel="noopener noreferrer">
            Terms &amp; Conditions
          </a>
        </span>
      </label>
      {!accepted && (
        <div style={{ color: '#c00', fontWeight: 600, marginTop: '6px' }}>
          Please accept the terms above to continue.
        </div>
      )}
    </div>
  );
}
```

Klik op **Compile** en zet dan **"Use custom template"** aan. Het block rendert niets totdat je dat doet.

De `props.cart`-dependency is belangrijk: hij past de class opnieuw toe nadat de winkelwagen opnieuw rendert, wat hem anders zou wissen.

<div id="step-2-add-the-css">
  ## Stap 2: de CSS toevoegen
</div>

In **Cart settings → Custom CSS**:

```css theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout-gated {
  pointer-events: none !important;
  opacity: 0.5 !important;
}
```

`pointer-events: none` is wat de klik daadwerkelijk blokkeert; de opacity laat de shopper alleen zien waarom.

<div id="step-3-test-it">
  ## Stap 3: testen
</div>

Bevestig in de [preview](/nl/aftersell/cart/previewing-carts) dat:

* De checkout-knop bij het laden gedimd is en niet op klikken reageert.
* Het vakje aanvinken hem inschakelt; het uitvinken schakelt de knop weer uit.
* Express-payment-knoppen ook gegated zijn.
* Een item toevoegen of verwijderen de knop niet opnieuw inschakelt zolang het vakje leeg is.

Die laatste is de veelvoorkomende fout. Als de knop zichzelf opnieuw inschakelt na een winkelwagenwijziging, draait het effect niet opnieuw. Controleer of `props.cart` in de dependency array staat.

<div id="tracking-who-accepted">
  ## Bijhouden wie heeft geaccepteerd
</div>

De checkbox is alleen browserstatus; hij bereikt de bestelling nooit. Om acceptatie vast te leggen, stempel je hem als property op elke regel op het moment van add-to-cart:

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<input type="hidden" name="properties[_terms_version]" value="2026-01">
```

Voeg dat toe aan je productformulier in het thema. Shopify leest `properties[...]` rechtstreeks van het formulier af, dus de waarde bereikt de bestelling wie de toevoeging ook uitvoert: Aftersell, het thema of een andere app.

Een property met het voorvoegsel `_` blijft buiten de regel die de koper ziet, maar bereikt Shopify wel, dus hij verschijnt op de bestelling. Dit legt vast *welke* voorwaardenversie live was, niet dat de shopper het vakje aanvinkte.

<div id="things-to-get-right">
  ## Dingen om goed te doen
</div>

* **Richt je alleen op `cart-external-*`-classes.** De `cart-internal-*`-tegenhangers zijn het interne leidingwerk van de winkelwagen, geen aanknopingspunt voor jouw code. Zie [Custom CSS](/nl/aftersell/cart/custom-css).
* **Controleer dat `shadowRoot` bestaat** voordat je hem gebruikt. Hij is `undefined` totdat de winkelwagen opstart.
* **Het block rendert niets totdat de winkelwagen laadt**, dus de checkout-knop is nooit kortstondig actief voordat de gate van kracht is.
* **Een React-block dat een fout gooit rendert niets** en de rest van de winkelwagen gaat gewoon door, wat hier een onbeschermde checkout-knop betekent. Test in de preview vóór het publiceren.

<div id="where-to-go-next">
  ## Waar je verder kunt kijken
</div>

* **[Custom code blocks](/nl/aftersell/cart/custom-code-blocks)**: React-modus en zijn props.
* **[Custom CSS](/nl/aftersell/cart/custom-css)**: de publieke classconventie.
* **[Events](/nl/aftersell/cart/sdk-events#checkout)**: wat het `checkout`-event wel en niet kan.