fix: replace card flow

src/routes/console/organization-[organization]/billing/replaceCard.svelte

@@ -5,7 +5,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { organization } from '$lib/stores/organization';
     import { Dependencies } from '$lib/constants';
-    import { submitStripeCard } from '$lib/stores/stripe';
+    import { initializeStripe, isStripeInitialized, submitStripeCard } from '$lib/stores/stripe';
     import { onMount } from 'svelte';
     import type { PaymentList } from '$lib/sdk/billing';
     import { addNotification } from '$lib/stores/notifications';
@@ -21,13 +21,19 @@
 
     onMount(async () => {
         methods = await sdk.forConsole.billing.listPaymentMethods();
-
-        if (!$organization.paymentMethodId && !$organization.backupPaymentMethodId) {
-            selectedPaymentMethodId = methods?.total ? methods.paymentMethods[0].$id : null;
-        }
         selectedPaymentMethodId = isBackup
             ? $organization.backupPaymentMethodId
             : $organization.paymentMethodId;
+        if (!$organization.paymentMethodId && !$organization.backupPaymentMethodId) {
+            selectedPaymentMethodId = methods?.total ? methods.paymentMethods[0].$id : null;
+        }
+        // If the selected payment method does not belong to the current user, reset it
+        if (
+            methods?.total &&
+            !methods.paymentMethods.some((method) => method.$id === selectedPaymentMethodId)
+        ) {
+            selectedPaymentMethodId = null;
+        }
     });
 
     async function handleSubmit() {
@@ -82,6 +88,14 @@
 
     $: filteredMethods = methods?.paymentMethods.filter((method) => !!method?.last4);
 
+    $: if (selectedPaymentMethodId === null && !$isStripeInitialized) {
+        initializeStripe();
+    }
+
+    $: if (selectedPaymentMethodId) {
+        isStripeInitialized.set(false);
+    }
+
     $: if (!show) {
         selectedPaymentMethodId = null;
     }