Remove Estimated Taxes from checkout

Remove Estimated Taxes from checkout

anasfarooqui
Shopify Partner
10 0 0

I created a VAT validation form on the checkout page via Checkout UI Extensions and I want if the customer to validate their details so the Estimated Taxes are removed

Replies 14 (14)

GTLOfficial
Shopify Partner
769 160 169

Hello @anasfarooqui 

please provide url and password of your store.

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
anasfarooqui
Shopify Partner
10 0 0

As of now, I did this on my local machine.

Url - https://anasfarooqui.myshopify.com/

Screenshot from 2025-01-21 11-49-42.png

 

GTLOfficial
Shopify Partner
769 160 169

store password..???

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
anasfarooqui
Shopify Partner
10 0 0

paswrd-Orange@123

Dotsquares
Shopify Partner
48 1 3

Hi @anasfarooqui 

 

Is the VAT details of the customer's verified via third-party API? or Only providing the details will remove the estimated tax?

 

your response will help to know the process.

 

regards,

Dotsquares Ltd


Problem Solved? ✔ Accept and Like solution to help future merchants.


Shopify Partner Directory | Trustpilot | Portfolio
anasfarooqui
Shopify Partner
10 0 0

Yes, the VAT details verified via third-party API

Dotsquares
Shopify Partner
48 1 3

Okay, if the detail verification is working, then create a logic with the API response & VAT estimation. 

If the response from the API is true, then deduct the VAT in the total amount.

 

If you need help to create the logic and implement it in your store, let me know.

 

Regards,

Dotsquares Ltd


Problem Solved? ✔ Accept and Like solution to help future merchants.


Shopify Partner Directory | Trustpilot | Portfolio
anasfarooqui
Shopify Partner
10 0 0

yes, I need help to build the logic because What I did I got a true response and according to that I am trying to update the tax_exempt but it's not working so I want to know how I can remove the estimated tax if the response is true.

await api.applyAttributeChange({
type: "updateAttribute",
key: "tax_exempt",
value: "true"
});
Dotsquares
Shopify Partner
48 1 3

Based on the third-party VAT validation response, you'll need to implement the logic to recalculate the order total. However, please note that this solution will only be applicable for shops with a Shopify Plus subscription. To proceed, you'll need to take the following steps:

  1. Set up manual tax rates in the store.
  2. Use third-party VAT validation to recalculate the applicable tax and leverage the Shopify Draft Order API to adjust the basket total accordingly.

Let me know if you need further clarification or assistance with any part of the implementation!

Dotsquares Ltd


Problem Solved? ✔ Accept and Like solution to help future merchants.


Shopify Partner Directory | Trustpilot | Portfolio
anasfarooqui
Shopify Partner
10 0 0

Thanks for that but can you explain to me a bit deeper and step by step so that I can Implement the logic and achieve my goal?

Dotsquares
Shopify Partner
48 1 3

Yes, of course, but I can't explain the whole steps here because it's a lengthy process & not quick and straightforward.

Dotsquares Ltd


Problem Solved? ✔ Accept and Like solution to help future merchants.


Shopify Partner Directory | Trustpilot | Portfolio
anasfarooqui
Shopify Partner
10 0 0

So, can we connect on Google Meet or is there any other way to connect? and below is my checkout UI extension code - 

import {
extension,
Banner,
BlockStack,
Button,
TextField,
Heading,
Text,
InlineStack
} from "@shopify/ui-extensions/checkout";
import Cookies from "js-cookie";
import createApp from "@shopify/app-bridge";
import { Cart } from "@shopify/app-bridge/actions";

import jwtDecode from "jwt-decode";

// 1. Choose an extension target
export default extension(
"purchase.checkout.shipping-option-list.render-after",
(root, api) => {
let inputField1Value = "";
let companyNameValue = "";
let locationValue = "";
 
const messageContainer = root.createComponent(BlockStack, { spacing: "loose" }); // Placeholder for messages

// Use Shopify's storage API
const saveToStorage = async (key, value) => {
try {
// Use the metafields API to store data
await api.storage.write(key, value);
console.log(`Saved ${key} to storage:`, value);
} catch (error) {
console.error(`Error saving ${key} to storage:`, error);
}
};

const getFromStorage = async (key) => {
try {
const value = await api.storage.read(key);
console.log(`Retrieved ${key} from storage:`, value);
return value;
} catch (error) {
console.error(`Error reading ${key} from storage:`, error);
return null;
}
};

async function onButtonClick() {
let apiSession = api;
const taxValue = apiSession.cost.totalTaxAmount.current.amount;
const shopStoreFrontUrl = apiSession.shop.myshopifyDomain;
const countryCodeForCouponApply = api.shippingAddress.current?.countryCode
const checkoutId = apiSession.checkoutToken?.current

console.log("text amount ---", apiSession.applyCartLinesChange())
console.log("lines ---", api.lines);

let sessionTax = await api.cost.totalTaxAmount.current.amount;
// console.log("Tax Amount -----------",apiSession.cost.totalTaxAmount.current.amount);
console.log("apiSession -----------",apiSession);
console.log("taxValue -----------",taxValue);
const apiUrl = `https://localhost/api/validate?UstId_1=${inputField1Value}&Firmenname=${companyNameValue}&Ort=${locationValue}&taxValue=${taxValue}&shopStoreFrontUrl=${shopStoreFrontUrl}`;
 
try {
const response = await fetch(apiUrl);

if (!response.ok) throw new Error("API request failed");

const responseData = await response.json();
const discountCode = responseData.data;
if (responseData.errorCode == 200 || responseData.errorCode == 216 || responseData.errorCode == 218 || responseData.errorCode == 219) {
if(countryCodeForCouponApply != "DE"){
await api.applyDiscountCodeChange({
type: "addDiscountCode",
code: responseData.data,
});
 
// Save values to storage instead
await saveToStorage('discountCode', responseData.data);
}
 
// Create the note content including both VAT ID and company name
const noteContent = `local-vat-id: ${inputField1Value}, vat-company: ${companyNameValue}`;
await api.applyNoteChange({
type: "updateNote",
note: noteContent,
});
 
messageContainer.replaceChildren(
root.createComponent(
BlockStack,
{ border: "dotted", padding: "tight" },
[
// root.createComponent(Heading, { level: 3 }, "Success Validation"),
root.createComponent(
Banner,
{ title: "Success", status: "success" },
"VAT validation passed successfully!"
),
]
)
);
} else {
messageContainer.replaceChildren(
root.createComponent(
BlockStack,
{ border: "dotted", padding: "tight" },
[
// root.createComponent(Heading, { level: 3 }, "Validation Failed"),
root.createComponent(
Banner,
{ title: "Error", status: "critical" },
`Validation failed: ${responseData.message}`
),
]
)
);
}
} catch (error) {
console.error("Error fetching data:", error);
messageContainer.replaceChildren(
root.createComponent(
BlockStack,
{ border: "dotted", padding: "tight" },
[
root.createComponent(Heading, { level: 3 }, "VAT Validation"),
root.createComponent(
Banner,
{ title: "Error", status: "critical" },
"An error occurred while EU VAT ID validation."
),
]
)
);
}
}

// Function to render the VAT Validation section based on the provinceCode
const renderVATValidationSection = async (countryCode) => {
const validCountryCodes = [
"AT", "BE", "BG", "HR", "CY", "CZ", "DK", "EE", "FI", "FR",
"DE", "GR", "HU", "IE", "IT", "LV", "LT", "LU", "MT", "NL",
"PL", "PT", "RO", "SK", "SI", "ES", "SE", "IN"
];
// store country code for validatedate the discount for germany only
if (!validCountryCodes.includes(countryCode)) {
// get discount Code
const savedValue = await getFromStorage('discountCode');
console.log('Saved discount code ANAS:', savedValue);
try {
await api.applyGiftCardChange({
type: "removeGiftCard",
code: savedValue
});
console.log("Discount code removed successfully.", savedValue);
} catch (error) {
console.error("Error removing discount code:", error);
}
root.replaceChildren(
root.createComponent(
Banner,
{ title: "Notice", status: "info" },
"EU VAT ID validation is not required for your country."
)
);
} else {
// Create the VAT Validation section
const vatValidationSection = root.createComponent(
BlockStack,
{ border: "dotted", padding: "tight" },
[
root.createComponent(Heading, { level: 3 }, "EU VAT ID validation"),
root.createComponent(
Text,
{ size: "small", appearance: "subdued" }, // Small, subtle text style
"Please enter your VAT ID below for validation." // Subheading text
),
root.createComponent(TextField, {
label: "VAT ID",
onInput: (value) => {
inputField1Value = value;
},
}),
root.createComponent(TextField, {
label: "Company Name",
onInput: (value) => {
companyNameValue = value;
},
}),
root.createComponent(TextField, {
label: "Location",
onInput: (value) => {
locationValue = value;
},
}),
messageContainer,
root.createComponent(
Button,
{
onPress: () => onButtonClick(),
},
"EU VAT ID Check"
),
]
);
root.replaceChildren(vatValidationSection);
}
};

api.lines.subscribe((lines) => {
console.log("lines data:", lines); // Debugging
});
 
api.lines.subscribe((query) => {
console.log("lines query:", query[0].merchandise); // Debugging
});

api.instructions.subscribe((instructions) => {
 
if (!api.instructions.current.discounts.canUpdateDiscountCodes) {
root.replaceChildren(
root.createComponent(
Banner,
{ title: "checkout-extension-1", status: "warning" },
api.i18n.translate("attributeChangesAreNotSupported")
)
);
} else {
// Create the VAT Validation section & Get the initial countryCode
const countryCode = api.shippingAddress.current?.countryCode || null;
renderVATValidationSection(countryCode);

// Listen for changes to the shipping address (countryCode)
api.shippingAddress.subscribe((newAddress) => {
const newCountryCode = newAddress?.countryCode || null;
renderVATValidationSection(newCountryCode);
});
 
}
});
}
);
Dotsquares
Shopify Partner
48 1 3

Yes, we can connect via Google Meet or MS Teams. You can contact us through the Shopify Partner Directory. refer to my signature.

 

Regards,

Dotsquares Ltd


Problem Solved? ✔ Accept and Like solution to help future merchants.


Shopify Partner Directory | Trustpilot | Portfolio
anasfarooqui
Shopify Partner
10 0 0

I called on the given number but maybe there is a different team so, is there a way to connect with you directly?