Custom Block SDK
Custom Block SDK
  1. Actions
  2. Cart

Apply Discount

Description

The applyDiscount() action lets you programmatically apply a discount or coupon code to the user’s current cart within the app.
It’s useful when you want to trigger discount application directly from a custom web block — for example, from a “Apply Coupon” button, a promotional banner, or after user input validation.
When invoked, this action applies the given code to the cart and automatically updates the totals on the native checkout or cart screen.

Function Signature

Superfans.actions.applyDiscount([code]) //code -> Disocunt Code from Shopify
ParameterTypeRequiredDescription
codeArray of stringYesThe discount code which is created in Shopify

Structure of Response

StatusResponse
Success{ "status": "success", "message": "Discount applied successfully" }
Invalid Params{ "status": "error", "errorId": 400, "errorHandle": "invalid-params", "message": "Invalid params" }
Unexpected Error{ "status": "error", "errorId": 500, "errorHandle": "unknown-error", "message": "Something unexpected happened" }

Example Usage

// Example JSON data 
// Replace your discount code in json
const discountData = {
 title: "WELCOME30",
 code: "G7X6Xwelcome30NKSYT3G"
};
// Assign value from JSON to input field
document.getElementById("couponCode").value = discountData.title;
// Apply coupon on click function call
function applyDiscountOnCart()
{
document.getElementById("applyCoupon").disabled=true;
document.getElementById("applyCoupon").textContent ="Applied";
Superfans.actions.applyDiscount([discountData.code]);
}

applyDiscountOnCart();
<div class="coupon-wrapper">
 <input type="text" id="couponCode" readonly="">
 <button id="applyCoupon" onclick="applyDiscountOnCart()">Apply</button>
</div>
<p id="statusMessage"></p>
.coupon-wrapper {
 display: flex;
 align-items: center;
 width: 280px;
 background-color: #f8f8f8;
 border-radius: 8px;
 padding: 4px;
}
.coupon-wrapper input {
 flex: 1;
 height: 40px;
 padding: 0 10px;
 font-size: 14px;
 border-radius: 6px 6px 6px 6px;
 background-color: #fff;
 border: 1px solid #e0e0e0;
}
.coupon-wrapper button {
 height: 40px;
 padding: 0 16px;
 font-size: 14px;
 font-weight: bold;
 border: 1px solid #000;
 border-radius: 6px 6px 6px 6px;
 background-color: #fff;
 cursor: pointer;
 transition: background 0.2s ease;
 margin-left:20px;
}
.coupon-wrapper button:hover {
 background-color: #f2f2f2;
}
#statusMessage {
 margin-top: 8px;
 font-size: 13px;
 color: #333;
}

Best Practices

  1. Validate discount codes before applying: Confirm that the discount is valid and active before calling the action.
  2. Provide user feedback: Always use showToast() or showAlert() to inform users about success or failure.
  3. Combine with listeners: Use Vajro.on('cartUpdated', ...) to refresh your UI or cart summary after discount application.
  4. Ensure code format correctness: Most discount codes are case-sensitive and alphanumeric — validate accordingly.
  5. Use with custom UI flows: Ideal for reward banners, loyalty programs, or one-click promo applications.

Caveats

  1. Discount codes must be valid Shopify discount codes or those configured in your store backend.
  2. The SDK doesn’t return validation results directly — use cart update listeners to verify applied changes.
  3. Works only when an active cart session exists.
  4. Repeated application of the same code may not trigger an additional cartUpdated event.