Getting started

Terms & Conditions setup

The Terms & Conditions feature must be enabled and configured to be available during the guest checkout process before placing an order. The configured terms and conditions will appear in the Checkout component within the TermsAndConditions container as specific checkboxes. Each checkbox will display a label with text and links, directing users to the corresponding agreement pages configured at store-view level.

How to enable and configure the Terms and Conditions

This checkout component is configurable on a per store-view basis on EDS, but a merchant can also rely on the Admin Panel’s configuration. Follow the next step-by-step guide to enable and configure the Terms and Conditions:

Enable the component

The merchant has to enable the component in the Admin Panel as following:

Log in to the Admin Panel.
On the Admin sidebar, go to Stores > Settings > Configuration.
In the left panel, expand Sales and choose Checkout.
Expand the Checkout Options section.
Set Enable Terms and Conditions to “Yes”.
Click Save Config.

See Terms and conditions for checkout documentation for more information on how to enable the terms and conditions using the Admin Panel.

Create the agreement document

The agreements pages will be created ONLY using document-based authoring (DBA) within EDS instead of using the Admin Panel, allowing the merchant to create and manage as many agreements pages and content as required for each store-view and language.

Configure the agreement checkbox label

Use the EDS placeholders or the Admin Panel instructions in the following tabs to configure the agreement checkbox label.

Using EDS placeholders
Using the Admin Panel

For each agreement, the merchant has to configure into the placeholders.xlsx EDS file the following information:

An identifier: It’s the reference that identifies the label translated
A label: It’s the text to display next to the checkbox, and will be directly retrieved from the Boilerplate translations for a specific store-view and language. This data accepts HTML with links to a specific page in EDS

Similarly, the merchant can configure the translation for the validation error that appears when the user clicks the Place Order button and an agreement is not checked, using the “Checkout.TermsAndConditions.error” identifier.

Sample of placeholders.xlsx file:

"Checkout.TermsAndConditions.label", "I have read, understand, and accept the <a href='/en/privacy-policy' target='_blank'>Terms of Use, Terms of Sales, Privacy Policy, and Return Policy</a>."
"Checkout.TermsAndConditions.terms_label", "By placing an order, you are agreeing to be bound by our <a href="/en/terms-and-conditions" target="_blank">Terms And Conditions</a>."
"Checkout.TermsAndConditions.privacy_label", "By placing an order, you acknowledge our <a href="/en/privacy-policy" target="_blank">Privacy Policy</a>."
"Checkout.TermsAndConditions.error", "Please accept the Terms and Conditions to continue."

These labels will be used in order to render the TermsAndConditions container inside of the commerce-checkout.js block file.

Visit the TermsAndConditions container documentation to see examples on how to use these labels.

The merchant has to configure the checkbox label for each agreement using the Admin Panel. As mentioned before, the Admin Panel allows to create configurations per store-view level as following:

Log in to the Admin Panel.
On the Admin sidebar, go to Stores > Settings > Terms and Conditions.
In the upper-right corner, click Add New Condition button.
Enter the next Terms and Conditions information:
- Condition Name The agreement identifier
- Status Attribute to indicate if it’s available or not:
  - ‘Enabled’; the agreement will be retrieved by the GraphQL API query
  - ‘Disabled’; the agreement won’t be retrieved by the GraphQL API query
- Applied Specifies the mode how the checkbox should appear:
  - ‘Manually’: the user is required to manually check and accept the conditions to place an order
  - ‘Automatically’: the checkbox will appear checked by default, conditions are automatically accepted upon checkout
- Store View Defines the scope at store view level for this agreement where you want these Terms and Conditions to be used
- Checkbox Text It contains directly the text to show; it accepts HTML with links to a specific page in EDS
Some attributes are not used
Although the following attributes are provided by the Admin Panel, they are not going to be utilized in the current solution because they will be handled in EDS. Merchants are able to work on their own solution if they want to use them:
- Content As described above, the content for the agreements pages will be created ONLY using EDS
- Show Content as (Text, HTML) Not really needed because EDS pages accepts HTML code
- Content Height (css)
Click Save Condition.
These entries will be used in order to render the TermsAndConditions container inside of the commerce-checkout.js block file.

Visit the TermsAndConditions container documentation to see examples of this feature.

See the Terms and conditions for checkout documentation to learn how to configure the terms and conditions using the Admin Panel.