chore: wip

Author: glennmichael123

resources/functions/billing/payments.ts

@@ -1,4 +1,4 @@
-import { cardElement } from '@stacksjs/browser'
+import { loadCardElement, confirmCardSetup } from '@stacksjs/browser'
 
 const paymentStore = usePaymentStore()
 
@@ -32,39 +32,22 @@ export function useBillable() {
     return `${month} ${day}, ${year}`
   }
 
-  async function loadPaymentElement(clientSecret: string): Promise<any> {
-    const element = cardElement()
+  async function loadPaymentElement(clientSecret: string): Promise<boolean> {
+    const isCreated = await loadCardElement(clientSecret)
 
-    return element
-
-    // if (stripe) {
-    //   elements.value = stripe.value.elements({ clientSecret })
-
-    //   const paymentElement = elements.value.create('payment', {
-    //     fields: { billingDetails: 'auto' },
-    //   })
-
-    //   paymentElement.mount('#payment-element')
-
-    //   return true
-    // }
-
-    // return false
+    return isCreated
   }
 
   async function handleAddPaymentMethod(clientSecret: string, elements: any) {
-    if (!stripe.value || !elements)
-      return
-
-    const { setupIntent, error } = await stripe.value.confirmCardSetup(
+    const param = {
       clientSecret,
-      {
-        payment_method: {
-          card: elements,
-          billing_details: { name: 'Chris Breuer' },
-        },
+      payment_method: {
+        card: elements,
+        billing_details: { name: 'Chris Breuer' },
       },
-    )
+    };
+
+    const { setupIntent, error } = await confirmCardSetup(param)
 
     if (error) {
       console.error(error.message)

storage/framework/core/browser/src/utils/billlable.ts

@@ -1,18 +1,49 @@
 import { loadStripe } from '@stripe/stripe-js'
 import { ref } from 'vue'
 
+interface PaymentMethod {
+  card: any; // Replace `any` with the appropriate type for `elements`
+  billing_details: {
+    name: string;
+  };
+}
+
+interface PaymentParam {
+  clientSecret: string;
+  payment_method: PaymentMethod;
+}
+
 export const publishableKey: string = import.meta.env.FRONTEND_STRIPE_PUBLIC_KEY || ''
 
 const client = ref(null as any)
 
-
-export async function cardElement(): Promise<any> {
+export async function loadCardElement(clientSecret: string): Promise<boolean> {
   client.value = await loadStripe(publishableKey)
 
   const elements = client.value.elements()
   const cardElement = elements.create('card')
 
   cardElement.mount('#payment-element')
 
-  return cardElement
+  if (client) {
+    elements.value = client.value.elements({ clientSecret })
+
+    const paymentElement = elements.value.create('payment', {
+      fields: { billingDetails: 'auto' },
+    })
+
+    paymentElement.mount('#payment-element')
+
+    return true
+  }
+
+  return false
+}
+
+export async function confirmCardSetup(card: PaymentParam): Promise<{ setupIntent: any, error: any }> {
+  const clientSecret = card.clientSecret
+
+  const { setupIntent, error } = await client.value.confirmCardSetup(card)
+
+  return { setupIntent, error }
 }