From 99f8a2281cc52e82d49700c69f5e3654d3796ec5 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 28 Aug 2025 17:36:47 +0300
Subject: [PATCH 1/2] chore(clerk-js): Display free trial badge
 `<PricingTable/>`

---
 .changeset/eighty-bananas-listen.md                         | 5 +++++
 .../src/ui/components/PricingTable/PricingTableDefault.tsx  | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/eighty-bananas-listen.md

diff --git a/.changeset/eighty-bananas-listen.md b/.changeset/eighty-bananas-listen.md
new file mode 100644
index 00000000000..0b11ed64dfa
--- /dev/null
+++ b/.changeset/eighty-bananas-listen.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Display free trial badge `<PricingTable/>`.
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index 01609a95725..5e623e6c69a 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -184,7 +184,11 @@ function Card(props: CardProps) {
         isCompact={isCompact}
         planPeriod={planPeriod}
         setPlanPeriod={setPlanPeriod}
-        badge={showStatusRow ? <SubscriptionBadge subscription={subscription} /> : undefined}
+        badge={
+          showStatusRow ? (
+            <SubscriptionBadge subscription={subscription.isFreeTrial ? { status: 'free_trial' } : subscription} />
+          ) : undefined
+        }
       />
       <Box
         elementDescriptor={descriptors.pricingTableCardBody}

From e70f5cb2115c40ed6980b8b9f17590d80fb904fe Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 28 Aug 2025 18:02:17 +0300
Subject: [PATCH 2/2] chore(clerk-js): Display free trial badge
 `<PricingTable/>`

---
 integration/tests/pricing-table.test.ts                        | 2 +-
 .../src/playwright/unstable/page-objects/pricingTable.ts       | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/integration/tests/pricing-table.test.ts b/integration/tests/pricing-table.test.ts
index 7ff5c9f690c..402f30b2c52 100644
--- a/integration/tests/pricing-table.test.ts
+++ b/integration/tests/pricing-table.test.ts
@@ -299,7 +299,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
 
       // Verify the user is now shown as having an active free trial
       // The pricing table should show their current plan as active
-      await u.po.pricingTable.waitToBeActive({ planSlug: 'trial' });
+      await u.po.pricingTable.waitToBeFreeTrial({ planSlug: 'trial' });
 
       await u.po.page.goToRelative('/user');
       await u.po.userProfile.waitForMounted();
diff --git a/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts b/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts
index 2b9fe75fba5..5fd01aa7b91 100644
--- a/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts
+++ b/packages/testing/src/playwright/unstable/page-objects/pricingTable.ts
@@ -59,6 +59,9 @@ export const createPricingTablePageObject = (testArgs: { page: EnhancedPage }) =
     waitToBeActive: async ({ planSlug }: { planSlug: string }) => {
       return locators.badge(planSlug).getByText('Active').waitFor({ state: 'visible' });
     },
+    waitToBeFreeTrial: async ({ planSlug }: { planSlug: string }) => {
+      return locators.badge(planSlug).getByText('Free trial').waitFor({ state: 'visible' });
+    },
     getPlanCardCTA: ({ planSlug }: { planSlug: string }) => {
       return locators.footer(planSlug).getByRole('button', {
         name: /get|switch|subscribe/i,