Add Lightweight Frontend Experience (LiFE) to Checkout

The Checkout Lightweight Frontend Experience (LiFE) feature allows you 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 acknowledge terms and conditions.
• A short text input field for a VAT ID.
• A long text input field for a gift message.

Note: LiFE elements can be added from within the Adobe Commerce admin or via Bold's Checkout Admin API. For information on how to add LiFE using the Checkout Admin API, please refer to our Developer Docs.

This article outlines how to add LiFE elements from within the Adobe Commerce admin.

Important considerations

• The Datepicker element only supports English, French, and Spanish.
• The Datepicker does not allow limits. Any date in the past, present, or future can be selected.
• LiFE is not supported for self-hosted flows because these flows can be fully customized.

LiFE element types

The following table shows the supported user interface elements and potential use cases for each.

LiFE anchor locations

You can place an element at one of the following anchor points in the checkout experience:

1. At the top of the page — main_content_beginning
2. Above the customer info section — customer_info
3. Below the shipping address section — shipping
4. Below the billing address section — billing_address_after
5. Below the shipping method section — shipping_lines
6. Above the payment method section — payment_method_above
7. Below the payment method section — payment_gateway
8. At the bottom of the main page, below the button to continue checkout — below_actions
9. At the top of the summary sidebar — summary_above_header
10. On the thank you page, below the thank you message — thank_you_message
11. On the thank you page, below the order confirmation message — order_confirmation
12. On the thank you page, below the order details — order_details
13. At the bottom of the page — main_content_end

Pro-Tip: An additional anchor location (paypal_additional_information) available exclusively for the PayPal Checkout Flow can be added using the Checkout Admin API. For information, please refer to our Developer Docs.

Three page checkout

Expand the following examples to view screenshots that show these anchor locations on the three page checkout.

Thank you page

Expand the following example to view a screenshot that show these anchor locations on the thank you page.

Add a LiFE element

You can add a LiFE element to the checkout frontend from within the Adobe Commerce admin. Please follow the steps below.

1. In the Adobe Commerce admin, navigate to Stores > Configuration.

   

2. In the Scope drop-down menu at the top of the page, select Main Website.

   Note: This drop-down is titled Store View in Adobe Commerce versions earlier than 2.4.

   
3. In the left-hand menu of the Configuration page, navigate to Sales > Checkout.
   
4. Expand the Bold Checkout Integration (LiFE) Elements section.

   

5. In the Custom elements section, select Add and set the desired properties for your element.
   • Select your preferred Location as outlined in LiFE anchor locations above.
   • Select the element Type as outlined in LiFE element types above.
   • Select whether customers are Required to respond to the element.
   • Enter the Field key. This is the name of the metadata that is added to the order. For example, if the field key is set to giftmessage, you will see giftmessage: Happy birthday! in the order notes.
   • Optional: Enter a name for your element under Label.
   • Optional: Under Placeholder, enter the placeholder value of the element. The behavior of this field depends on the element type.
     • Text or Textarea: This value appears in the input field and disappears when the shopper begins typing.
     • Checkbox: This value appears below the input label.
     • Dropdown: This value appears in the drop-down box before it is expanded.
     • Datepicker: This value appears in the input field and disappears when the shopper selects a date.
   • Optional: Enter the Default input. The behavior of this field depends on element type.
     • Text or Textarea: Set this value to your chosen string. The customer deletes the default input and adds their own value.
     • Checkbox: Set this value to true to make the checkbox automatically selected.
     • Dropdown: Set the value to a comma-separated string of the options you would like the element to display.
     • Datepicker: Set the value to a date string with the format of YYYY/MM/DD. If the default input is not set, the date picker defaults to the current date.
   • Optional: Enter your Validation input. This element requires the use of RegEX. Read more about this below.
   • Add an Index number. If you have two elements in the same location then you must order them as to which should appear first. If you are only creating one element in a location then set the index to 1.
6. Click Save Config.

(Optional) Perform regular expression (regex) validation

RegEx requires advanced technical knowledge. Proceed with RegEx only if you are confident in your ability to create the required syntax. 

For Text and Textarea element types, you can also configure the LiFE elements to perform regular expression (RegEx) validation.

When configured, Bold Checkout evaluates the shopper input at the following points:

• Upon shopper interaction
• Upon button click (to advance to the next page)

If the shopper input fails the RegEx validation, the frontend displays a warning message and prevents the user from proceeding. The error message reads: (Label input) is invalid.

Example
Assume the following:

The Label is set to Shipping note.
The Validation (RegEX) is set to: ^[a-z]{4,100}$, meaning that the input must contain between four and 100 lower case letters.
The customer attempts to proceed without filling in the field.

Then the customer would see the following error: