From 15cebbab516f22ac9c4fcdbbafea7cd4082a3ede Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Wed, 30 Jul 2025 13:37:53 +0300
Subject: [PATCH] chore(shared): Check for valid resource prior to initializing
 a payment flow

---
 .changeset/bumpy-melons-grow.md        |  7 +++++++
 packages/shared/src/react/commerce.tsx | 11 +++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/bumpy-melons-grow.md

diff --git a/.changeset/bumpy-melons-grow.md b/.changeset/bumpy-melons-grow.md
new file mode 100644
index 00000000000..64780ca3c18
--- /dev/null
+++ b/.changeset/bumpy-melons-grow.md
@@ -0,0 +1,7 @@
+---
+'@clerk/shared': patch
+'@clerk/nextjs': patch
+'@clerk/clerk-react': patch
+---
+
+Fixes a bug which cause initialization of a payment method to never fire.
diff --git a/packages/shared/src/react/commerce.tsx b/packages/shared/src/react/commerce.tsx
index 6a58e8aa479..91c67843958 100644
--- a/packages/shared/src/react/commerce.tsx
+++ b/packages/shared/src/react/commerce.tsx
@@ -74,18 +74,21 @@ const usePaymentSourceUtils = (forResource: ForPayerType = 'user') => {
       key: 'commerce-payment-source-initialize',
       resourceId: resource?.id,
     },
-    () =>
-      resource?.initializePaymentSource({
+    () => {
+      return resource?.initializePaymentSource({
         gateway: 'stripe',
-      }),
+      });
+    },
   );
+
   const environment = useInternalEnvironment();
 
   useEffect(() => {
+    if (!resource?.id) return;
     initializePaymentSource().catch(() => {
       // ignore errors
     });
-  }, []);
+  }, [resource?.id]);
 
   const externalGatewayId = initializedPaymentSource?.externalGatewayId;
   const externalClientSecret = initializedPaymentSource?.externalClientSecret;