From e2cc4f6f3a103862d90ed1683f130a0e47f1f3d3 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Wed, 30 Jul 2025 05:21:11 +0000
Subject: [PATCH 01/16] Feat: State selector US

---
 .../components/billing/paymentModal.svelte    |  58 ++++-
 src/lib/components/billing/statePicker.svelte |  42 ++++
 src/lib/components/billing/states.js          | 238 ++++++++++++++++++
 src/lib/stores/stripe.ts                      |  43 +++-
 4 files changed, 367 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/components/billing/statePicker.svelte
 create mode 100644 src/lib/components/billing/states.js

diff --git a/src/lib/components/billing/paymentModal.svelte b/src/lib/components/billing/paymentModal.svelte
index c79602517..fda3229cb 100644
--- a/src/lib/components/billing/paymentModal.svelte
+++ b/src/lib/components/billing/paymentModal.svelte
@@ -2,12 +2,14 @@
     import { FakeModal } from '$lib/components';
     import { InputText, Button } from '$lib/elements/forms';
     import { createEventDispatcher, onMount } from 'svelte';
-    import { initializeStripe, submitStripeCard } from '$lib/stores/stripe';
+    import { initializeStripe, setPaymentMethod, submitStripeCard } from '$lib/stores/stripe';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
     import { page } from '$app/state';
     import { Spinner } from '@appwrite.io/pink-svelte';
+    import type { PaymentMethod } from '@stripe/stripe-js';
+    import StatePicker from './statePicker.svelte';
 
     export let show = false;
 
@@ -16,10 +18,36 @@
     let name: string;
     let error: string;
     let modal: FakeModal;
