Add Customized Elements to Checkout
The Checkout Lightweight Frontend Experience (LiFE) mechanism enables merchants to add customizable text fields, checkboxes, and other elements to a variety of locations on the checkout page.
Common uses for Checkout LiFE include:
- An HTML snippet including a link to more information.
- A checkbox to indicate whether the customer is tax exempt.
- A text input field for a VAT ID.
- A long text input field for a gift message.
You can add LiFE elements using the Checkout Admin API. This guide provides information about what LiFE elements are and how to add them to your checkout experience.
Prerequisites
- Complete the steps outlined in the Bold Checkout Getting Started guide.
Checkout LiFE is only supported for merchants using the one page or three page Bold-hosted checkout flows. Checkout LiFE is not supported for self-hosted flows because these flows can be fully customized.
LiFE element types
You can add the following user interface elements using the Checkout LiFE mechanism:
- A small text field
- A large text area
- A check box
- An HTML snippet
Anchor locations
You can place an extension at one of seven anchor points in the checkout experience:
- Above the customer info section —
customer_info
- Below the shipping address section —
shipping
- Below the billing address section —
billing_address_after
- Below the shipping method section —
shipping_lines
- Below the payment method section —
payment_gateway
- At the bottom of the main page, below the Complete order button —
below_actions
- At the top of the summary sidebar —
summary_above_header
One page checkout
The following screenshot shows these anchor locations on the one page checkout experience:
Three page checkout
The following screenshots show these anchor locations on the three page checkout experience:
Add a LiFE element
Use the Create Element endpoint to add an element to the checkout experience on your store. This section includes several examples of how to do so.
Text area example
The following cURL snippet shows an example of how to add a text area that enables the shopper to add a gift message to their order:
curl --request POST 'https://api.boldcommerce.com/checkout/shop/{shop_identifier}/life_elements' \
--header 'Authorization: Bearer {API Access Token}' \
--header 'Bold-API-Version-Date: 2022-05-01' \
--header 'Content-Type: application/json' \
--data '{
"location": "customer_info",
"input_type": "textarea",
"input_label": "Gift message",
"input_placeholder": "Add your gift message here.",
"input_required": true,
"meta_data_field": "gift_message",
"order_asc": 1
}'
The following screenshot shows the resulting change to the user interface:
HTML example
The following cURL snippet shows an example of how to add a link to the store's return policy using the HTML element:
curl --request POST 'https://api.boldcommerce.com/checkout/shop/{shop_identifier}/life_elements' \
--header 'Authorization: Bearer {API Access Token}' \
--header 'Bold-API-Version-Date: 2022-05-01' \
--header 'Content-Type: application/json' \
--data '{
"location": "shipping_lines",
"input_type": "HTML",
"input_default": "<a href='https://example.com/return-policy'>Learn about our return policy.</a>",
"input_required": false,
"meta_data_field": "return_policy",
"order_asc": 1
}'
The following screenshot shows the resulting change to the user interface: