Want to Disable the add to cart button if the customer's store credit is less than Product Price

[fazilat]

I have enabled the store credit payment method. https://prnt.sc/Wuk_QZOs2sg0

and assigned store credit to a customer https://prnt.sc/DktmHNjR9yrB 

I want to disable the add to cart button if the Store credit amount is less than the product price. https://prnt.sc/C48lS5ejCYtw 

and also show the this store credit amount on the product page. like this screenshot https://prnt.sc/f39Z_ukLxpt1 

i used this JS for disabling the button. but the issue is that customer.store_credit value. how I can store customer.store_credit value in my product page by fetching it directly from the customer account?

<script> document.addEventListener("DOMContentLoaded", function() {
// Assuming storeCredit is set in Liquid and accessible here
var storeCredit = {{ customer.store_credit | default: 0 }};
var productPrice = {{ product.price | divided_by: 100.0 | money_without_currency }};

// Convert productPrice to a float for comparison
productPrice = parseFloat(productPrice);

// Get the Add to Cart button
var addToCartButton = document.querySelector('[name="add"]');

// Check if store credit is less than product price
if (storeCredit < productPrice) {
// Disable the button
addToCartButton.disabled = true;
addToCartButton.classList.add('disabled'); // Optionally add a disabled class for styling

// Optionally, show a message to the user
var message = document.createElement("p");
message.textContent = "Insufficient store credit to purchase this item.";
message.style.color = "red"; // Styling the message
addToCartButton.parentNode.insertBefore(message, addToCartButton.nextSibling);
}
});
</script>

Note: No tag based, no meta fields based fetching. because our store's total system is based on store credit. even user can access to their account for checking credits.

[fazilat]

hi

Thanks for the prompt response but it does not answered my question. my question was "i used this JS for disabling the button. but the issue is that customer.store_credit value. how I can store/access customer.store_credit value in my product page?" and you assumed that my theme and/or apps store the customer's store credit balance already. but my actual case is how can i store the customer store credit in my theme or product file.