@@ -0,0 +1,6 @@
+---
+'@clerk/ui': patch
+'@clerk/backend': patch
+---
+
+Show applied discount on billing payment attempts and statements.
@@ -1,4 +1,6 @@
 import type {
+  BillingAppliedDiscount,
+  BillingAppliedDiscountJSON,
   BillingCredits,
   BillingCreditsJSON,
   BillingDiscounts,
@@ -51,6 +53,17 @@ const billingCreditsFromJSON = (credits: BillingCreditsJSON): BillingCredits =>
   total: billingMoneyAmountFromJSON(credits.total),
 });
 
+const billingAppliedDiscountFromJSON = (discount: BillingAppliedDiscountJSON): BillingAppliedDiscount => ({
+  amount: billingMoneyAmountFromJSON(discount.amount),
+  discountId: discount.discount_id,
+  name: discount.name,
+  effect: discount.effect,
+  percentOff: discount.percent_off,
+  amountOff: discount.amount_off ? billingMoneyAmountFromJSON(discount.amount_off) : undefined,
+  promoCode: discount.promo_code,
+  cyclesRemaining: discount.cycles_remaining,
+});
+
 const billingDiscountsFromJSON = (discounts: BillingDiscountsJSON): BillingDiscounts => ({
   proration: discounts.proration
     ? {
@@ -60,6 +73,7 @@ const billingDiscountsFromJSON = (discounts: BillingDiscountsJSON): BillingDisco
         cyclePassedPercent: discounts.proration.cycle_passed_percent,
       }
     : null,
+  discount: discounts.discount ? billingAppliedDiscountFromJSON(discounts.discount) : undefined,
   total: billingMoneyAmountFromJSON(discounts.total),
 });
 
 
@@ -5,7 +5,7 @@ import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
 import { LineItems } from '@/ui/elements/LineItems';
 import { ProfileCard } from '@/ui/elements/ProfileCard';
-import { toNegativeAmount } from '@/ui/utils/billing';
+import { getDiscountDescription, toNegativeAmount } from '@/ui/utils/billing';
 import { getPlanSeatLimit, getSeatsPerUnitTotal, summarizeSeatCharges } from '@/ui/utils/billingPlanSeats';
 import { formatDate } from '@/ui/utils/formatDate';
 import { truncateWithEndVisible } from '@/ui/utils/truncateTextWithEndVisible';
@@ -201,13 +201,14 @@ export const PaymentAttemptPage = () => {
 };
 
 function PaymentAttemptBody({ paymentAttempt }: { paymentAttempt: BillingPaymentResource | undefined }) {
-  const { $ } = useLocalizations();
+  const { $, t } = useLocalizations();
 
   if (!paymentAttempt) {
     return null;
   }
 
   const { subscriptionItem } = paymentAttempt;
+  const catalogDiscount = paymentAttempt.totals?.discounts?.discount;
 
   const fee =
     subscriptionItem.planPeriod === 'month'
@@ -285,6 +286,21 @@ function PaymentAttemptBody({ paymentAttempt }: { paymentAttempt: BillingPayment
             <LineItems.Description text={$(toNegativeAmount(paymentAttempt.totals.discounts.proration.amount))} />
           </LineItems.Group>
         )}
+        {catalogDiscount && catalogDiscount.amount.amount > 0 && (
+          <LineItems.Group variant='tertiary'>
+            <LineItems.Title
+              title={catalogDiscount.name}
+              description={getDiscountDescription(
+                catalogDiscount,
+                catalogDiscount.cyclesRemaining,
+                subscriptionItem.planPeriod,
+                { $, t },
+              )}
+              badge={catalogDiscount.promoCode ? <Badge>{catalogDiscount.promoCode}</Badge> : null}
+            />
+            <LineItems.Description text={$(toNegativeAmount(catalogDiscount.amount))} />
+          </LineItems.Group>
+        )}
         {subscriptionItem.credits &&
           subscriptionItem.credits.proration &&
           subscriptionItem.credits.proration.amount.amount > 0 && (
 
@@ -3,6 +3,7 @@ import { __internal_useStatementQuery } from '@clerk/shared/react/index';
 import { Alert } from '@/ui/elements/Alert';
 import { Header } from '@/ui/elements/Header';
 import { ProfileCard } from '@/ui/elements/ProfileCard';
+import { getDiscountDescription } from '@/ui/utils/billing';
 import { formatDate } from '@/ui/utils/formatDate';
 
 import { useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts/components';
@@ -146,6 +147,17 @@ export const StatementPage = () => {
                             value={`(${$(item.totals.discounts.proration.amount)})`}
                           />
                         ) : null}
+                        {item.totals?.discounts?.discount && item.totals.discounts.discount.amount.amount > 0 ? (
+                          <Statement.SectionContentDetailsListItem
+                            label={`${item.totals.discounts.discount.name} ${getDiscountDescription(
+                              item.totals.discounts.discount,
+                              item.totals.discounts.discount.cyclesRemaining,
+                              item.subscriptionItem.planPeriod,
+                              { $, t },
+                            )}`}
+                            value={`(${$(item.totals.discounts.discount.amount)})`}
+                          />
+                        ) : null}
                         {item.subscriptionItem.credits &&
                         item.subscriptionItem.credits.proration &&
                         item.subscriptionItem.credits.proration.amount.amount > 0 ? (
 
@@ -1,4 +1,54 @@
-import type { BillingMoneyAmount } from '@clerk/shared/types/billing';
+import type { BillingMoneyAmount, BillingSubscriptionPlanPeriod } from '@clerk/shared/types/billing';
+
+import type { useLocalizations } from '../localization';
+import { localizationKeys } from '../localization';
+
+type Discount = {
+  effect?: 'percentage' | 'fixed_amount';
+  percentOff?: number;
+  amountOff?: BillingMoneyAmount;
+};
+
+type Localizations = Pick<ReturnType<typeof useLocalizations>, '$' | 't'>;
+
+export function getDiscountDescription(
+  discount: Discount,
+  cycles: number | null,
+  planPeriod: BillingSubscriptionPlanPeriod,
+  { $, t }: Localizations,
+) {
+  const amount =
+    discount.effect === 'percentage' && discount.percentOff !== undefined
+      ? `${discount.percentOff}%`
+      : discount.amountOff
+        ? $(discount.amountOff)
+        : '';
+
+  if (cycles === null) {
+    return t(localizationKeys('billing.discountAmount', { amount }));
+  }
+
+  const period = getBillingPeriodLabel(planPeriod, cycles, t);
+  return t(localizationKeys('billing.discountDuration', { amount, cycles, period }));
+}
+
+export function getBillingPeriodLabel(
+  planPeriod: BillingSubscriptionPlanPeriod,
+  cycles: number,
+  t: Localizations['t'],
+) {
+  return t(
+    localizationKeys(
+      planPeriod === 'annual'
+        ? cycles === 1
+          ? 'billing.year'
+          : 'billing.years'
+        : cycles === 1
+          ? 'billing.month'
+          : 'billing.months',
+    ),
+  ).toLocaleLowerCase();
+}
 
 /**
  * Given a BillingMoneyAmount, convert positive values to negative. If the amount is already negative, leave it alone.