chore: wip

Author: glennmichael123

resources/functions/billing/payments.ts

@@ -1,10 +1,7 @@
-import { loadStripe } from '@stripe/stripe-js'
+import { cardElement } from '@stacksjs/browser'
 
-export const publishableKey = import.meta.env.FRONTEND_STRIPE_PUBLIC_KEY
 const paymentStore = usePaymentStore()
 
-const stripe = ref(null as any)
-
 export function useBillable() {
   function convertUnixTimestampToDate(timestamp: number): string {
     // Create a Date object from the Unix timestamp
@@ -35,15 +32,10 @@ export function useBillable() {
     return `${month} ${day}, ${year}`
   }
 
-  async function loadStripeElement(clientSecret: string): Promise<any> {
-    stripe.value = await loadStripe(publishableKey)
-
-    const elements = stripe.value.elements()
-    const cardElement = elements.create('card')
-
-    cardElement.mount('#payment-element')
+  async function loadPaymentElement(clientSecret: string): Promise<any> {
+    const element = cardElement()
 
-    return cardElement
+    return element
 
     // if (stripe) {
     //   elements.value = stripe.value.elements({ clientSecret })
@@ -60,25 +52,6 @@ export function useBillable() {
     // return false
   }
 
-  async function setDefaultPaymentMethod(setupIntent: string): Promise<string> {
-    const url = 'http://localhost:3008/stripe/set-default-payment-method'
-
-    const body = { setupIntent }
-
-    const response = await fetch(url, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Accept': 'application/json',
-      },
-      body: JSON.stringify(body),
-    })
-
-    const res: any = await response.json()
-
-    return res
-  }
-
   async function handleAddPaymentMethod(clientSecret: string, elements: any) {
     if (!stripe.value || !elements)
       return
@@ -98,7 +71,7 @@ export function useBillable() {
     } // Display or handle error for the user
     else {
       if (!paymentStore.hasPaymentMethods)
-        await setDefaultPaymentMethod(setupIntent.payment_method)
+        await paymentStore.setDefaultPaymentMethod(setupIntent.payment_method)
     }
   }
 
@@ -128,5 +101,5 @@ export function useBillable() {
     paymentStore.closePlans()
   }
 
-  return { loadStripeElement, handleAddPaymentMethod, isEmpty, convertUnixTimestampToDate, editPlan, updatingPlanState, showCurrentPlan, cancelEditPlan, showPlans }
+  return { loadPaymentElement, handleAddPaymentMethod, isEmpty, convertUnixTimestampToDate, editPlan, updatingPlanState, showCurrentPlan, cancelEditPlan, showPlans }
 }

resources/stores/payment.ts

@@ -75,6 +75,25 @@ export const usePaymentStore = defineStore('payment', {
       return client
     },
 
+    async setDefaultPaymentMethod(setupIntent: string): Promise<string> {
+      const url = 'http://localhost:3008/stripe/set-default-payment-method'
+  
+      const body = { setupIntent }
+  
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+        },
+        body: JSON.stringify(body),
+      })
+  
+      const res: any = await response.json()
+  
+      return res
+    },
+
     openPlans() {
       this.planState = true
     },

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

@@ -12,9 +12,8 @@ const clientSecret = ref('')
 
 const isLoadingWebElement = ref(false)
 const showStripe = ref(false)
-const elements = ref('')
 
-const { loadStripeElement, handleAddPaymentMethod } = useBillable()
+const { handleAddPaymentMethod } = useBillable()
 
 async function loadWebElement() {
   isLoadingWebElement.value = true

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

@@ -0,0 +1,18 @@
+import { loadStripe } from '@stripe/stripe-js'
+import { ref } from 'vue'
+
+export const publishableKey: string = import.meta.env.FRONTEND_STRIPE_PUBLIC_KEY || ''
+
+const client = ref(null as any)
+
+
+export async function cardElement(): Promise<any> {
+  client.value = await loadStripe(publishableKey)
+
+  const elements = client.value.elements()
+  const cardElement = elements.create('card')
+
+  cardElement.mount('#payment-element')
+
+  return cardElement
+}

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

@@ -1,4 +1,5 @@
 export * from './base'
+export * from './billlable'
 export * from './debounce'
 export * from './function'
 export * from './guards'