TermsAndConditions container

The TermsAndConditions container displays a checkbox that users must select to agree to the terms and conditions of the sale before confirming their purchase. During the checkout process, users must check all required agreements before placing an order. If an agreement is unchecked, a validation error appears when the user clicks the Place Order button.

TermsAndConditions configurations

The TermsAndConditions container provides the following configuration options:

Option	Type	Req?	Description
active	boolean	No	Activates/deactivates the container (default value is true).
slots	object	No	Object with a list of agreements to be accepted by the user.

These configuration options implement the TermsAndConditionsProps interface:

TermsAndConditionsProps interface

The TermsAndConditions container receives an object as a parameter which implements the TermsAndConditionsProps interface with the following properties:

export interface TermsAndConditionsProps {
  active?: boolean;
  slots?: {
    Agreements?: SlotProps<{
      appendAgreement: SlotMethod<{
        name: string;
        mode: AgreementMode;
        text?: string;
        translationId?: string;
      }>;
    }>;
  };
}

Set the active property to true to have the container in reactive mode (it is visible and responds to system events). If it is set to false, the container is deactivated (it does not subscribe to system events and is not rendered).

The slots property is an object containing the following properties:

The Agreements property is a handler used to render and configure the list of agreements. It provides a context by including the method appendAgreement() to add a new agreement:

export type SlotProps<T = any> = (
  ctx: T & DefaultSlotContext<T>,
  element: HTMLDivElement | null
) => Promise<void> | void;

export type SlotMethod<P = any> = (
  callback: (next: unknown, state: State) => P
) => void;

export enum AgreementMode {
  MANUAL = 'manual',
  AUTO = 'auto',
}

. . .
  Agreements?: SlotProps<{
    appendAgreement: SlotMethod<{
      name: string;
      mode: AgreementMode;
      text?: string;
      translationId?: string;
    }>;
  }>;

…

<li>The `appendAgreement` configuration is a callback function which accepts the following attributes to configure an agreement:</li>

  - **`name`**
    The agreement identifier
  - **`mode`**
    Specifies the mode how the checkbox should appear:
    - 'manual': the user is required to manually check and accept the conditions to place an order
    - 'auto': the checkbox will appear checked by default, conditions are automatically accepted upon checkout
  - **`text`**
    Optional attribute that contains directly the text to show, and it accepts HTML with links to a specific page in EDS. In case this attribute is not provided, the `translationId` must to. Finally, if both `text` and `translationId` are provided, the `text` has more preference and its content will be shown
  - **`translationId`**
- This attribute references the translation label that contains the checkbox text. It first looks in the placeholders/checkout.json file for this label identifier, otherwise it looks up the entry in the dictionary. This attribute must be provided if it is not. As a reminder, if both `text` and `translationId` are provided, the `text` has more preference and its content will be shown.

## Example 1: Render a custom agreement

The following example renders the `TermsAndConditions` container on the checkout page, displaying a custom agreement that directly includes the label to show along with the link to the EDS page, within the element having the class `.checkout__terms-and-conditions`:

```ts
// Checkout Dropin
import TermsAndConditions from '@dropins/storefront-checkout/containers/TermsAndConditions.js';
import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js';

const $termsAndConditions = checkoutFragment.querySelector(
  '.checkout__terms-and-conditions',
);

CheckoutProvider.render(TermsAndConditions, {
  slots: {
    Agreements: (ctx) => {
      ctx.appendAgreement(() => ({
        name: 'custom',
        mode: 'auto',
        text: 'Custom terms and conditions <a href="/en/terms-and-conditions" target="_blank">Terms & Conditions</a>.',
      }));
    },
  },
})($termsAndConditions),

Example 2: Render three different agreements using the translations configured in EDS

The following example renders the TermsAndConditions container on the checkout page. The container displays three different agreements using the labels from the translations in the placeholders sheet, within the element with the class .checkout__terms-and-conditions:

// Checkout Dropin
import TermsAndConditions from '@dropins/storefront-checkout/containers/TermsAndConditions.js';
import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js';

const $termsAndConditions = checkoutFragment.querySelector(
  '.checkout__terms-and-conditions',
);

CheckoutProvider.render(TermsAndConditions, {
  slots: {
    Agreements: (ctx) => {
      ctx.appendAgreement(() => ({
        name: 'default',
        mode: 'auto',
        translationId: 'Checkout.TermsAndConditions.label',
      }));
      ctx.appendAgreement(() => ({
        name: 'terms',
        mode: 'manual',
        translationId: 'Checkout.TermsAndConditions.terms_label',
      }));
      ctx.appendAgreement(() => ({
        name: 'privacy',
        mode: 'auto',
        translationId: 'Checkout.TermsAndConditions.privacy_label',
      }));
    },
  },
})($termsAndConditions),

Example 3: Render the available agreements configured in the Admin Panel

The following example renders the TermsAndConditions container on a checkout page, displaying the available agreements configured in the Admin Panel retrieved using the getCheckoutAgreements() API function, in the element with the class .checkout__terms-and-conditions:

// Checkout Dropin
import * as checkoutApi from '@dropins/storefront-checkout/api.js';
import TermsAndConditions from '@dropins/storefront-checkout/containers/TermsAndConditions.js';
import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js';

const $termsAndConditions = checkoutFragment.querySelector(
  '.checkout__terms-and-conditions',
);

CheckoutProvider.render(TermsAndConditions, {
  slots: {
    Agreements: async (ctx) => {
      const agreements = await checkoutApi.getCheckoutAgreements();

      agreements.forEach((agreement) => {
        ctx.appendAgreement(() => ({
          name: agreement.name,
          mode: agreement.mode,
          text: agreement.text,
        }));
      });
    },
  },
})($termsAndConditions),