Apply gift cards in the cart

[maplessmann]

Is there a way to apply gift card codes in the cart, similar to how demo store does for discount codes?

At checkout people can insert discount codes and gift card codes in the same input:

I was wondering if this is possible to achieve with Hydrogen 🤔

I know that I could pass a custom method for customMethods__unstable but it looks like there's no Cart mutation for updating gift cards like there is for discount codes with cartDiscountCodesUpdate. I'm not sure if I can use the checkoutGiftCardsAppend mutation since it requires a checkout ID

[wizardlyhel]

@maplessmann Hi, we just merged #2298 that would add the method for applying gift card code. This method will be available in the September release. You only need a cart id to add a gift card code to cart.

As for combining the gift card code and discount code input into one, this is certainly do-able. However, you would need to handle the logic of distinguishing a gift card code input vs a discount code input in your routes/cart.ts

[ihome-wangfanyu]

@wizardlyhel So, is it possible to apply multiple gift cards here and how to delete the gift card in use?

[wizardlyhel]

It's demonstrated in our skeleton template. Make sure your cart.tsx can handle multiple gift card code.
https://github.com/Shopify/hydrogen/blob/main/templates/skeleton/app/routes/cart.tsx#L51-L63

The gift card code component can keep track of the gift card codes applied https://github.com/Shopify/hydrogen/blob/main/templates/skeleton/app/components/CartSummary.tsx#L106-L180

To remove gift card codes, you just need to run updateGiftCardCodes with an empty array [] and it will remove all the gift card code.