fix(shared): Check for valid resource prior to initializing a payment flow (#6436)

Author: panteliselef

.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.

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;