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

# اشتراط الموافقة على الشروط قبل الدفع

> حالة استخدام لـ Cart SDK تضيف مربع اختيار للشروط والأحكام إلى سلة Aftersell وتمنع الدفع حتى يوافق المتسوق.

أضف مربع اختيار أسفل زر الدفع وامنع المتسوق من المتابعة حتى يحدده. مفيد لقبول الشروط، وبوابات التحقق من العمر، وإقرارات التصنيع حسب الطلب.

<Warning>
  **حدث `checkout` لا يستطيع إلغاء الدفع.** فهو ينطلق كإشعار قبل انتقال المتصفح مباشرة، لذا فإن إعادة `false` أو استدعاء `preventDefault` لا يفعل شيئًا. الطريقة الوحيدة لتقييد الدفع هي منع الزر من الاستجابة للنقرات *قبل* الضغط عليه، وهذا ما تعرضه هذه الصفحة.

  تعامل مع هذا كرادع في واجهة المستخدم، وليس ضمانة قانونية. لا يزال بإمكان متسوق مصمّم الوصول إلى الدفع مباشرة.
</Warning>

<div id="how-it-works">
  ## كيف يعمل
</div>

ثلاثة أجزاء:

1. **كتلة تعليمات برمجية مخصصة** أسفل زر الدفع تعرض مربع الاختيار.
2. أثناء كون المربع فارغًا، تضيف الكتلة فئة إلى أزرار الدفع والدفع السريع في السلة عبر [الجذر الظلي](/ar/aftersell/cart/sdk-overview#shadowroot).
3. **CSS مخصصة** تجعل تلك الفئة تعطّل النقرات.

<div id="step-1-add-the-checkbox-block">
  ## الخطوة 1: أضف كتلة مربع الاختيار
</div>

أضف [كتلة تعليمات برمجية مخصصة](/ar/aftersell/cart/custom-code-blocks) أسفل كتلة زر الدفع لديك، وحوّلها إلى وضع **React component**، والصق:

```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>
  );
}
```

انقر **Compile**، ثم فعّل **"Use custom template"**. لا تعرض الكتلة شيئًا حتى تفعل ذلك.

اعتماد `props.cart` مهم: فهو يعيد تطبيق الفئة بعد إعادة عرض السلة، التي كانت ستمحوها لولا ذلك.

<div id="step-2-add-the-css">
  ## الخطوة 2: أضف CSS
</div>

في **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` هو ما يمنع النقر فعليًا؛ والشفافية تُظهر للمتسوق السبب فقط.

<div id="step-3-test-it">
  ## الخطوة 3: اختبره
</div>

في [المعاينة](/ar/aftersell/cart/previewing-carts)، تأكد من أن:

* زر الدفع خافت ولا يستجيب للنقرات عند التحميل.
* تحديد المربع يفعّله؛ ومسحه يعطّل الزر مرة أخرى.
* أزرار الدفع السريع مقيّدة أيضًا.
* إضافة عنصر أو إزالته لا تعيد تفعيل الزر أثناء كون المربع فارغًا.

الأخيرة هي الفشل الشائع. إذا أعاد الزر تفعيل نفسه بعد تغيير في السلة، فالتأثير لا يُعاد تشغيله. تحقق من وجود `props.cart` في مصفوفة الاعتماديات.

<div id="tracking-who-accepted">
  ## تتبع من وافق
</div>

مربع الاختيار حالة في المتصفح فقط؛ لا يصل أبدًا إلى الطلب. لتسجيل الموافقة، ادمغها على كل سطر كخاصية وقت الإضافة إلى السلة:

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

أضف ذلك إلى نموذج المنتج في القالب. تقرأ Shopify `properties[...]` مباشرة من النموذج، لذا تصل القيمة إلى الطلب أيًا كان من يقوم بالإضافة: Aftersell أو القالب أو تطبيق آخر.

الخاصية المسبوقة بـ `_` تبقى خارج السطر المرئي للمشتري لكنها تصل إلى Shopify، لذا تظهر في الطلب. هذا يسجّل *أي* إصدار من الشروط كان ساريًا، وليس أن المتسوق حدّد المربع.

<div id="things-to-get-right">
  ## أمور يجب ضبطها بشكل صحيح
</div>

* **استهدف فئات `cart-external-*` فقط.** نظائرها `cart-internal-*` هي أعمال السلة الداخلية، وليست مقبضًا لتعليماتك البرمجية. راجع [CSS المخصصة](/ar/aftersell/cart/custom-css).
* **تحقق من وجود `shadowRoot`** قبل استخدامه. فهو `undefined` حتى تُقلع السلة.
* **لا تعرض الكتلة شيئًا حتى تُحمّل السلة**، لذا لا يكون زر الدفع نشطًا للحظة قبل تطبيق البوابة.
* **كتلة React التي تُلقي خطأً لا تعرض شيئًا** وتستمر بقية السلة في العمل، ما يعني هنا زر دفع غير محروس. اختبر في المعاينة قبل النشر.

<div id="where-to-go-next">
  ## إلى أين تذهب بعد ذلك
</div>

* **[كتل التعليمات البرمجية المخصصة](/ar/aftersell/cart/custom-code-blocks)**: وضع React وخصائصه.
* **[CSS المخصصة](/ar/aftersell/cart/custom-css)**: اصطلاح الفئات العامة.
* **[الأحداث](/ar/aftersell/cart/sdk-events#checkout)**: ما يستطيع حدث `checkout` فعله وما لا يستطيع.