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

1. Complete the steps outlined in the Bold Checkout Getting Started guide.

note

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:

1. Above the customer info section — customer_info
2. Below the shipping address section — shipping
3. Below the billing address section — billing_address_after
4. Below the shipping method section — shipping_lines
5. Below the payment method section — payment_gateway
6. At the bottom of the main page, below the Complete order button — below_actions
7. 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: