How to add insurance on checkout page and update the total cost?

[deanatkard]

Hi There,

I got a product requirement to add a checkbox in checkout page to allow users to select insurance. I know I will use Extension UI for the checkbox. 

However, the confusing part for me is to update the cost of cart or checkout? How can I do it? 

• create a new product for this insurance? and add the product into the cart (via GraphQL admin api) if users selects it, so the total cost will be automatically added.
• Is there any other better way of doing these types of 3rd party add-on cost? I feel the above approach isn't reliable.

Appreciated,

Thanks,

Regards,

Dean

[heddykhalifa · Accepted solution]

Hey Dean,

Heddy from Gameball here. 

Using a new product for the insurance and adding it to the cart via the GraphQL admin API is a straightforward method, but as you said, it might feel a bit clunky or unreliable, especially if you’re trying to keep things seamless.

Here’s a more refined way to handle it:

1. Use a Line Item Property: Instead of creating a separate product, you can add a custom line item property to the existing product in the cart. This property can represent the insurance cost. Shopify allows you to add custom properties to products in the cart, and you can display this on the checkout page. This way, it doesn’t mess with your inventory, and the insurance cost is tied directly to the item being purchased.

2. Script Editor (for Shopify Plus): If you’re on Shopify Plus, you can use the Script Editor to create a custom script that dynamically adds the insurance cost to the order total if the checkbox is selected. This approach keeps everything contained within the checkout process and doesn’t require any product shenanigans.

3. Checkout UI Extension: Since you mentioned using Extension UI, you can create a checkout extension that adds a custom charge to the order. This can be done through Shopify Functions (for advanced customization) or by manipulating the cart subtotal directly if the user selects the checkbox. This method ensures that the insurance cost is clearly displayed as part of the order total.

4. Custom App: If you're comfortable with development, creating a custom app that listens for the checkbox selection and adjusts the cart total via API could be a more reliable and integrated approach. This app would interact with Shopify’s checkout process to add the insurance cost seamlessly.

If you're leaning towards the first approach, consider implementing some error handling to make sure the insurance product is always correctly added to the cart when needed.

[deanatkard]

Hi Heddy, great answer. Thank you so much. you basically gave me all possible solutions. This is by far than what I got anywhere else.

Yeah, I think I will choose the option 3 as our insurance is for whole order, no need to split it or attach to product level (if it needs to, then option 1 will be the best).

Someone also mentioned to use cart transform api to do it: https://shopify.dev/docs/api/functions/reference/cart-transform, which is similar as your option 1.

Thank you so much Heddy.

Regards,

Dean