Skip to main content

Apply Discount / Promo Code

This guide explains how to apply promotional discounts and coupon codes to a shopping cart in Elastic Path.

Using the manageCarts SDK Method for Promotions

The manageCarts method can be used to apply discount codes to a cart:

import { manageCarts, getCartId } from "@epcc-sdk/sdks-shopper";

// Apply a promotion code to the cart
const applyPromotion = async (code) => {
// Validate the promotion code
if (!code.trim()) {
throw new Error("Please enter a promotion code");
}

// Get the current cart ID
const cartId = getCartId();
if (!cartId) {
throw new Error("Cart not found");
}

// Apply the promotion code
const response = await manageCarts({
path: {
cartID: cartId,
},
body: {
data: {
type: "promotion_item",
code: code.trim(),
},
},
});

return response.data;
};

Removing Discount Codes

Use the deleteAPromotionViaPromotionCode method to remove an applied discount:

import {
deleteAPromotionViaPromotionCode,
getCartId,
} from "@epcc-sdk/sdks-shopper";

// Remove a promotion from the cart
const removePromotion = async (code) => {
// Get the current cart ID
const cartId = getCartId();
if (!cartId) {
throw new Error("Cart not found");
}

// Remove the promotion
await deleteAPromotionViaPromotionCode({
path: {
cartID: cartId,
promoCode: code,
},
});

return { success: true };
};

Handling Promotion Updates in Your UI

// Example of applying a promotion code with state updates
const [promoCode, setPromoCode] = useState("");
const [applyingPromo, setApplyingPromo] = useState(false);
const [promoError, setPromoError] = useState(null);
const [successMessage, setSuccessMessage] = useState("");

const handleApplyPromotion = async (code) => {
setApplyingPromo(true);
setPromoError(null);

try {
await applyPromotion(code);

// Clear the input
setPromoCode("");

// Fetch updated cart to refresh UI with new promotions
await fetchCart();

// Show success message
setSuccessMessage(`Promotion "${code}" applied successfully`);
} catch (error) {
setPromoError(error.message);
} finally {
setApplyingPromo(false);
}
};

// Example of removing a promotion code
const [removingPromo, setRemovingPromo] = useState(false);

const handleRemovePromotion = async (code) => {
setRemovingPromo(true);

try {
await removePromotion(code);

// Fetch updated cart to refresh UI
await fetchCart();

// Show success message
setSuccessMessage(`Promotion removed`);
} catch (error) {
setPromoError("Failed to remove promotion");
} finally {
setRemovingPromo(false);
}
};

Common UI Patterns

Promo code implementation in a cart UI:

// Promotion code input and apply button
<div className="mt-4">
<label className="block text-sm font-medium text-gray-700 mb-1">
Promotion Code
</label>
<div className="flex">
<input
type="text"
value={promoCode}
onChange={(e) => setPromoCode(e.target.value)}
className="flex-grow px-3 py-2 border border-gray-300 rounded-l-md focus:ring-blue-500 focus:border-blue-500"
placeholder="Enter code"
disabled={applyingPromo}
/>
<button
onClick={() => handleApplyPromotion(promoCode)}
disabled={!promoCode.trim() || applyingPromo}
className="bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600 disabled:bg-blue-300"
>
{applyingPromo ? "Applying..." : "Apply"}
</button>
</div>
{promoError && <p className="mt-1 text-sm text-red-600">{promoError}</p>}
</div>;

{
/* Display applied promotions */
}
{
activePromotions.length > 0 && (
<div className="mt-4">
<h4 className="text-sm font-medium mb-2">Applied Promotions</h4>
<ul className="divide-y divide-gray-200">
{activePromotions.map((promo) => (
<li key={promo.id} className="py-2 flex justify-between items-center">
<span className="text-sm">{promo.name || promo.id}</span>
<button
onClick={() => handleRemovePromotion(promo.promotion_id)}
className="text-sm text-red-500 hover:text-red-700"
disabled={removingPromo}
>
Remove
</button>
</li>
))}
</ul>
</div>
);
}

Discount Stacking

Understanding how multiple discounts interact:

  • Stacking rules: Whether multiple promotions can be applied together
  • Discount precedence: How the system prioritizes competing discounts
  • Maximum discount limitations: Caps on total discount amounts

Integration with Promotions Service

  • How the cart service connects with the promotions system
  • Automatic vs. manual promotions
tip

For a fully functional implementation of promotion code handling, see the SPA Cart Example on GitHub.