Single coupon limiter app

Extensions
1

I created a simple app that limits the addition of discount coupons to only one per order.
It works perfectly in dev mode (shopify run dev), but it doesn’t work when I install it directly from the store.

I searched here in the community and couldn’t find anything that helped me understand the problem.

Here is the screenshot I took:

Install app

shopify run dev

Here is the code I created:

Checkout.jsx

import "@shopify/ui-extensions/preact";
import {render} from "preact";
import {useEffect} from "preact/hooks"
import {useApplyDiscountCodeChange, useDiscountCodes} from "@shopify/ui-extensions/checkout/preact"

export default async () => {
  render(<Extension/>, document.body)
};

function Extension() {
  const applyDiscountCodeChange = useApplyDiscountCodeChange();
  const discountCodes = useDiscountCodes();

  useEffect(() => {
    // Check if more than one discount code is applied
    if (discountCodes.length > 1) {
      // Remove all discount codes except the first one
      const lastCode = discountCodes[0];

      // Clear all codes
      discountCodes.forEach(async (discountCode) => {
        applyDiscountCodeChange({
          type: 'removeDiscountCode',
          code: discountCode.code,
        });
      });

      // Re-apply only the first code
      setTimeout(async () => {
        await applyDiscountCodeChange({
          type: 'addDiscountCode',
          code: lastCode.code,
        });
      }, 100);
    }
  }, [discountCodes, applyDiscountCodeChange]);

  if (discountCodes.length > 1) {
    return (
      <s-banner tone="warning">
        Apenas um código de cupom pode ser aplicado por pedido. O primeiro código será mantido.
      </s-banner>
    );
  }

  return null;
}

shopify.extension.toml:

api_version = "2025-10"

[[extensions]]
name = "Single Coupon Limiter"
handle = "single-coupon-limiter"
type = "ui_extension"
uid = "3ea0773f-7ca9-9f94-c060-b7b76a86e16b30715de6"

  [[extensions.targeting]]
  module = "./src/Checkout.jsx"
  target = "purchase.checkout.block.render"

  [extensions.capabilities]
  api_access = true

  [extensions.settings]
  [[extensions.settings.fields]]
  key = "title"
  type = "single_line_text_field"
  name = "Single Coupom Limiter"
  description = "Single Coupom Limiter"

shopify.app.toml:

client_id = "18d1a30411a6264fcdd2438461ebb311"
name = "single-coupon-limiter"
application_url = "https://scl.algosoft.com.br"
embedded = true

[build]
automatically_update_urls_on_dev = true

[webhooks]
api_version = "2026-01"

[[webhooks.subscriptions]]
topics = ["app/uninstalled"]
uri = "/webhooks/app/uninstalled"

[[webhooks.subscriptions]]
topics = ["app/scopes_update"]
uri = "/webhooks/app/scopes_update"

[access_scopes]
scopes = "read_discounts,write_discounts"

[auth]
redirect_urls = ["https://scl.algosoft.com.br/api/auth"]
2

Hi, did you make sure that your extension is added to the current checkout profile on the store?

checkout ui extension in checkout profile
checkout ui extension in checkout profile1730×1290 189 KB

With shopify app dev, the Developer Console lets you preview from the target without having to add the extension to a checkout profile, but in production you need to explicitly configure it in your store’s checkout profile settings.

3

Hi @Algosoft_Tecnologia

Just wanted to check if the advice above worked for you?

1 Like