chore: wip

Author: glennmichael123

resources/functions/billing/payments.ts

@@ -1,6 +1,9 @@
 export const publishableKey = import.meta.env.FRONTEND_STRIPE_PUBLIC_KEY
 import { loadStripe } from '@stripe/stripe-js'
 
+const stripe = ref(null as any)
+const elements = ref(null as any)
+
 export function useBillable() {
     async function fetchSetupIntent(): Promise<string> {
       const url = 'http://localhost:3008/stripe/create-setup-intent'
@@ -19,20 +22,41 @@ export function useBillable() {
       return clientSecret
     }
 
-    async function loadStripeElement(clientSecret: string): Promise<any | undefined> {
-      const stripe = await loadStripe(publishableKey)
+    async function loadStripeElement(clientSecret: string): Promise<boolean> {
+      stripe.value = await loadStripe(publishableKey)
 
       if (stripe) {
-        const elements = stripe.elements({ clientSecret })
-        const paymentElement = elements.create('payment', {
+        elements.value = stripe.value.elements({ clientSecret })
+
+        const paymentElement = elements.value.create('payment', {
           fields: { billingDetails: 'auto' },
         })
 
-        return paymentElement
+        paymentElement.mount('#payment-element')
+
+        return true
       }
 
-      return undefined
+      return false
+    }
+
+    async function handleAddPaymentMethod() {
+      if (!stripe.value || !elements.value) return
+    
+      const { setupIntent, error } = await stripe.value.confirmSetup({
+        elements: elements.value,
+        confirmParams: {
+          return_url: 'http://localhost:5173/settings/billing'
+        },
+      })
+    
+      if (error) {
+        console.error(error.message) // Display or handle error for the user
+      } else {
+        console.log('Setup Intent successful:', setupIntent)
+        // You might save setupIntent.id to your database here
+      }
     }
 
-    return { fetchSetupIntent, loadStripeElement }
+    return { fetchSetupIntent, loadStripeElement, handleAddPaymentMethod }
 }

resources/views/dashboard/components/billing/payment-method.vue

@@ -4,18 +4,12 @@ import { useBillable } from '../../../../functions/billing/payments'
 const stripeLoading = ref(true)
 const showStripe = ref(false)
 
-const { fetchSetupIntent, loadStripeElement } = useBillable()
+const { fetchSetupIntent, loadStripeElement, handleAddPaymentMethod } = useBillable()
 
-async function addPaymentMethod() {
+async function loadWebElement() {
  const clientSecret = await fetchSetupIntent()
 
-  const paymentElement = await loadStripeElement(clientSecret)
-
-  if (paymentElement) {
-    paymentElement.mount('#payment-element')
-
-    showStripe.value = true
-  }
+  showStripe.value = await loadStripeElement(clientSecret)
 
   stripeLoading.value = false
 }
@@ -55,7 +49,7 @@ function cancelPaymentForm() {
           <button
           type="button"
           class="rounded-md bg-blue-600 px-2.5 py-1.5 text-sm text-white font-semibold shadow-sm hover:bg-blue-gray-500 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus-visible:outline"
-          @click="cancelPaymentForm()"
+          @click="handleAddPaymentMethod()"
           >
             Save Payment Method
           </button>
@@ -76,7 +70,7 @@ function cancelPaymentForm() {
       <button
         type="button"
         class="rounded-md bg-blue-600 px-2.5 py-1.5 text-sm text-white font-semibold shadow-sm hover:bg-blue-gray-500 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus-visible:outline"
-        @click="addPaymentMethod()"
+        @click="loadWebElement()"
       >
         Add Payment Method
       </button>