GiftCards container

The GiftCards container manages the application and removal of gift cards to the shopping cart. It provides a text box for users to enter gift card codes. The container uses the applyGiftCardToCart and removeGiftCardFromCart functions to apply the coupon to the cart. When a gift card code is applied, the corresponding amount is subtracted from the total order value, and the discount is displayed in the cart and order summary.

The Adobe Commerce merchant can manage gift card configuration from Marketing > Gift Card Accounts.

GiftCards container

Configurations

The GiftCards container provides the following configuration options:

Option	Type	Req?	Description
className	string	No	CSS class applied to accordion.
accordionSectionTitle	string	No	Accordion section title overriding translation.
accordionSectionIcon	VNode	No	Coupons section icon.
couponCodeField	VNode	No	Coupon code input field.
applyCouponsButton	VNode	No	The button used to apply a coupon.
error	VNode	No	An error message
appliedCoupons	VNode	No	List of applied coupon codes.
onApplyCoupon	function	No	Callback when applying a coupon code.

Example configuration

The following example demonstrates how to render the GiftCards container as part of the OrderSummary slot:

provider.render(OrderSummary, {
 routeProduct: (product) => rootLink(`/products/${product.url.urlKey}/${product.topLevelSku}`),
 routeCheckout: checkoutURL ? () => rootLink(checkoutURL) : undefined,
 slots: {
   GiftCards: (ctx) => {
     const giftCards = document.createElement('div');

     provider.render(GiftCards)(giftCards);

     ctx.appendChild(giftCards);
   },
 },
})($summary);