> ## 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.

# Kræv vilkår før checkout

> En Cart SDK-use case, der tilføjer en afkrydsningsboks for vilkår og betingelser til Aftersell Cart og blokerer checkout, indtil kunden accepterer.

Tilføj en afkrydsningsboks under checkout-knappen, og forhindr kunden i at fortsætte, indtil de sætter kryds. Nyttigt til accept af vilkår, aldersgrænser og bekræftelser af varer lavet på bestilling.

<Warning>
  **`checkout`-eventet kan ikke annullere checkout.** Det fyrer som en notifikation lige før browseren navigerer, så at returnere `false` eller kalde `preventDefault` gør ingenting. Den eneste måde at gate checkout på er at stoppe knappen fra at reagere på klik, *før* der trykkes på den, hvilket er, hvad denne side viser.

  Betragt dette som en UI-afskrækkelse, ikke en juridisk garanti. En målrettet kunde kan stadig nå checkout direkte.
</Warning>

<div id="how-it-works">
  ## Sådan virker det
</div>

Tre dele:

1. En **Custom code-blok** under checkout-knappen renderer afkrydsningsboksen.
2. Mens boksen er tom, tilføjer blokken en klasse til kurvens checkout- og express-payment-knapper via [shadow root'en](/da/aftersell/cart/sdk-overview#shadowroot).
3. **Custom CSS** får den klasse til at deaktivere klik.

<div id="step-1-add-the-checkbox-block">
  ## Trin 1: Tilføj afkrydsningsboks-blokken
</div>

Tilføj en [Custom code-blok](/da/aftersell/cart/custom-code-blocks) under din Checkout button-blok, skift den til **React component**-tilstand, og indsæt:

```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 **Compile**, og slå derefter **"Use custom template"** til. Blokken renderer intet, før du gør det.

`props.cart`-afhængigheden betyder noget: den genanvender klassen, efter kurven re-renderes, hvilket ellers ville slette den.

<div id="step-2-add-the-css">
  ## Trin 2: Tilføj CSS'en
</div>

I **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` er det, der faktisk blokerer klikket; opaciteten viser bare kunden hvorfor.

<div id="step-3-test-it">
  ## Trin 3: Test det
</div>

I [preview](/da/aftersell/cart/previewing-carts) skal du bekræfte, at:

* Checkout-knappen er nedtonet og ikke reagerer på klik ved indlæsning.
* At sætte kryds i boksen aktiverer den; at fjerne krydset deaktiverer knappen igen.
* Express payment-knapper er også gated.
* At tilføje eller fjerne en vare genaktiverer ikke knappen, mens boksen er tom.

Det sidste er den almindelige fejl. Hvis knappen genaktiverer sig selv efter en kurvændring, kører effekten ikke igen. Tjek, at `props.cart` er i dependency-arrayet.

<div id="tracking-who-accepted">
  ## Spor hvem der accepterede
</div>

Afkrydsningsboksen er kun browser-tilstand; den når aldrig ordren. For at registrere accept skal du stemple den på hver linje som en property på add-to-cart-tidspunktet:

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

Tilføj det til din produktformular i temaet. Shopify læser `properties[...]` direkte fra formularen, så værdien når ordren, uanset hvem der udfører tilføjelsen: Aftersell, temaet eller en anden app.

En property med `_`-præfiks holdes ude af den kundevendte linje, men når stadig Shopify, så den vises på ordren. Dette registrerer, *hvilken* vilkårsversion der var aktiv, ikke at kunden satte kryds i boksen.

<div id="things-to-get-right">
  ## Ting du skal have styr på
</div>

* **Målret kun `cart-external-*`-klasser.** `cart-internal-*`-tvillingerne er kurvens eget maskinrum, ikke et håndtag til din kode. Se [Custom CSS](/da/aftersell/cart/custom-css).
* **Tjek at `shadowRoot` findes**, før du bruger den. Den er `undefined`, indtil kurven booter.
* **Blokken renderer intet, før kurven er indlæst**, så checkout-knappen er aldrig kortvarigt aktiv, før gaten anvendes.
* **En React-blok, der kaster, renderer intet**, og resten af kurven fortsætter, hvilket her betyder en ubeskyttet checkout-knap. Test i preview, før du udgiver.

<div id="where-to-go-next">
  ## Hvor du kan gå hen herfra
</div>

* **[Custom code-blokke](/da/aftersell/cart/custom-code-blocks)**: React-tilstand og dens props.
* **[Custom CSS](/da/aftersell/cart/custom-css)**: den offentlige klassekonvention.
* **[Events](/da/aftersell/cart/sdk-events#checkout)**: hvad `checkout`-eventet kan og ikke kan.