update to get client secret and create form

src/lib/stores/billing.ts

@@ -1,4 +1,4 @@
-import type { Client } from "@aw-labs/appwrite-console";
+import type { Client } from '@aw-labs/appwrite-console';
 
 export class Billing {
     client: Client;
@@ -11,6 +11,13 @@ export class Billing {
         const path = `/teams/${teamId}/payment-methods`;
         const params = {};
         const uri = new URL(this.client.config.endpoint + path);
-        this.client.call('POST', uri, {}, params);
+        return await this.client.call(
+            'POST',
+            uri,
+            {
+                'Content-Type': 'application/json'
+            },
+            params
+        );
     }
-}
+}

src/lib/stores/sdk.ts

@@ -12,6 +12,8 @@ import {
     Users
 } from '@aw-labs/appwrite-console';
 
+import { Billing } from './billing';
+
 const endpoint =
     import.meta.env.VITE_APPWRITE_ENDPOINT?.toString() ?? `${window?.location?.origin}/v1`;
 const clientConsole = new Client();
@@ -50,7 +52,7 @@ const sdkForProject = {
 
 const cloudSdk = {
     ...sdkForConsole,
-    billing: new Billing(clientConsole),
-}
+    billing: new Billing(clientConsole)
+};
 
 export { sdkForConsole, sdkForProject, cloudSdk, setProject };

src/routes/console/organization-[organization]/settings/+page.svelte

@@ -3,7 +3,7 @@
     import { InputText, Form, Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
-    import { sdkForConsole } from '$lib/stores/sdk';
+    import { cloudSdk, sdkForConsole } from '$lib/stores/sdk';
     import { members, organization } from '$lib/stores/organization';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
@@ -16,26 +16,39 @@
     let showDelete = false;
     let stripe: any;
 
-    const options = {
-        clientSecret: '{{CLIENT_SECRET}}',
-        // Fully customizable with appearance API.
-        appearance: {/*...*/},
-    };
-
-    
     onMount(() => {
         name = $organization.name;
         initStripe();
     });
-    
+
     async function initStripe() {
         stripe = await loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY?.toString());
-        // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 3
-        const elements = stripe.elements(options);
-    
-        // Create and mount the Payment Element
-        const paymentElement = elements.create('payment');
-        paymentElement.mount('#payment-element');
+    }
+
+    async function createPaymentMethod(event) {
+        event.preventDefault();
+
+        try {
+            const paymentMethod = await cloudSdk.billing.createPaymentMethod($organization.$id);
+            const options = {
+                clientSecret: paymentMethod.clientSecret,
+                // Fully customizable with appearance API.
+                appearance: {
+                    /*...*/
+                }
+            };
+            // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 3
+            const elements = stripe.elements(options);
+
+            // Create and mount the Payment Element
+            const paymentElement = elements.create('payment');
+            paymentElement.mount('#payment-element');
+        } catch (error) {
+            addNotification({
+                message: error.toString(),
+                type: 'error'
+            });
+        }
     }
 
     async function updateName() {
@@ -82,12 +95,18 @@
         </Form>
 
         <form id="payment-form">
+            <CardGrid>
+                <Heading tag="h6" size="7">Create Payment Method</Heading>
+                <svelte:fragment slot="actions">
+                    <Button on:click={createPaymentMethod}>Create Payment Method</Button>
+                </svelte:fragment>
+            </CardGrid>
             <div id="payment-element">
-              <!-- Elements will create form elements here -->
+                <!-- Elements will create form elements here -->
             </div>
             <button id="submit">Submit</button>
             <div id="error-message">
-              <!-- Display error message to your customers here -->
+                <!-- Display error message to your customers here -->
             </div>
         </form>