Checkout UI Extension - Buy X Get Y Discount - Read Discount Code

[QuentinFAV]

Hi,

I'm working on a Checkout UI Extension to automatically add a product to cart when a Buy X Get Y discount code is added. I am using useDiscountCodes (doc here) to read the applied codes. The issue that I have the error "discount code isn’t valid for the items in your cart", because the discount cannot be applied to the current checkout and my

discountCodes array is always empty.

import {
  Banner,
  useApi,
  useTranslate,
  reactExtension,
  useDiscountCodes
} from '@shopify/ui-extensions-react/checkout';
import { useEffect } from 'react';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const translate = useTranslate();
  const { extension } = useApi();

  const discountCodes = useDiscountCodes();

  useEffect(() => {
    if(discountCodes) {
      console.log('Discount codes:', discountCodes);
    }
  }, [discountCodes]);

  return (
    <Banner title="checkout-ui">
      {translate('welcome', {target: extension.target})}
    </Banner>
  );
}

Discount codes: Array(0)

Is it possible to read the discount code input? Or am I doing something wrong?

Thank you,

Quentin

[Liam]

Are there any specific rule created for this discount on the admin that would block it from being added?

[QuentinFAV]

Hi @Liam ,

Not specially, I am not allowed to add the discount because the gift product ("Y" product in "Buy X Get Y") is not added to cart yet. But I need to read the discount code to add the product so I'm blocked 😵 Is there any way to intercept the not applied discount code in a checkout UI extension? Or maybe a best way to automatically add a product when the Buy X Get Y discount is entered? Using a Shopify Function or something?

Thank you so much! 

[Stephen2020 · Accepted solution]

What you could do:

• Create an automatic discount Buy X Get Y.
• Create an order discount SUMMERBOGO with 0%
• Write the UI extension so that it adds product Y to the shopping cart when X is in it and when the code SUMMERBOGO is set

The automatic discount then does the work, SUMMERBOGO is only the trigger.

[QuentinFAV]

It is exactly the solution I'm working on @Stephen2020 😉 I'm also improving the UX a bit by adding an error message and by removing the discount code when not applicable. To avoid having a product full-price in the cart in case the BXGY discount cannot be applied.

I assume it is the only solution for now!

Thank you very much!

[RaulA]

Is this something you're working on for the App Store? Or is this a personal project where you wouldn't mind sharing the code? I'm trying to accomplish this very thing.