+    let showState: boolean = false;
+    let state: string = '';
+    let paymentMethod: PaymentMethod | null = null;
 
     async function handleSubmit() {
         try {
+            if (showState && !state) {
+                throw Error('Please select a state');
+            }
+
+            if (showState) {
+                const card = await setPaymentMethod(paymentMethod.id, name, state);
+                modal.closeModal();
+                await invalidate(Dependencies.PAYMENT_METHODS);
+                dispatch('submit', card);
+                addNotification({
+                    type: 'success',
+                    message: 'A new payment method has been added to your account'
+                });
+                return;
+            }
+
             const card = await submitStripeCard(name, page?.params?.organization ?? null);
+            if (card && typeof card !== 'string') {
+                if ((card as PaymentMethod).card.country === 'US') {
+                    paymentMethod = card as PaymentMethod;
+                    showState = true;
+                    return;
+                }
+            }
             modal.closeModal();
             await invalidate(Dependencies.PAYMENT_METHODS);
             dispatch('submit', card);
@@ -87,13 +115,19 @@
                 <Spinner />
             </div>
         {/if}
-
-        <div
-            style:display={isLoading ? 'none' : 'initial'}
-            class="stripe-element"
-            bind:this={element}>
-            <!-- Stripe will create form elements here -->
-        </div>
+        {#if showState}
+            <div class="state-element">
+                <!-- input select for state picker -->
+                <StatePicker card={paymentMethod} bind:state />
+            </div>
+        {:else}
+            <div
+                style:display={isLoading ? 'none' : 'initial'}
+                class="stripe-element"
+                bind:this={element}>
+                <!-- Stripe will create form elements here -->
+            </div>
+        {/if}
     </div>
     <slot name="end"></slot>
     <svelte:fragment slot="footer">
@@ -107,6 +141,14 @@
         display: flex;
         min-height: 245px;
 
+        .state-element {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
         .stripe-element {
             width: 100%;
         }
diff --git a/src/lib/components/billing/statePicker.svelte b/src/lib/components/billing/statePicker.svelte
new file mode 100644
index 000000000..553397d0c
--- /dev/null
+++ b/src/lib/components/billing/statePicker.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { states } from './states.js';
+    import { InputSelect } from '$lib/elements/forms';
+    import type { PaymentMethod } from '@stripe/stripe-js';
+    import Card from '../card.svelte';
+    import { Alert, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { CreditCardBrandImage } from '../index.js';
+
+    export let state: string = '';
+    export let card: PaymentMethod | null = null;
+</script>
+
+{#if card}
+    <Card>
+        <Layout.Stack direction="row" alignItems="center" gap="s">
+            <CreditCardBrandImage brand={card.card?.brand} />
+            <span>ending in {card.card?.last4}</span>
+        </Layout.Stack>
+        <Typography.Text size="s">
+            {card.card.country}
+            {card.billing_details.address.postal_code}
+        </Typography.Text>
+    </Card>
+{/if}
+
+<Alert.Inline status="info" title="State is required for US payment methods">
+    <Typography.Text size="s">
+        To complete the billing information, select your state so we can apply the correct taxes and
+        meet U.S. legal requirements.
+    </Typography.Text>
+</Alert.Inline>
+
+<InputSelect
+    bind:value={state}
+    label="State"
+    placeholder="Select a state"
+    id="state-picker"
+    options={states.map((state) => ({
+        label: state.name,
+        value: state.abbreviation,
+        id: state.abbreviation.toLowerCase()
+    }))} />
diff --git a/src/lib/components/billing/states.js b/src/lib/components/billing/states.js
new file mode 100644
index 000000000..b8ca0ec88
--- /dev/null
+++ b/src/lib/components/billing/states.js
@@ -0,0 +1,238 @@
+export const states = [
+    {
+        "name": "Alabama",
+        "abbreviation": "AL"
+    },
+    {
+        "name": "Alaska",
+        "abbreviation": "AK"
+    },
+    {
+        "name": "American Samoa",
+        "abbreviation": "AS"
+    },
+    {
+        "name": "Arizona",
+        "abbreviation": "AZ"
+    },
+    {
+        "name": "Arkansas",
+        "abbreviation": "AR"
+    },
+    {
+        "name": "California",
+        "abbreviation": "CA"
+    },
+    {
+        "name": "Colorado",
+        "abbreviation": "CO"
+    },
+    {
+        "name": "Connecticut",
+        "abbreviation": "CT"
+    },
+    {
+        "name": "Delaware",
+        "abbreviation": "DE"
+    },
+    {
+        "name": "District Of Columbia",
+        "abbreviation": "DC"
+    },
+    {
+        "name": "Federated States Of Micronesia",
+        "abbreviation": "FM"
+    },
+    {
+        "name": "Florida",
+        "abbreviation": "FL"
+    },
+    {
+        "name": "Georgia",
+        "abbreviation": "GA"
+    },
+    {
+        "name": "Guam",
+        "abbreviation": "GU"
+    },
+    {
+        "name": "Hawaii",
+        "abbreviation": "HI"
+    },
+    {
+        "name": "Idaho",
+        "abbreviation": "ID"
+    },
+    {
+        "name": "Illinois",
+        "abbreviation": "IL"
+    },
+    {
+        "name": "Indiana",
+        "abbreviation": "IN"
+    },
+    {
+        "name": "Iowa",
+        "abbreviation": "IA"
+    },
+    {
+        "name": "Kansas",
+        "abbreviation": "KS"
+    },
+    {
+        "name": "Kentucky",
+        "abbreviation": "KY"
+    },
+    {
+        "name": "Louisiana",
+        "abbreviation": "LA"
+    },
+    {
+        "name": "Maine",
+        "abbreviation": "ME"
+    },
+    {
+        "name": "Marshall Islands",
+        "abbreviation": "MH"
+    },
+    {
+        "name": "Maryland",
+        "abbreviation": "MD"
+    },
+    {
+        "name": "Massachusetts",
+        "abbreviation": "MA"
+    },
+    {
+        "name": "Michigan",
+        "abbreviation": "MI"
+    },
+    {
+        "name": "Minnesota",
+        "abbreviation": "MN"
+    },
+    {
+        "name": "Mississippi",
+        "abbreviation": "MS"
+    },
+    {
+        "name": "Missouri",
+        "abbreviation": "MO"
+    },
+    {
+        "name": "Montana",
+        "abbreviation": "MT"
+    },
+    {
+        "name": "Nebraska",
+        "abbreviation": "NE"
+    },
+    {
+        "name": "Nevada",
+        "abbreviation": "NV"
+    },
+    {
+        "name": "New Hampshire",
+        "abbreviation": "NH"
+    },
+    {
+        "name": "New Jersey",
+        "abbreviation": "NJ"
+    },
+    {
+        "name": "New Mexico",
+        "abbreviation": "NM"
+    },
+    {
+        "name": "New York",
+        "abbreviation": "NY"
+    },
+    {
+        "name": "North Carolina",
+        "abbreviation": "NC"
+    },
+    {
+        "name": "North Dakota",
+        "abbreviation": "ND"
+    },
+    {
+        "name": "Northern Mariana Islands",
+        "abbreviation": "MP"
+    },
+    {
+        "name": "Ohio",
+        "abbreviation": "OH"
+    },
+    {
+        "name": "Oklahoma",
+        "abbreviation": "OK"
+    },
+    {
+        "name": "Oregon",
+        "abbreviation": "OR"
+    },
+    {
+        "name": "Palau",
+        "abbreviation": "PW"
+    },
+    {
+        "name": "Pennsylvania",
+        "abbreviation": "PA"
+    },
+    {
+        "name": "Puerto Rico",
+        "abbreviation": "PR"
+    },
+    {
+        "name": "Rhode Island",
+        "abbreviation": "RI"
+    },
+    {
+        "name": "South Carolina",
+        "abbreviation": "SC"
+    },
+    {
+        "name": "South Dakota",
+        "abbreviation": "SD"
+    },
+    {
+        "name": "Tennessee",
+        "abbreviation": "TN"
+    },
+    {
+        "name": "Texas",
+        "abbreviation": "TX"
+    },
+    {
+        "name": "Utah",
+        "abbreviation": "UT"
+    },
+    {
+        "name": "Vermont",
+        "abbreviation": "VT"
+    },
+    {
+        "name": "Virgin Islands",
+        "abbreviation": "VI"
+    },
+    {
+        "name": "Virginia",
+        "abbreviation": "VA"
+    },
+    {
+        "name": "Washington",
+        "abbreviation": "WA"
+    },
+    {
+        "name": "West Virginia",
+        "abbreviation": "WV"
+    },
+    {
+        "name": "Wisconsin",
+        "abbreviation": "WI"
+    },
+    {
+        "name": "Wyoming",
+        "abbreviation": "WY"
+    }
+];
\ No newline at end of file
diff --git a/src/lib/stores/stripe.ts b/src/lib/stores/stripe.ts
index 0f71da642..162d6129b 100644
--- a/src/lib/stores/stripe.ts
+++ b/src/lib/stores/stripe.ts
@@ -1,4 +1,4 @@
-import type { Appearance, Stripe, StripeElement, StripeElements } from '@stripe/stripe-js';
+import type { Appearance, PaymentMethod, Stripe, StripeElement, StripeElements } from '@stripe/stripe-js';
 import { sdk } from './sdk';
 import { app } from './app';
 import { get, writable } from 'svelte/store';
@@ -83,21 +83,28 @@ export async function submitStripeCard(name: string, organizationId?: string) {
                     billing_details: {
                         name
                     }
-                }
+                },
+                expand: ['payment_method']
             },
             redirect: 'if_required'
         });
 
+        console.log(setupIntent);
         if (error) {
             const e = new Error(error.message);
             trackError(e, Submit.PaymentMethodCreate);
             throw e;
         }
 
+
         if (setupIntent && setupIntent.status === 'succeeded') {
+            if ((setupIntent.payment_method as PaymentMethod).card.country === 'US') {
+                // need to get state
+                return setupIntent.payment_method as PaymentMethod;
+            }
             const method = await sdk.forConsole.billing.setPaymentMethod(
                 paymentMethod.$id,
-                setupIntent.payment_method,
+                (setupIntent.payment_method as PaymentMethod).id,
                 name
             );
             paymentElement.destroy();
@@ -115,6 +122,31 @@ export async function submitStripeCard(name: string, organizationId?: string) {
     }
 }
 
+export async function setPaymentMethod(providerMethodId: string, name: string, state: string) {
+    if(!paymentMethod) {
+        addNotification({
+            title: 'Error',
+            message: 'No payment method found. Please try again.',
+            type: 'error'
+        });
+        return;
+    }
+    try {
+        const method = await sdk.forConsole.billing.setPaymentMethod(
+            paymentMethod.$id,
+            providerMethodId,
+            name
+        );
+        paymentElement.destroy();
+        isStripeInitialized.set(false);
+        trackEvent(Submit.PaymentMethodCreate);
+        return method;
+    } catch (e) {
+        trackError(e, Submit.PaymentMethodCreate);
+        throw e;
+    }
+}
+
 export async function confirmPayment(
     orgId: string,
     clientSecret: string,
@@ -156,9 +188,8 @@ export async function confirmSetup(
 
     const { setupIntent, error } = await get(stripe).confirmCardSetup(clientSecret, {
         payment_method: paymentMethodId,
-        return_url: `${baseUrl}${
-            urlRoute ?? `organization-${get(organization).$id}/billing?clientSecret=${clientSecret}`
-        }`
+        return_url: `${baseUrl}${urlRoute ?? `organization-${get(organization).$id}/billing?clientSecret=${clientSecret}`
+            }`
     });
 
     if (error) {

From c3f746c04f39f8b1dedfc3441acdbff8685e7390 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Thu, 31 Jul 2025 04:14:20 +0000
Subject: [PATCH 02/16] fix update gaping and component

---
 .../components/billing/paymentModal.svelte    | 43 ++++++------
 src/lib/components/billing/statePicker.svelte | 65 +++++++++++--------
 2 files changed, 58 insertions(+), 50 deletions(-)

diff --git a/src/lib/components/billing/paymentModal.svelte b/src/lib/components/billing/paymentModal.svelte
index fda3229cb..9c47b2b2f 100644
--- a/src/lib/components/billing/paymentModal.svelte
+++ b/src/lib/components/billing/paymentModal.svelte
@@ -101,34 +101,33 @@
     bind:error
     onSubmit={handleSubmit}>
     <slot />
-    <InputText
-        id="name"
-        required
-        autofocus={true}
-        bind:value={name}
-        label="Cardholder name"
-        placeholder="Cardholder name" />
-
-    <div class="aw-stripe-container" data-private>
-        {#if isLoading}
-            <div class="loader-element">
-                <Spinner />
-            </div>
-        {/if}
-        {#if showState}
-            <div class="state-element">
-                <!-- input select for state picker -->
-                <StatePicker card={paymentMethod} bind:state />
-            </div>
-        {:else}
+    {#if showState}
+        <div class="state-element">
+            <!-- input select for state picker -->
+            <StatePicker card={paymentMethod} bind:state />
+        </div>
+    {:else}
+        <InputText
+            id="name"
+            required
+            autofocus={true}
+            bind:value={name}
+            label="Cardholder name"
+            placeholder="Cardholder name" />
+        <div class="aw-stripe-container" data-private>
+            {#if isLoading}
+                <div class="loader-element">
+                    <Spinner />
+                </div>
+            {/if}
             <div
                 style:display={isLoading ? 'none' : 'initial'}
                 class="stripe-element"
                 bind:this={element}>
                 <!-- Stripe will create form elements here -->
             </div>
-        {/if}
-    </div>
+        </div>
+    {/if}
     <slot name="end"></slot>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
diff --git a/src/lib/components/billing/statePicker.svelte b/src/lib/components/billing/statePicker.svelte
index 553397d0c..d84d5c39d 100644
--- a/src/lib/components/billing/statePicker.svelte
+++ b/src/lib/components/billing/statePicker.svelte
@@ -2,41 +2,50 @@
     import { states } from './states.js';
     import { InputSelect } from '$lib/elements/forms';
     import type { PaymentMethod } from '@stripe/stripe-js';
-    import Card from '../card.svelte';
-    import { Alert, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Alert, Card, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { CreditCardBrandImage } from '../index.js';
 
     export let state: string = '';
     export let card: PaymentMethod | null = null;
 </script>
 
-{#if card}
-    <Card>
-        <Layout.Stack direction="row" alignItems="center" gap="s">
-            <CreditCardBrandImage brand={card.card?.brand} />
-            <span>ending in {card.card?.last4}</span>
-        </Layout.Stack>
+<div class="state-picker-container">
+    {#if card}
+        <Card.Base variant="secondary" padding="s">
+            <Layout.Stack direction="row" alignItems="center" gap="s">
+                <CreditCardBrandImage brand={card.card?.brand} />
+                <span>ending in {card.card?.last4}</span>
+            </Layout.Stack>
+            <Typography.Text size="s">
+                {card.card.country}
+                {card.billing_details.address.postal_code}
+            </Typography.Text>
+        </Card.Base>
+    {/if}
+
+    <Alert.Inline status="info" title="State is required for US payment methods">
         <Typography.Text size="s">
-            {card.card.country}
-            {card.billing_details.address.postal_code}
+            To complete the billing information, select your state so we can apply the correct taxes
+            and meet U.S. legal requirements.
         </Typography.Text>
-    </Card>
-{/if}
+    </Alert.Inline>
 
-<Alert.Inline status="info" title="State is required for US payment methods">
-    <Typography.Text size="s">
-        To complete the billing information, select your state so we can apply the correct taxes and
-        meet U.S. legal requirements.
-    </Typography.Text>
-</Alert.Inline>
+    <InputSelect
+        bind:value={state}
+        label="State"
+        placeholder="Select a state"
+        id="state-picker"
+        options={states.map((state) => ({
+            label: state.name,
+            value: state.abbreviation,
+            id: state.abbreviation.toLowerCase()
+        }))} />
+</div>
 
-<InputSelect
-    bind:value={state}
-    label="State"
-    placeholder="Select a state"
-    id="state-picker"
-    options={states.map((state) => ({
-        label: state.name,
-        value: state.abbreviation,
-        id: state.abbreviation.toLowerCase()
-    }))} />
+<style>
+    .state-picker-container {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+</style>

From 37b3b7262c09930f2b6ce6a858203cc445e1ac67 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Thu, 31 Jul 2025 04:53:59 +0000
Subject: [PATCH 03/16] updated to use Layout

---
 src/lib/components/billing/paymentModal.svelte |  6 ++----
 src/lib/components/billing/statePicker.svelte  | 13 +++----------
 2 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/billing/paymentModal.svelte b/src/lib/components/billing/paymentModal.svelte
index 9c47b2b2f..0ab20511a 100644
--- a/src/lib/components/billing/paymentModal.svelte
+++ b/src/lib/components/billing/paymentModal.svelte
@@ -102,10 +102,8 @@
     onSubmit={handleSubmit}>
     <slot />
     {#if showState}
-        <div class="state-element">
-            <!-- input select for state picker -->
-            <StatePicker card={paymentMethod} bind:state />
-        </div>
+        <!-- input select for state picker -->
+        <StatePicker card={paymentMethod} bind:state />
     {:else}
         <InputText
             id="name"
diff --git a/src/lib/components/billing/statePicker.svelte b/src/lib/components/billing/statePicker.svelte
index d84d5c39d..9123e6522 100644
--- a/src/lib/components/billing/statePicker.svelte
+++ b/src/lib/components/billing/statePicker.svelte
@@ -9,7 +9,7 @@
     export let card: PaymentMethod | null = null;
 </script>
 
-<div class="state-picker-container">
+<Layout.Stack direction="column" gap="s">
     {#if card}
         <Card.Base variant="secondary" padding="s">
             <Layout.Stack direction="row" alignItems="center" gap="s">
@@ -32,6 +32,7 @@
 
     <InputSelect
         bind:value={state}
+        required
         label="State"
         placeholder="Select a state"
         id="state-picker"
@@ -40,12 +41,4 @@
             value: state.abbreviation,
             id: state.abbreviation.toLowerCase()
         }))} />
-</div>
-
-<style>
-    .state-picker-container {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-    }
-</style>
+</Layout.Stack>

From 783d503c63145eea83832e6267b5e0f6a5076acd Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Thu, 31 Jul 2025 04:55:03 +0000
Subject: [PATCH 04/16] update gap

---
 src/lib/components/billing/paymentModal.svelte | 8 --------
 src/lib/components/billing/statePicker.svelte  | 2 +-
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/lib/components/billing/paymentModal.svelte b/src/lib/components/billing/paymentModal.svelte
index 0ab20511a..ef8e298ef 100644
--- a/src/lib/components/billing/paymentModal.svelte
+++ b/src/lib/components/billing/paymentModal.svelte
@@ -138,14 +138,6 @@
         display: flex;
         min-height: 245px;
 
-        .state-element {
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
-
         .stripe-element {
             width: 100%;
         }
diff --git a/src/lib/components/billing/statePicker.svelte b/src/lib/components/billing/statePicker.svelte
index 9123e6522..6419c5470 100644
--- a/src/lib/components/billing/statePicker.svelte
+++ b/src/lib/components/billing/statePicker.svelte
@@ -9,7 +9,7 @@
     export let card: PaymentMethod | null = null;
 </script>
 
-<Layout.Stack direction="column" gap="s">
+<Layout.Stack direction="column" gap="m">
     {#if card}
         <Card.Base variant="secondary" padding="s">
             <Layout.Stack direction="row" alignItems="center" gap="s">

From ed04bbe5b61a06ae3cfb281cfa8569ce8ad8a72a Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Thu, 31 Jul 2025 04:55:13 +0000
Subject: [PATCH 05/16] remove comment

---
 src/lib/components/billing/paymentModal.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/billing/paymentModal.svelte b/src/lib/components/billing/paymentModal.svelte
index ef8e298ef..06f14cde1 100644
--- a/src/lib/components/billing/paymentModal.svelte
+++ b/src/lib/components/billing/paymentModal.svelte
@@ -102,7 +102,6 @@
     onSubmit={handleSubmit}>
     <slot />
     {#if showState}
-        <!-- input select for state picker -->
         <StatePicker card={paymentMethod} bind:state />
     {:else}
         <InputText

From 6211d792e0cdf59795fa3781449cf856eef73718 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Thu, 31 Jul 2025 04:56:26 +0000
Subject: [PATCH 06/16] remove log

---
 src/lib/stores/stripe.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/stores/stripe.ts b/src/lib/stores/stripe.ts
index 162d6129b..3fab2e59a 100644
--- a/src/lib/stores/stripe.ts
+++ b/src/lib/stores/stripe.ts
@@ -89,7 +89,6 @@ export async function submitStripeCard(name: string, organizationId?: string) {
             redirect: 'if_required'
         });
 
-        console.log(setupIntent);
         if (error) {
             const e = new Error(error.message);
             trackError(e, Submit.PaymentMethodCreate);

From bfc64944aa72768dcd11cb4f0a291dff75501d5c Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Thu, 31 Jul 2025 04:58:19 +0000
Subject: [PATCH 07/16] fixes

---
 src/lib/components/billing/{states.js => state.ts} | 2 +-
 src/lib/components/billing/statePicker.svelte      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename src/lib/components/billing/{states.js => state.ts} (98%)

diff --git a/src/lib/components/billing/states.js b/src/lib/components/billing/state.ts
similarity index 98%
rename from src/lib/components/billing/states.js
rename to src/lib/components/billing/state.ts
index b8ca0ec88..faa3f0786 100644
--- a/src/lib/components/billing/states.js
+++ b/src/lib/components/billing/state.ts
@@ -1,4 +1,4 @@
-export const states = [
+export const states: Array<{ name: string; abbreviation: string }> = [
     {
         "name": "Alabama",
         "abbreviation": "AL"
diff --git a/src/lib/components/billing/statePicker.svelte b/src/lib/components/billing/statePicker.svelte
index 6419c5470..125487bcb 100644
--- a/src/lib/components/billing/statePicker.svelte
+++ b/src/lib/components/billing/statePicker.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { states } from './states.js';
+    import { states } from './state.ts';
     import { InputSelect } from '$lib/elements/forms';
     import type { PaymentMethod } from '@stripe/stripe-js';
     import { Alert, Card, Layout, Typography } from '@appwrite.io/pink-svelte';

From 16b0fe343910f8e4137202b1ff1b1b4f24ef712c Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Thu, 31 Jul 2025 05:22:44 +0000
Subject: [PATCH 08/16] Fix replace card

---
 .../components/billing/paymentBoxes.svelte    | 43 +++++++++++--------
 src/lib/components/billing/statePicker.svelte |  2 +-
 .../billing/replaceCard.svelte                | 30 +++++++++++--
 3 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/billing/paymentBoxes.svelte b/src/lib/components/billing/paymentBoxes.svelte
index be241fdf7..27719cba5 100644
--- a/src/lib/components/billing/paymentBoxes.svelte
+++ b/src/lib/components/billing/paymentBoxes.svelte
@@ -5,6 +5,8 @@
     import { initializeStripe, unmountPaymentElement } from '$lib/stores/stripe';
     import { Badge, Card, Layout } from '@appwrite.io/pink-svelte';
     import type { PaymentMethodData } from '$lib/sdk/billing';
+    import type { PaymentMethod } from '@stripe/stripe-js';
+    import StatePicker from './statePicker.svelte';
 
     export let methods: PaymentMethodData[];
     export let group: string;
@@ -14,6 +16,9 @@
     export let disabledCondition: string = null;
     export let setAsDefault = false;
     export let showSetAsDefault = false;
+    export let showState = false;
+    export let paymentMethod: PaymentMethod | null = null;
+    export let state: string = '';
 
     let element: HTMLDivElement;
     let loader: HTMLDivElement;
@@ -79,25 +84,29 @@
     {/each}
     <Card.Selector title="Add new payment method" name="$new" bind:group value="$new" />
     {#if group === '$new'}
-        <InputText
-            id="name"
-            label="Cardholder name"
-            placeholder="Cardholder name"
-            bind:value={name}
-            required
-            autofocus={true} />
+        {#if showState}
+            <StatePicker card={paymentMethod} bind:state />
+        {:else}
+            <InputText
+                id="name"
+                label="Cardholder name"
+                placeholder="Cardholder name"
+                bind:value={name}
+                required
+                autofocus={true} />
 
-        <div class="aw-stripe-container" data-private>
-            <div class="loader-container" bind:this={loader}>
-                <div class="loader"></div>
+            <div class="aw-stripe-container" data-private>
+                <div class="loader-container" bind:this={loader}>
+                    <div class="loader"></div>
+                </div>
+                <div bind:this={element}></div>
             </div>
-            <div bind:this={element}></div>
-        </div>
-        {#if showSetAsDefault}
-            <InputChoice
-                bind:value={setAsDefault}
-                id="default"
-                label="Set as default payment method for this organization" />
+            {#if showSetAsDefault}
+                <InputChoice
+                    bind:value={setAsDefault}
+                    id="default"
+                    label="Set as default payment method for this organization" />
+            {/if}
         {/if}
     {/if}
 </Layout.Stack>
diff --git a/src/lib/components/billing/statePicker.svelte b/src/lib/components/billing/statePicker.svelte
index 125487bcb..839b31dd9 100644
--- a/src/lib/components/billing/statePicker.svelte
+++ b/src/lib/components/billing/statePicker.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { states } from './state.ts';
+    import { states } from './state';
     import { InputSelect } from '$lib/elements/forms';
     import type { PaymentMethod } from '@stripe/stripe-js';
     import { Alert, Card, Layout, Typography } from '@appwrite.io/pink-svelte';
diff --git a/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte b/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte
index 9adbb514e..a0b17f774 100644
--- a/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte
@@ -5,12 +5,13 @@
     import { sdk } from '$lib/stores/sdk';
     import type { Organization } from '$lib/stores/organization';
     import { Dependencies } from '$lib/constants';
-    import { submitStripeCard } from '$lib/stores/stripe';
+    import { setPaymentMethod, submitStripeCard } from '$lib/stores/stripe';
     import { onMount } from 'svelte';
-    import type { PaymentList } from '$lib/sdk/billing';
+    import type { PaymentList, PaymentMethodData } from '$lib/sdk/billing';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { PaymentBoxes } from '$lib/components/billing';
+    import type { PaymentMethod } from '@stripe/stripe-js';
 
     export let organization: Organization;
     export let show = false;
@@ -20,6 +21,9 @@
     let name: string;
     let error: string;
     let selectedPaymentMethodId: string;
+    let showState: boolean = false;
+    let state: string = '';
+    let paymentMethod: PaymentMethod | null = null;
 
     onMount(async () => {
         if (!organization.paymentMethodId && !organization.backupPaymentMethodId) {
@@ -41,7 +45,24 @@
     async function handleSubmit() {
         try {
             if (selectedPaymentMethodId === '$new') {
-                const method = await submitStripeCard(name, organization.$id);
+                if (showState && !state) {
+                    throw Error('Please select a state');
+                }
+                let method: PaymentMethodData;
+                if (showState) {
+                    method = await setPaymentMethod(paymentMethod.id, name, state);
+                } else {
+                    const card = await submitStripeCard(name, organization.$id);
+                    if (card && Object.hasOwn(card, 'id')) {
+                        if ((card as PaymentMethod).card.country === 'US') {
+                            paymentMethod = card as PaymentMethod;
+                            showState = true;
+                            return;
+                        }
+                    } else if (card && Object.hasOwn(card, '$id')) {
+                        method = card as PaymentMethodData;
+                    }
+                }
                 selectedPaymentMethodId = method.$id;
             }
             isBackup
@@ -97,6 +118,9 @@
     <PaymentBoxes
         methods={filteredMethods}
         bind:name
+        bind:paymentMethod
+        bind:showState
+        bind:state
         bind:group={selectedPaymentMethodId}
         defaultMethod={organization?.paymentMethodId}
         backupMethod={organization?.backupPaymentMethodId}

From 1c63575f478b8c56eb028e768b2a06a844259a0d Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Thu, 31 Jul 2025 05:26:08 +0000
Subject: [PATCH 09/16] fix billing wizard

---
 .../billing/wizard/paymentDetails.svelte      | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/billing/wizard/paymentDetails.svelte b/src/routes/(console)/organization-[organization]/billing/wizard/paymentDetails.svelte
index fdbeb39a5..8e1dd12da 100644
--- a/src/routes/(console)/organization-[organization]/billing/wizard/paymentDetails.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/wizard/paymentDetails.svelte
@@ -1,17 +1,21 @@
 <script lang="ts">
     import { WizardStep } from '$lib/layout';
     import { onMount } from 'svelte';
-    import type { PaymentList } from '$lib/sdk/billing';
+    import type { PaymentList, PaymentMethodData } from '$lib/sdk/billing';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { isStripeInitialized, submitStripeCard } from '$lib/stores/stripe';
+    import { isStripeInitialized, setPaymentMethod, submitStripeCard } from '$lib/stores/stripe';
     import { sdk } from '$lib/stores/sdk';
     import { PaymentBoxes } from '$lib/components/billing';
     import { addCreditWizardStore } from '../store';
     import { organization } from '$lib/stores/organization';
+    import type { PaymentMethod } from '@stripe/stripe-js';
 
     let methods: PaymentList;
     let name: string;
+    let showState: boolean = false;
+    let state: string = '';
+    let paymentMethod: PaymentMethod | null = null;
 
     onMount(async () => {
         methods = await sdk.forConsole.billing.listPaymentMethods();
@@ -21,7 +25,24 @@
 
     async function handleSubmit() {
         try {
-            const method = await submitStripeCard(name, $organization.$id);
+            if (showState && !state) {
+                throw Error('Please select a state');
+            }
+            let method: PaymentMethodData;
+            if (showState) {
+                method = await setPaymentMethod(paymentMethod.id, name, state);
+            } else {
+                const card = await submitStripeCard(name, $organization.$id);
+                if (card && Object.hasOwn(card, 'id')) {
+                    if ((card as PaymentMethod).card.country === 'US') {
+                        paymentMethod = card as PaymentMethod;
+                        showState = true;
+                        return;
+                    }
+                } else if (card && Object.hasOwn(card, '$id')) {
+                    method = card as PaymentMethodData;
+                }
+            }
             $addCreditWizardStore.paymentMethodId = method.$id;
             invalidate(Dependencies.PAYMENT_METHODS);
         } catch (e) {
@@ -45,6 +66,9 @@
 
     <p class="text"><b>Payment method</b></p>
     <PaymentBoxes
+        bind:paymentMethod
+        bind:showState
+        bind:state
         methods={filteredMethods}
         bind:name
         bind:group={$addCreditWizardStore.paymentMethodId} />

From c9d9d7cad10b95b548e12c7b7702ad9b3dcd905b Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Thu, 31 Jul 2025 05:28:28 +0000
Subject: [PATCH 10/16] fix retry modal

---
 .../billing/retryPaymentModal.svelte          | 35 +++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/billing/retryPaymentModal.svelte b/src/routes/(console)/organization-[organization]/billing/retryPaymentModal.svelte
index c2aaa4542..3a9fbfb29 100644
--- a/src/routes/(console)/organization-[organization]/billing/retryPaymentModal.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/retryPaymentModal.svelte
@@ -3,11 +3,16 @@
     import { FakeModal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Dependencies } from '$lib/constants';
-    import type { Invoice } from '$lib/sdk/billing';
+    import type { Invoice, PaymentMethodData } from '$lib/sdk/billing';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { page } from '$app/state';
-    import { confirmPayment, isStripeInitialized, submitStripeCard } from '$lib/stores/stripe';
+    import {
+        confirmPayment,
+        isStripeInitialized,
+        setPaymentMethod,
+        submitStripeCard
+    } from '$lib/stores/stripe';
     import { organization } from '$lib/stores/organization';
     import { toLocaleDate } from '$lib/helpers/date';
     import { PaymentBoxes } from '$lib/components/billing';
@@ -16,6 +21,7 @@
     import { getApiEndpoint, sdk } from '$lib/stores/sdk';
     import { formatCurrency } from '$lib/helpers/numbers';
     import { base } from '$app/paths';
+    import type { PaymentMethod } from '@stripe/stripe-js';
 
     export let show = false;
     export let invoice: Invoice;
@@ -24,6 +30,9 @@
     let name: string;
     let paymentMethodId: string;
     let setAsDefault = false;
+    let showState: boolean = false;
+    let state: string = '';
+    let paymentMethod: PaymentMethod | null = null;
     const endpoint = getApiEndpoint();
 
     onMount(async () => {
@@ -48,7 +57,24 @@
         try {
             if (paymentMethodId === null) {
                 try {
-                    const method = await submitStripeCard(name, $organization.$id);
+                    if (showState && !state) {
+                        throw Error('Please select a state');
+                    }
+                    let method: PaymentMethodData;
+                    if (showState) {
+                        method = await setPaymentMethod(paymentMethod.id, name, state);
+                    } else {
+                        const card = await submitStripeCard(name, $organization.$id);
+                        if (card && Object.hasOwn(card, 'id')) {
+                            if ((card as PaymentMethod).card.country === 'US') {
+                                paymentMethod = card as PaymentMethod;
+                                showState = true;
+                                return;
+                            }
+                        } else if (card && Object.hasOwn(card, '$id')) {
+                            method = card as PaymentMethodData;
+                        }
+                    }
                     const card = await sdk.forConsole.billing.getPaymentMethod(method.$id);
                     if (card?.last4) {
                         paymentMethodId = card.$id;
@@ -131,6 +157,9 @@
     </Button>
 
     <PaymentBoxes
+        bind:paymentMethod
+        bind:showState
+        bind:state
         methods={filteredMethods}
         defaultMethod={$organization?.paymentMethodId}
         backupMethod={$organization?.backupPaymentMethodId}

From b7ab1d70449f7f5c59c76833c3adf0ff0130ae49 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Mon, 4 Aug 2025 08:26:03 +0000
Subject: [PATCH 11/16] Fix typos

---
 .../components/billing/paymentModal.svelte    |   2 +-
 src/lib/components/billing/state.ts           | 238 +++++++++---------
 src/lib/sdk/billing.ts                        |   7 +-
 src/lib/stores/stripe.ts                      |  19 +-
 4 files changed, 139 insertions(+), 127 deletions(-)

diff --git a/src/lib/components/billing/paymentModal.svelte b/src/lib/components/billing/paymentModal.svelte
index 06f14cde1..72accfd10 100644
--- a/src/lib/components/billing/paymentModal.svelte
+++ b/src/lib/components/billing/paymentModal.svelte
@@ -41,7 +41,7 @@
             }
 
             const card = await submitStripeCard(name, page?.params?.organization ?? null);
-            if (card && typeof card !== 'string') {
+            if (card && Object.hasOwn(card, 'id')) {
                 if ((card as PaymentMethod).card.country === 'US') {
                     paymentMethod = card as PaymentMethod;
                     showState = true;
diff --git a/src/lib/components/billing/state.ts b/src/lib/components/billing/state.ts
index faa3f0786..d3f08a113 100644
--- a/src/lib/components/billing/state.ts
+++ b/src/lib/components/billing/state.ts
@@ -1,238 +1,238 @@
 export const states: Array<{ name: string; abbreviation: string }> = [
     {
-        "name": "Alabama",
-        "abbreviation": "AL"
+        name: 'Alabama',
+        abbreviation: 'AL'
     },
     {
-        "name": "Alaska",
-        "abbreviation": "AK"
+        name: 'Alaska',
+        abbreviation: 'AK'
     },
     {
-        "name": "American Samoa",
-        "abbreviation": "AS"
+        name: 'American Samoa',
+        abbreviation: 'AS'
     },
     {
-        "name": "Arizona",
-        "abbreviation": "AZ"
+        name: 'Arizona',
+        abbreviation: 'AZ'
     },
     {
-        "name": "Arkansas",
-        "abbreviation": "AR"
+        name: 'Arkansas',
+        abbreviation: 'AR'
     },
     {
-        "name": "California",
-        "abbreviation": "CA"
+        name: 'California',
+        abbreviation: 'CA'
     },
     {
-        "name": "Colorado",
-        "abbreviation": "CO"
+        name: 'Colorado',
+        abbreviation: 'CO'
     },
     {
-        "name": "Connecticut",
-        "abbreviation": "CT"
+        name: 'Connecticut',
+        abbreviation: 'CT'
     },
     {
-        "name": "Delaware",
-        "abbreviation": "DE"
+        name: 'Delaware',
+        abbreviation: 'DE'
     },
     {
-        "name": "District Of Columbia",
-        "abbreviation": "DC"
+        name: 'District Of Columbia',
+        abbreviation: 'DC'
     },
     {
-        "name": "Federated States Of Micronesia",
-        "abbreviation": "FM"
+        name: 'Federated States Of Micronesia',
+        abbreviation: 'FM'
     },
     {
-        "name": "Florida",
-        "abbreviation": "FL"
+        name: 'Florida',
+        abbreviation: 'FL'
     },
     {
-        "name": "Georgia",
-        "abbreviation": "GA"
+        name: 'Georgia',
+        abbreviation: 'GA'
     },
     {
-        "name": "Guam",
-        "abbreviation": "GU"
+        name: 'Guam',
+        abbreviation: 'GU'
     },
     {
-        "name": "Hawaii",
-        "abbreviation": "HI"
+        name: 'Hawaii',
+        abbreviation: 'HI'
     },
     {
-        "name": "Idaho",
-        "abbreviation": "ID"
+        name: 'Idaho',
+        abbreviation: 'ID'
     },
     {
-        "name": "Illinois",
-        "abbreviation": "IL"
+        name: 'Illinois',
+        abbreviation: 'IL'
     },
     {
-        "name": "Indiana",
-        "abbreviation": "IN"
+        name: 'Indiana',
+        abbreviation: 'IN'
     },
     {
-        "name": "Iowa",
-        "abbreviation": "IA"
+        name: 'Iowa',
+        abbreviation: 'IA'
     },
     {
-        "name": "Kansas",
-        "abbreviation": "KS"
+        name: 'Kansas',
+        abbreviation: 'KS'
     },
     {
-        "name": "Kentucky",
-        "abbreviation": "KY"
+        name: 'Kentucky',
+        abbreviation: 'KY'
     },
     {
-        "name": "Louisiana",
-        "abbreviation": "LA"
+        name: 'Louisiana',
+        abbreviation: 'LA'
     },
     {
-        "name": "Maine",
-        "abbreviation": "ME"
+        name: 'Maine',
+        abbreviation: 'ME'
     },
     {
-        "name": "Marshall Islands",
-        "abbreviation": "MH"
+        name: 'Marshall Islands',
+        abbreviation: 'MH'
     },
     {
-        "name": "Maryland",
-        "abbreviation": "MD"
+        name: 'Maryland',
+        abbreviation: 'MD'
     },
     {
-        "name": "Massachusetts",
-        "abbreviation": "MA"
+        name: 'Massachusetts',
+        abbreviation: 'MA'
     },
     {
-        "name": "Michigan",
-        "abbreviation": "MI"
+        name: 'Michigan',
+        abbreviation: 'MI'
     },
     {
-        "name": "Minnesota",
-        "abbreviation": "MN"
+        name: 'Minnesota',
+        abbreviation: 'MN'
     },
     {
-        "name": "Mississippi",
-        "abbreviation": "MS"
+        name: 'Mississippi',
+        abbreviation: 'MS'
     },
     {
-        "name": "Missouri",
-        "abbreviation": "MO"
+        name: 'Missouri',
+        abbreviation: 'MO'
     },
     {
-        "name": "Montana",
-        "abbreviation": "MT"
+        name: 'Montana',
+        abbreviation: 'MT'
     },
     {
-        "name": "Nebraska",
-        "abbreviation": "NE"
+        name: 'Nebraska',
+        abbreviation: 'NE'
     },
     {
-        "name": "Nevada",
-        "abbreviation": "NV"
+        name: 'Nevada',
+        abbreviation: 'NV'
     },
     {
-        "name": "New Hampshire",
-        "abbreviation": "NH"
+        name: 'New Hampshire',
+        abbreviation: 'NH'
     },
     {
-        "name": "New Jersey",
-        "abbreviation": "NJ"
+        name: 'New Jersey',
+        abbreviation: 'NJ'
     },
     {
-        "name": "New Mexico",
-        "abbreviation": "NM"
+        name: 'New Mexico',
+        abbreviation: 'NM'
     },
     {
-        "name": "New York",
-        "abbreviation": "NY"
+        name: 'New York',
+        abbreviation: 'NY'
     },
     {
-        "name": "North Carolina",
-        "abbreviation": "NC"
+        name: 'North Carolina',
+        abbreviation: 'NC'
     },
     {
-        "name": "North Dakota",
-        "abbreviation": "ND"
+        name: 'North Dakota',
+        abbreviation: 'ND'
     },
     {
-        "name": "Northern Mariana Islands",
-        "abbreviation": "MP"
+        name: 'Northern Mariana Islands',
+        abbreviation: 'MP'
     },
     {
-        "name": "Ohio",
-        "abbreviation": "OH"
+        name: 'Ohio',
+        abbreviation: 'OH'
     },
     {
-        "name": "Oklahoma",
-        "abbreviation": "OK"
+        name: 'Oklahoma',
+        abbreviation: 'OK'
     },
     {
-        "name": "Oregon",
-        "abbreviation": "OR"
+        name: 'Oregon',
+        abbreviation: 'OR'
     },
     {
-        "name": "Palau",
-        "abbreviation": "PW"
+        name: 'Palau',
+        abbreviation: 'PW'
     },
     {
-        "name": "Pennsylvania",
-        "abbreviation": "PA"
+        name: 'Pennsylvania',
+        abbreviation: 'PA'
     },
     {
-        "name": "Puerto Rico",
-        "abbreviation": "PR"
+        name: 'Puerto Rico',
+        abbreviation: 'PR'
     },
     {
-        "name": "Rhode Island",
-        "abbreviation": "RI"
+        name: 'Rhode Island',
+        abbreviation: 'RI'
     },
     {
-        "name": "South Carolina",
-        "abbreviation": "SC"
+        name: 'South Carolina',
+        abbreviation: 'SC'
     },
     {
-        "name": "South Dakota",
-        "abbreviation": "SD"
+        name: 'South Dakota',
+        abbreviation: 'SD'
     },
     {
-        "name": "Tennessee",
-        "abbreviation": "TN"
+        name: 'Tennessee',
+        abbreviation: 'TN'
     },
     {
-        "name": "Texas",
-        "abbreviation": "TX"
+        name: 'Texas',
+        abbreviation: 'TX'
     },
     {
-        "name": "Utah",
-        "abbreviation": "UT"
+        name: 'Utah',
+        abbreviation: 'UT'
     },
     {
-        "name": "Vermont",
-        "abbreviation": "VT"
+        name: 'Vermont',
+        abbreviation: 'VT'
     },
     {
-        "name": "Virgin Islands",
-        "abbreviation": "VI"
+        name: 'Virgin Islands',
+        abbreviation: 'VI'
     },
     {
-        "name": "Virginia",
-        "abbreviation": "VA"
+        name: 'Virginia',
+        abbreviation: 'VA'
     },
     {
-        "name": "Washington",
-        "abbreviation": "WA"
+        name: 'Washington',
+        abbreviation: 'WA'
     },
     {
-        "name": "West Virginia",
-        "abbreviation": "WV"
+        name: 'West Virginia',
+        abbreviation: 'WV'
     },
     {
-        "name": "Wisconsin",
-        "abbreviation": "WI"
+        name: 'Wisconsin',
+        abbreviation: 'WI'
     },
     {
-        "name": "Wyoming",
-        "abbreviation": "WY"
+        name: 'Wyoming',
+        abbreviation: 'WY'
     }
-];
\ No newline at end of file
+];
diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index b1d3b5809..3dbd0b9f9 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -1111,7 +1111,8 @@ export class Billing {
     async setPaymentMethod(
         paymentMethodId: string,
         providerMethodId: string | PaymentMethod,
-        name: string
+        name: string,
+        state: string | undefined = undefined
     ): Promise<PaymentMethodData> {
         const path = `/account/payment-methods/${paymentMethodId}/provider`;
         const params = {
@@ -1119,6 +1120,10 @@ export class Billing {
             providerMethodId,
             name
         };
+
+        if (state !== undefined) {
+            params['state'] = state;
+        }
         const uri = new URL(this.client.config.endpoint + path);
         return await this.client.call(
             'patch',
diff --git a/src/lib/stores/stripe.ts b/src/lib/stores/stripe.ts
index 3fab2e59a..7e5fc31d6 100644
--- a/src/lib/stores/stripe.ts
+++ b/src/lib/stores/stripe.ts
@@ -1,4 +1,10 @@
-import type { Appearance, PaymentMethod, Stripe, StripeElement, StripeElements } from '@stripe/stripe-js';
+import type {
+    Appearance,
+    PaymentMethod,
+    Stripe,
+    StripeElement,
+    StripeElements
+} from '@stripe/stripe-js';
 import { sdk } from './sdk';
 import { app } from './app';
 import { get, writable } from 'svelte/store';
@@ -95,7 +101,6 @@ export async function submitStripeCard(name: string, organizationId?: string) {
             throw e;
         }
 
-
         if (setupIntent && setupIntent.status === 'succeeded') {
             if ((setupIntent.payment_method as PaymentMethod).card.country === 'US') {
                 // need to get state
@@ -122,7 +127,7 @@ export async function submitStripeCard(name: string, organizationId?: string) {
 }
 
 export async function setPaymentMethod(providerMethodId: string, name: string, state: string) {
-    if(!paymentMethod) {
+    if (!paymentMethod) {
         addNotification({
             title: 'Error',
             message: 'No payment method found. Please try again.',
@@ -134,7 +139,8 @@ export async function setPaymentMethod(providerMethodId: string, name: string, s
         const method = await sdk.forConsole.billing.setPaymentMethod(
             paymentMethod.$id,
             providerMethodId,
-            name
+            name,
+            state
         );
         paymentElement.destroy();
         isStripeInitialized.set(false);
@@ -187,8 +193,9 @@ export async function confirmSetup(
 
     const { setupIntent, error } = await get(stripe).confirmCardSetup(clientSecret, {
         payment_method: paymentMethodId,
-        return_url: `${baseUrl}${urlRoute ?? `organization-${get(organization).$id}/billing?clientSecret=${clientSecret}`
-            }`
+        return_url: `${baseUrl}${
+            urlRoute ?? `organization-${get(organization).$id}/billing?clientSecret=${clientSecret}`
+        }`
     });
 
     if (error) {

From 3d89151faf76bd542d2e6e0412cabc48d11ea4f9 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Tue, 5 Aug 2025 02:05:29 +0000
Subject: [PATCH 12/16] update test to select state

---
 e2e/steps/pro-project.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/e2e/steps/pro-project.ts b/e2e/steps/pro-project.ts
index 0762132c4..41b411d30 100644
--- a/e2e/steps/pro-project.ts
+++ b/e2e/steps/pro-project.ts
@@ -20,6 +20,8 @@ export async function enterCreditCard(page: Page) {
     await stripe.locator('id=Field-cvcInput').fill('123');
     await stripe.locator('id=Field-countryInput').selectOption('DE');
     await dialog.getByRole('button', { name: 'Add', exact: true }).click();
+    await page.locator('id=state-picker').selectOption('AS');
+    await page.getByRole('button', { name: 'Add', exact: true }).click();
     await dialog.waitFor({
         state: 'hidden'
     });

From 1c929d8723e34dd80f889d9b215ef028ae402928 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Tue, 5 Aug 2025 02:31:47 +0000
Subject: [PATCH 13/16] fix dropdown click

---
 e2e/steps/pro-project.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/e2e/steps/pro-project.ts b/e2e/steps/pro-project.ts
index 41b411d30..fcdd6b5cd 100644
--- a/e2e/steps/pro-project.ts
+++ b/e2e/steps/pro-project.ts
@@ -20,7 +20,8 @@ export async function enterCreditCard(page: Page) {
     await stripe.locator('id=Field-cvcInput').fill('123');
     await stripe.locator('id=Field-countryInput').selectOption('DE');
     await dialog.getByRole('button', { name: 'Add', exact: true }).click();
-    await page.locator('id=state-picker').selectOption('AS');
+    await page.locator('id=state-picker').click(); // open dropdown
+    await page.getByRole('option', { name: 'Alabama' }).click();
     await page.getByRole('button', { name: 'Add', exact: true }).click();
     await dialog.waitFor({
         state: 'hidden'

From bc3b9b56f4150473e17d22c79173e9f5863bb23f Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Tue, 5 Aug 2025 02:43:39 +0000
Subject: [PATCH 14/16] fix

---
 e2e/steps/pro-project.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/steps/pro-project.ts b/e2e/steps/pro-project.ts
index fcdd6b5cd..5a9458333 100644
--- a/e2e/steps/pro-project.ts
+++ b/e2e/steps/pro-project.ts
@@ -22,7 +22,7 @@ export async function enterCreditCard(page: Page) {
     await dialog.getByRole('button', { name: 'Add', exact: true }).click();
     await page.locator('id=state-picker').click(); // open dropdown
     await page.getByRole('option', { name: 'Alabama' }).click();
-    await page.getByRole('button', { name: 'Add', exact: true }).click();
+    await page.getByRole('button', { name: 'Add', exact: true }).nth(0).click();
     await dialog.waitFor({
         state: 'hidden'
     });

From 56b6346760544b15530cb03a90945ed46bb30bbc Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Tue, 5 Aug 2025 03:24:34 +0000
Subject: [PATCH 15/16] correct button

---
 e2e/steps/pro-project.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/steps/pro-project.ts b/e2e/steps/pro-project.ts
index 5a9458333..9021ddbc9 100644
--- a/e2e/steps/pro-project.ts
+++ b/e2e/steps/pro-project.ts
@@ -22,7 +22,7 @@ export async function enterCreditCard(page: Page) {
     await dialog.getByRole('button', { name: 'Add', exact: true }).click();
     await page.locator('id=state-picker').click(); // open dropdown
     await page.getByRole('option', { name: 'Alabama' }).click();
-    await page.getByRole('button', { name: 'Add', exact: true }).nth(0).click();
+    await page.getByRole('button', { name: 'Add', exact: true }).nth(1).click();
     await dialog.waitFor({
         state: 'hidden'
     });

From 576365f434cec6fda52bf3e72d13c816d9e7d466 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Tue, 5 Aug 2025 03:25:21 +0000
Subject: [PATCH 16/16] get correct button

---
 e2e/steps/pro-project.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/steps/pro-project.ts b/e2e/steps/pro-project.ts
index 9021ddbc9..438caebef 100644
--- a/e2e/steps/pro-project.ts
+++ b/e2e/steps/pro-project.ts
@@ -22,7 +22,7 @@ export async function enterCreditCard(page: Page) {
     await dialog.getByRole('button', { name: 'Add', exact: true }).click();
     await page.locator('id=state-picker').click(); // open dropdown
     await page.getByRole('option', { name: 'Alabama' }).click();
-    await page.getByRole('button', { name: 'Add', exact: true }).nth(1).click();
+    await dialog.getByRole('button', { name: 'Add', exact: true }).click();
     await dialog.waitFor({
         state: 'hidden'
     });