diff --git a/.changeset/fluffy-snails-sort.md b/.changeset/fluffy-snails-sort.md
new file mode 100644
index 00000000000..661f4b52a45
--- /dev/null
+++ b/.changeset/fluffy-snails-sort.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Revalidate payment sources from `<Checkout />` when a new payment source is added before the checkout is completed.
diff --git a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx b/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx
index 71ed8ac8071..dc4a6718012 100644
--- a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx
@@ -142,6 +142,16 @@ const AddPaymentSourceForm = withCardStateProvider(
     const { subscriberType } = usePaymentSourcesContext();
     const [submitError, setSubmitError] = useState<ClerkRuntimeError | ClerkAPIError | string | undefined>();
 
+    // Revalidates the next time the hooks gets mounted
+    const { revalidate } = useFetch(
+      undefined,
+      {
+        ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
+      },
+      undefined,
+      'commerce-payment-sources',
+    );
+
     const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       if (!stripe || !elements) {
@@ -167,6 +177,8 @@ const AddPaymentSourceForm = withCardStateProvider(
           ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
         });
 
+        revalidate();
+
         void onSuccess(paymentSource);
       } catch (error) {
         void handleError(error, [], setSubmitError);