Checkout UI Extension

Shopify Plus
1

Hi guys, I’ve just created a UI extension and I want to show the shipping price separately and the duties and tax prices separately in the price breakdown. But I’m not getting them separately from the API - I’m only receiving the total shipping price. In the description, the shipping price and the duties/tax price are shown separately, and I want to display them the same way in the extension as well.
I have chosen this target: purchase.checkout.shipping-option-item.render-after.
If anyone can help, I would really appreciate it.

image
image546×435 12.1 KB

2

Hi @Arman_ali_1

The API often groups these costs into a single total, but since your screenshot shows the breakdown is clearly written in the description text (“Shipping: 23.99 AUD Duties…”), the fastest solution is to extract these numbers from that string.

You can use a Regular Expression (Regex) to parse the title or description field provided by the hook:

const { description } = useShippingOptionTarget();

// Extract values using Regex
const shippingMatch = description.match(/Shipping:\s*([\d.]+)/);
const dutiesMatch = description.match(/Duties.*?:\s*([\d.]+)/);

const shippingPrice = shippingMatch ? shippingMatch[1] : "0.00";
const dutiesPrice = dutiesMatch ? dutiesMatch[1] : "0.00";

Hope this helps!

3

You can’t split duties/taxes from selectedShippingOption.price in that target, it only returns the combined amount. Switch to a checkout-level target (e.g.,purchase.checkout.block.render) where cost.totalDuty and cost.totalTax are available.

4

Hey @Arman_ali_1,

Unfortunately, this is a known limitation of the checkout UI extensions API. The ShippingOption object only gives you cost and costAfterDiscounts - both are the combined total. There’s no separate property for shipping vs duties/taxes.

The breakdown you’re seeing in the description (like “Shipping: 23.99 AUD Duties, taxes and fees: 2.37 AUD”) is just plain text passed through the description field from the carrier service - it’s not structured data you can access separately.

Your options:

  1. Parse the description text - Kind of hacky and unreliable since the format can vary between carriers, but you could try to extract the values with regex if the format is consistent

  2. Use metafields - If you’re controlling the carrier service or working with a third-party that supports it, check if they’re passing this data through the shipping option’s metafields. You can access shippingOption.metafields in your extension

  3. Store it yourself - If your app is the one calculating the rates (via carrier service API), you can store the breakdown in metafields when creating the rate, then read them back in your UI extension

  4. Check the cost API - Try using useCartCost() hook - it gives you totalDutyAmount and totalTaxAmount separately for the whole cart, though this might not give you the per-shipping-option breakdown you need

Would be great if Shopify added separate fields for this in the API. Worth posting a feature request in the Shopify partners feedback portal.

Best,
Shubham | Untechnickle

5

Hi @Arman_ali_1 use the developers forum, it has a massively better signal to noise ratio and actual chance thatshopify devstaff may respond, and minimizes the chances of wasting time listening to bots providing nonsense.

Come correct to increases you chances always provide minimal sample code, or sample responses, doc urls, etc that respect others peoples time in how they would have to replicate an issue.