From 823d655a51c0b5f2caa4d94deb870c3e3d5e772e Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 22 Aug 2025 18:48:38 +0300
Subject: [PATCH 1/3] fix(clerk-js): Update checkout to list available methods
 at trial checkout

---
 .../clerk-js/src/ui/components/Checkout/CheckoutForm.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
index 0f442f237a3..1e2c34a6b2a 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -192,7 +192,7 @@ const useCheckoutMutations = () => {
 
 const CheckoutFormElements = () => {
   const { checkout } = useCheckout();
-  const { id, totals } = checkout;
+  const { id, totals, freeTrialEndsAt } = checkout;
   const { data: paymentSources } = usePaymentMethods();
 
   const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>
@@ -210,7 +210,7 @@ const CheckoutFormElements = () => {
       sx={t => ({ padding: t.space.$4 })}
     >
       {/* only show if there are payment sources and there is a total due now */}
-      {paymentSources.length > 0 && totals.totalDueNow.amount > 0 && (
+      {paymentSources.length > 0 && (totals.totalDueNow.amount > 0 || freeTrialEndsAt) && (
         <SegmentedControl.Root
           aria-label='Payment method source'
           value={paymentMethodSource}
@@ -370,7 +370,7 @@ const ExistingPaymentSourceForm = withCardStateProvider(
       });
     }, [paymentSources]);
 
-    const isSchedulePayment = totalDueNow.amount > 0 && !freeTrialEndsAt;
+    const shouldDefaultBeUsed = totalDueNow.amount === 0 || !freeTrialEndsAt;
 
     return (
       <Form
@@ -381,7 +381,7 @@ const ExistingPaymentSourceForm = withCardStateProvider(
           rowGap: t.space.$4,
         })}
       >
-        {isSchedulePayment ? (
+        {shouldDefaultBeUsed ? (
           <Select
             elementId='paymentSource'
             options={options}

From aafd8843c55b114dd1e95b54d4e83a3b08a30601 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 22 Aug 2025 19:16:02 +0300
Subject: [PATCH 2/3] add tests

---
 .../ui/components/Checkout/CheckoutForm.tsx   |   2 +-
 .../Checkout/__tests__/Checkout.test.tsx      | 136 ++++++++++++++++++
 2 files changed, 137 insertions(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
index 1e2c34a6b2a..c6fb9af4baf 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -210,7 +210,7 @@ const CheckoutFormElements = () => {
       sx={t => ({ padding: t.space.$4 })}
     >
       {/* only show if there are payment sources and there is a total due now */}
-      {paymentSources.length > 0 && (totals.totalDueNow.amount > 0 || freeTrialEndsAt) && (
+      {paymentSources.length > 0 && (totals.totalDueNow.amount > 0 || !!freeTrialEndsAt) && (
         <SegmentedControl.Root
           aria-label='Payment method source'
           value={paymentMethodSource}
diff --git a/packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx b/packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx
index 2b757aa8786..fc63fd5000f 100644
--- a/packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/__tests__/Checkout.test.tsx
@@ -465,4 +465,140 @@ describe('Checkout', () => {
       expect(getByText('August 19, 2025')).toBeVisible();
     });
   });
+
+  it('renders existing payment sources during checkout confirmation', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withUser({ email_addresses: ['test@clerk.com'] });
+    });
+
+    fixtures.clerk.user?.getPaymentSources.mockResolvedValue({
+      data: [
+        {
+          id: 'pm_test_visa',
+          last4: '4242',
+          paymentMethod: 'card',
+          cardType: 'visa',
+          isDefault: true,
+          isRemovable: true,
+          status: 'active',
+          walletType: undefined,
+          remove: jest.fn(),
+          makeDefault: jest.fn(),
+          pathRoot: '/',
+          reload: jest.fn(),
+        },
+        {
+          id: 'pm_test_mastercard',
+          last4: '5555',
+          paymentMethod: 'card',
+          cardType: 'mastercard',
+          isDefault: false,
+          isRemovable: true,
+          status: 'active',
+          walletType: undefined,
+          remove: jest.fn(),
+          makeDefault: jest.fn(),
+          pathRoot: '/',
+          reload: jest.fn(),
+        },
+      ],
+      total_count: 2,
+    });
+
+    fixtures.clerk.billing.startCheckout.mockResolvedValue({
+      id: 'chk_trial_2',
+      status: 'needs_confirmation',
+      externalClientSecret: 'cs_test_trial_2',
+      externalGatewayId: 'gw_test',
+      totals: {
+        subtotal: { amount: 1000, amountFormatted: '10.00', currency: 'USD', currencySymbol: '$' },
+        grandTotal: { amount: 1000, amountFormatted: '10.00', currency: 'USD', currencySymbol: '$' },
+        taxTotal: { amount: 0, amountFormatted: '0.00', currency: 'USD', currencySymbol: '$' },
+        credit: { amount: 0, amountFormatted: '0.00', currency: 'USD', currencySymbol: '$' },
+        pastDue: { amount: 0, amountFormatted: '0.00', currency: 'USD', currencySymbol: '$' },
+        totalDueNow: { amount: 0, amountFormatted: '0.00', currency: 'USD', currencySymbol: '$' },
+      },
+      isImmediatePlanChange: true,
+      planPeriod: 'month',
+      plan: {
+        id: 'plan_trial',
+        name: 'Pro',
+        description: 'Pro plan',
+        features: [],
+        fee: {
+          amount: 1000,
+          amountFormatted: '10.00',
+          currency: 'USD',
+          currencySymbol: '$',
+        },
+        annualFee: {
+          amount: 12000,
+          amountFormatted: '120.00',
+          currency: 'USD',
+          currencySymbol: '$',
+        },
+        annualMonthlyFee: {
+          amount: 1000,
+          amountFormatted: '10.00',
+          currency: 'USD',
+          currencySymbol: '$',
+        },
+        slug: 'pro',
+        avatarUrl: '',
+        publiclyVisible: true,
+        isDefault: true,
+        isRecurring: true,
+        hasBaseFee: false,
+        forPayerType: 'user',
+        freeTrialDays: 7,
+        freeTrialEnabled: true,
+      },
+      paymentSource: undefined,
+      confirm: jest.fn(),
+      freeTrialEndsAt: new Date('2025-08-19'),
+    } as any);
+
+    const { baseElement, getByText, getByRole, userEvent } = render(
+      <Drawer.Root
+        open
+        onOpenChange={() => {}}
+      >
+        <Checkout
+          planId='plan_with_payment_sources'
+          planPeriod='month'
+        />
+      </Drawer.Root>,
+      { wrapper },
+    );
+
+    await waitFor(async () => {
+      // Verify checkout title is displayed
+      expect(getByRole('heading', { name: 'Checkout' })).toBeVisible();
+
+      // Verify segmented control for payment method source is rendered
+      const paymentMethodsButton = getByText('Payment Methods');
+      expect(paymentMethodsButton).toBeVisible();
+
+      const addPaymentMethodButton = getByText('Add payment method');
+      expect(addPaymentMethodButton).toBeVisible();
+
+      await userEvent.click(paymentMethodsButton);
+    });
+
+    await waitFor(() => {
+      const visaPaymentSource = getByText('visa');
+      expect(visaPaymentSource).toBeVisible();
+
+      const last4Digits = getByText('⋯ 4242');
+      expect(last4Digits).toBeVisible();
+
+      // Verify the default badge is shown for the first payment source
+      const defaultBadge = getByText('Default');
+      expect(defaultBadge).toBeVisible();
+
+      // Verify the hidden input contains the correct payment source id
+      const hiddenInput = baseElement.querySelector('input[name="payment_source_id"]');
+      expect(hiddenInput).toHaveAttribute('value', 'pm_test_visa');
+    });
+  });
 });

From f6776931e60573ec31a782837d49bf968e8d4c2a Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 22 Aug 2025 19:17:36 +0300
Subject: [PATCH 3/3] add changeset

---
 .changeset/tall-worms-pull.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tall-worms-pull.md

diff --git a/.changeset/tall-worms-pull.md b/.changeset/tall-worms-pull.md
new file mode 100644
index 00000000000..7f7c7e66516
--- /dev/null
+++ b/.changeset/tall-worms-pull.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Allow end users to select payment methods during trial checkout.