joshnuss / svelte-stripe

Everything you need to add Stripe Elements to your Svelte project
https://sveltestripe.com
MIT License
422 stars 41 forks source link

Can't seem to validate address #121

Open paulGeoghegan opened 2 months ago

paulGeoghegan commented 2 months ago

Describe the bug

For my website I need to validate that the state the person is selecting is available for delivery. The company only delivers to one state but they can have any state for billing. I can't seem to find a way to access the state value as the user selects it.

        <Elements
            {stripe}
            {clientSecret}
            theme="flat"
            labels="floating"
            variables={{ colorPrimary: '#7c4dff' }}
            rules={{ '.Input': { border: 'solid 1px #0002' } }}
            bind:elements
        >
            <form on:submit|preventDefault={submit}>
                <LinkAuthenticationElement />
                <PaymentElement />
                {#if $cart.delivery}
                    <h2>Shipping info</h2>
                    <Address
                        mode="shipping"
                        fields={{ phone: 'always' }}
                        validation={{ phone: { required: 'always' } }}
                    />
                {:else}
                    <h2 class="mb-4 mt-8 text-lg font-bold text-gray-700 sm:text-xl">
                        Billing info
                    </h2>
                    <Address
                        mode="billing"
                        fields={{ phone: 'always' }}
                        validation={{ phone: { required: 'always' } }}
                    />
                {/if}
                <button
                    class="mx-auto mt-8 block rounded bg-logoBackgroundBlue px-5 py-3 text-sm text-gray-100 transition hover:bg-logobackgroundBlueRgba focus:bg-logobackgroundBlueRgba disabled:cursor-not-allowed disabled:bg-gray-300"
                    disabled={processing}
                >
                    {#if processing}
                        Processing...
                    {:else}
                        Pay €{total}
                    {/if}
                </button>
            </form>
        </Elements>

I looked at the Stripe docs for listening to changes but that doesn't seem to translate well to svelte.

Reproduction

N/A There isn't really a bug here I just need an example.

Severity

serious, but I can work around it

Additional Information

No response