How to display a total amount banner in checkout UI extension?

[Ponmari]

How can I get the checkout and order details in checkout UI extension , to show a banner related to the total amount of the order ?

[MastersHub]

Do you have a Shopify Plus plan?

[Ponmari]

Hi @MastersHub

No, I’m working on checkout and customer accounts extensibility preview to test my checkout UI extension app.

Thanks in Advance.

[theaisyaaziz]

Not sure what you’re trying to do but you should be able to get it from the API:

1. if you need the whole order, you can use this API: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/order

useOrder()

2. or, if you just want the total, you can use this API: https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/cost

useTotalAmount()

I haven’t used this specific API, but the code should be something along this line:

import {
useTotalAmount,
} from ‘@shopify/ui-extensions-react/checkout’;
function Extension() {
const {amount, currencyCode} = useTotalAmount();
}

[Ponmari]

Hi @theaisyaaziz

Thank you for the reply, I have already found a way to get the order and shipping details in the checkout page through

let api = useSubtotalAmount();

const Amount = api.amount;

const deliveryGroups = useDeliveryGroups();

console.log(deliveryGroups);
const {
selectedDeliveryOption,
targetedCartLines,
} = useDeliveryGroup(deliveryGroups[0]);

But I’m stuck in getting the shipping settings by the shop owner in the checkout UI extension, Basically I want to get these settings (in the image ) details in my checkout UI extension. How can I get it?

[vinyljosh]

Hi, I’m having an issue getting this to work. I’ve tried to import the useSubtotalAmount and i get the error:

ExtensionRenderError: ReferenceError: useSubtotalAmount is not defined

Screenshot attached. Do i need to adjust anything in the shopify.extension.toml file? api access is set to true.

I’m just trying to get the subtotal amount so i can conditionally display the banner if the cart total is greater than $50.