Component: Checkout Form

The Checkout Form component is the foundation of our checkout experience, providing a powerful and flexible way to capture user input. Built for versatility, it adapts seamlessly to a wide range of scenarios, from simple data capture to complex multi-step checkouts.

It includes a library of reusable subcomponents for common fields such as text, email, address, and payment details. These pre-built elements make it fast and consistent to assemble forms, while still allowing for customisation when needed.

We recommend using the for this component, using the left-side (60%) for the Checkout Form and the right-side (40%) of the page for cart components. Note that this layout is responsive and the right-side will go at the top of the page for smaller devices.

Adding a Subcomponent

To add subcomponents, you'll need the Checkout Form component. Follow these steps:

1. Click on "Add Component". 2. Search for the Checkout Form component under Acquisition. 3. Click on the purple pencil edit button. 4. Select "Edit Subcomponents"

See this article for a list of the available subcomponents: Modular Checkout Subcomponents See this article for more information on customising your subcomponents:

Common customisations for Form subcomponents

Prop Label	Type	Default Value	Info
Required field label	string	Required	This text will appear next to all required fields. If left blank, no indicator will be displayed.
Optional field label	string		This text will appear next to all optional fields. If left blank, no indicator will be displayed.
Submit button label	string	Submit
Order complete URL	string	/complete/	URL to redirect customer to after successful form submission
Invalid form message	rich text
Invalid form message font color	color	#856404
Invalid message background color	color	#FFF3CD