Merge pull request #963 from appwrite/fix-confirm-payments

fix: confirm payments

src/lib/stores/stripe.ts

@@ -51,7 +51,7 @@ export async function unmountPaymentElement() {
     elements = null;
 }
 
-export async function submitStripeCard(name: string, urlRoute?: string) {
+export async function submitStripeCard(name: string, organizationId?: string) {
     try {
         // If a payment method was created during initialization, use it, otherwise create a new one
         if (!paymentMethod) {
@@ -62,16 +62,20 @@ export async function submitStripeCard(name: string, urlRoute?: string) {
         // // Element needs to be submitted before confirming the setup intent
         elements.submit();
 
-        const baseUrl = 'https://cloud.appwrite.io/console/';
+        const baseUrl = 'https://cloud.appwrite.io/console';
+        const accountUrl = `${baseUrl}/account/payments?clientSecret=${clientSecret}`;
+        const orgUrl = `${baseUrl}/organization-${organizationId}/billing?clientSecret=${clientSecret}`;
+
+        const returnUrl = new URL(organizationId ? orgUrl : accountUrl);
+
+        returnUrl.searchParams.append('clientSecret', clientSecret);
+        returnUrl.searchParams.append('paymentMethodId', paymentMethod.$id);
 
         const { setupIntent, error } = await get(stripe).confirmSetup({
             elements,
             clientSecret,
             confirmParams: {
-                return_url: `${baseUrl}${
-                    urlRoute ??
-                    `organization-${get(organization).$id}/billing?clientSecret=${clientSecret}`
-                }`,
+                return_url: returnUrl.toString(),
                 payment_method_data: {
                     billing_details: {
                         name

src/routes/console/account/payments/+page.svelte

@@ -3,8 +3,19 @@
     import { Container } from '$lib/layout';
     import PaymentMethods from './paymentMethods.svelte';
     import BillingAddress from './billingAddress.svelte';
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import { confirmPayment } from '$lib/stores/stripe';
 
     let showPayment = false;
+
+    onMount(async () => {
+        if ($page.url.searchParams.has('clientSecret')) {
+            const clientSecret = $page.url.searchParams.get('clientSecret');
+            const paymentMethodId = $page.url.searchParams.get('paymentMethodId');
+            await confirmPayment('', clientSecret, paymentMethodId);
+        }
+    });
 </script>
 
 <Container>

src/routes/console/account/payments/paymentModal.svelte

@@ -6,6 +6,7 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
+    import { page } from '$app/stores';
 
     export let show = false;
 
@@ -20,7 +21,7 @@
 
     async function handleSubmit() {
         try {
-            const card = await submitStripeCard(name, '/account/payments');
+            const card = await submitStripeCard(name, $page?.params?.organization ?? null);
             invalidate(Dependencies.PAYMENT_METHODS);
             dispatch('submit', card);
             show = false;

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

@@ -33,7 +33,7 @@
     async function handleSubmit() {
         try {
             if (!selectedPaymentMethodId) {
-                const method = await submitStripeCard(name);
+                const method = await submitStripeCard(name, $organization.$id);
                 selectedPaymentMethodId = method.$id;
             }
             isBackup

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

@@ -39,7 +39,7 @@
         try {
             if (paymentMethodId === null) {
                 try {
-                    const method = await submitStripeCard(name);
+                    const method = await submitStripeCard(name, $organization.$id);
                     const card = await sdk.forConsole.billing.getPaymentMethod(method.$id);
                     if (card?.last4) {
                         paymentMethodId = card.$id;

src/routes/console/organization-[organization]/billing/wizard/paymentDetails.svelte

@@ -9,6 +9,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { PaymentBoxes } from '$lib/components/billing';
     import { addCreditWizardStore } from '../store';
+    import { organization } from '$lib/stores/organization';
 
     let methods: PaymentList;
     let name: string;
@@ -21,7 +22,7 @@
 
     async function handleSubmit() {
         try {
-            const method = await submitStripeCard(name);
+            const method = await submitStripeCard(name, $organization.$id);
             $addCreditWizardStore.paymentMethodId = method.$id;
             invalidate(Dependencies.PAYMENT_METHODS);
         } catch (e) {

src/routes/console/wizard/cloudOrganizationChangeTier/paymentDetails.svelte

@@ -13,6 +13,7 @@
     import { symmetricDifference } from '$lib/helpers/array';
     import { showUsageRatesModal } from '$lib/stores/billing';
     import { PaymentBoxes } from '$lib/components/billing';
+    import { page } from '$app/stores';
 
     let methods: PaymentList;
     let filteredMethods: PaymentMethodData[];
@@ -48,7 +49,7 @@
             }
         } else {
             try {
-                await submitStripeCard(name);
+                await submitStripeCard(name, $page?.params?.organization ?? null);
                 const latestMethods = await sdk.forConsole.billing.listPaymentMethods();
                 const paymentMethod = symmetricDifference(
                     methods.paymentMethods,