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

await Superfans.actions.applyDiscount([code]) // code -> Discount Code from Shopify

Parameter	Type	Required	Description
code	Array of string	Yes	The discount code which is created in Shopify

Structure of Response

Status	Response
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

const discountData = {
  title: "SAVE10",
  code: "SAVE10"
};

document.getElementById("couponCode").value = discountData.title;

async function applyDiscountOnCart() {
  document.getElementById("applyCoupon").disabled = true;
  document.getElementById("applyCoupon").textContent = "Applied";

  try {
    await Superfans.actions.applyDiscount([discountData.code]);
  } catch (error) {
    await Superfans.actions.showToast({
      title: "Something went wrong",
      message: "Please try again."
    });
  }
}

<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;
  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;
  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

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

Caveats

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