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.