Updating my own custom tax

Accounting & Taxes

Topic summary

A developer is building a Remix app with Shopify checkout UI and cart-checkout-validation extensions to implement custom Indian GST calculations. The system calculates CGST and SGST when the customer’s province code matches the shop’s location, or IGST when they differ, using product metafield data (gst_rate).

Current Implementation:

  • Successfully displays calculated GST rates in the checkout UI
  • Reads GST rates from product metafields
  • Compares shipping address province code with shop province code
  • Shows appropriate tax breakdown (CGST/SGST or IGST) and total amounts

Problem:
The developer can display the calculated GST values but cannot actually update/apply them as custom taxes in the Shopify checkout. Shopify’s default tax system is disabled.

Status:
The question remains unanswered. The developer has shared their checkout UI extension code and is seeking guidance on how to programmatically update custom tax values in the checkout session.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hello, guys i am using an remix app and in that app i am using checkout UI extension as well as cart-checkout-validation extension. What i am doing is i have an meta field name gst_rate i am calculating Indian GST like CGST, SGST and IGST based on province code. If province code is same then calculating an CGST, SGST else IGST. now what i want to do is i want to update that GST in checkout and update custom tax. Shopify default tax is off so there is no other GST include right now. How can i update GST. please help me with this Thank you in advance to give me replay.

here is an code of checkout Ui extension code

import { useEffect, useState } from “react”;
import {
useCartLineTarget,
Text,
useAppMetafields,
reactExtension,
useApi,
BlockLayout,
useCartLines,
} from “@shopify/ui-extensions-react/checkout”;

export default reactExtension(
“purchase.checkout.cart-line-item.render-after”,
() => (
<>

</>
),
);

function App() {
const productsMetafields = useAppMetafields({
type: “product”,
namespace: “custom”,
key: “gst_rate”,
});

const shopAddressMetafields = useAppMetafields({
type: “product”,
namespace: “custom”,
key: “shop_address”,
});

const cartLineTarget = useCartLineTarget();
const { shippingAddress } = useApi();
const cart = useCartLines();
const [metafields, setMetafields] = useState(“”);
const [ownerProvinceCode, setOwnerProvinceCode] = useState(“”);
const [CGST, setCGST] = useState(null);
const [SGST, setSGST] = useState(null);
const [IGST, setIGST] = useState(null);
const [productData, setProductData] = useState(null);

const shippingAddressProvinceCode = shippingAddress?.current?.provinceCode;

useEffect(() => {
if (!cartLineTarget) return;

const productData = cart?.find(
(data) =>
data?.merchandise?.product?.id ===
cartLineTarget?.merchandise?.product?.id,
);

if (productData) {
setProductData({
amount: productData?.cost?.totalAmount?.amount,
currencyCode: productData?.cost?.totalAmount?.currencyCode,
productId: productData?.merchandise?.product?.id,
productTitle: productData?.merchandise?.title,
cartLineId: productData?.id,
});
}
}, [cartLineTarget, cart]);

useEffect(() => {
const productId = cartLineTarget?.merchandise?.product?.id;
if (!productId) {
return;
}

const productMetafield = productsMetafields.find(({ target }) => {
return gid://shopify/Product/${target.id} === productId;
});

if (
productMetafield &&
typeof productMetafield?.metafield?.value === “string”
) {
setMetafields(productMetafield?.metafield?.value);
}
}, [cartLineTarget, productsMetafields]);

useEffect(() => {
const productId = cartLineTarget?.merchandise?.product?.id;
if (!productId) {
return;
}

const addressMetafield = shopAddressMetafields.find(({ target }) => {
return gid://shopify/Product/${target.id} === productId;
});

if (typeof addressMetafield?.metafield?.value === “string”) {
setOwnerProvinceCode(addressMetafield?.metafield?.value);
}
}, [cartLineTarget, shopAddressMetafields]);

useEffect(() => {
if (metafields && shippingAddressProvinceCode) {
if (shippingAddressProvinceCode === ownerProvinceCode) {
const CGSTGstRates = parseFloat(metafields) / 2;
const SGSTGstRates = parseFloat(metafields) / 2;
setCGST(CGSTGstRates);
setSGST(SGSTGstRates);
} else {
const IGSTRate = parseFloat(metafields);
setIGST(IGSTRate);
}
}
}, [metafields, shippingAddressProvinceCode]);

if (!productData) {
return null;
}

return (

{shippingAddressProvinceCode === ownerProvinceCode ? (
<>
CGST: {CGST}
SGST: {SGST}
Total GST: {CGST + SGST}

Total Amount: {parseFloat(productData.amount) + (CGST + SGST)}{" “}
{productData.currencyCode}

</>
) : (
<>
IGST: {IGST}

Total Amount: {parseFloat(productData.amount) + IGST}{” "}
{productData.currencyCode}

</>
)}

);
}

Thank you.