chore: wip

Author: glennmichael123

app/Actions/Payment/CreatePaymentIntentAction.ts

@@ -8,14 +8,12 @@ export default new Action({
   method: 'POST',
   async handle(request: RequestInstance) {
     const userId = Number(request.getParam('id'))
-    const amount = Number(request.get('amount'))
 
     const user = await User.find(userId)
 
     const paymentIntent = await user?.paymentIntent({
-      amount,
+      amount: 1000,
       currency: 'usd',
-      description: 'Subscription to Stacks Pro',
       payment_method_types: ['card'],
     })
 

app/Actions/Payment/CreateSetupIntentAction.ts

@@ -10,7 +10,9 @@ export default new Action({
     const userId = Number(request.getParam('id'))
     const user = await User.find(userId)
 
-    const setupIntent = await user?.createSetupIntent()
+    const setupIntent = await user?.createSetupIntent({
+      payment_method_types: ['card', 'link', 'us_bank_account'],
+    })
 
     return setupIntent
   },

resources/functions/billing/payments.ts

@@ -32,33 +32,30 @@ export function useBillable() {
     return `${month} ${day}, ${year}`
   }
 
-  async function loadCardForm(): Promise<boolean> {
-    const isCreated = await loadCardElement()
+  async function loadCardForm(clientSecret: string): Promise<boolean> {
+    const isCreated = await loadCardElement(clientSecret)
 
     return isCreated
   }
 
-  async function handleAddPaymentMethod(elements: any) {
-    const clientSecret = await paymentStore.fetchSetupIntent(1)
+  async function handleAddPaymentMethod(clientSecret: string, elements: any) {
+    try {
+      const { error, setupIntent } = await confirmCardSetup(clientSecret, elements)
 
-    const param = {
-      clientSecret,
-      paymentMethod: {
-        card: elements,
-        billing_details: { name: 'Chris Breuer' },
-      },
-    }
-
-    const { setupIntent, error } = await confirmCardSetup(param)
+      if (error) {
+        console.error(error.message)
+      }
+      else {
+        await paymentStore.storePaymentMethod(setupIntent.payment_method)
 
-    if (error) {
-      console.error(error.message)
+        if (!paymentStore.hasPaymentMethods) {
+          await paymentStore.setUserDefaultPaymentMethod(setupIntent.payment_method)
+        }
+      }
     }
-    else {
-      await paymentStore.storePaymentMethod(setupIntent.payment_method)
-
-      if (!paymentStore.hasPaymentMethods)
-        await paymentStore.setUserDefaultPaymentMethod(setupIntent.payment_method)
+    catch (err) {
+      console.error('Error processing payment:', err)
+      // Handle any unexpected errors
     }
   }
 

resources/stores/payment.ts

@@ -37,6 +37,23 @@ export const usePaymentStore = defineStore('payment', {
       return clientSecret
     },
 
+    async fetchPaymentIntent(id: number): Promise<string> {
+      const url = `http://localhost:3008/payments/create-payment-intent/${id}`
+
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+        },
+      })
+
+      const client: any = await response.json()
+      const clientSecret = client.client_secret
+
+      return clientSecret
+    },
+
     async subscribeToPlan(body: { type: string, plan: string, description: string }): Promise<string> {
       const url = 'http://localhost:3008/payments/create-subscription'
 

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

@@ -6,13 +6,16 @@ const { loadCardForm, handleAddPaymentMethod } = useBillable()
 const paymentStore = usePaymentStore()
 
 const element = ref(null as any)
+let clientSecret: string
 
 onMounted(async () => {
-  element.value = await loadCardForm()
+  clientSecret = await paymentStore.fetchSetupIntent(1)
+
+  element.value = await loadCardForm(clientSecret)
 })
 
 async function addPaymentMethod() {
-  await handleAddPaymentMethod(element.value)
+  await handleAddPaymentMethod(clientSecret, element.value)
 
   await paymentStore.fetchUserPaymentMethods(1)
   await paymentStore.fetchDefaultPaymentMethod(1)

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

@@ -80,7 +80,7 @@ function cancelForm() {
 
     <PaymentMethodList :user-id="1" />
 
-    <div v-show="showCardForm">
+    <div v-if="showCardForm">
       <PaymentForm @cancel-payment-method-addition="cancelForm" />
     </div>
 

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

@@ -1,5 +1,4 @@
 import { loadStripe } from '@stripe/stripe-js'
-import { ref } from 'vue'
 
 interface PaymentMethod {
   card: any // Replace `any` with the appropriate type for `elements`
@@ -15,45 +14,28 @@ interface PaymentParam {
 
 export const publishableKey: string = import.meta.env.FRONTEND_STRIPE_PUBLIC_KEY || ''
 
-const client = ref(null as any)
+let client: any
 
-export async function loadCardElement(): Promise<any> {
-  client.value = await loadStripe(publishableKey)
+export async function loadCardElement(clientSecret: string): Promise<any> {
+  client = await loadStripe(publishableKey)
 
-  const style = {
-    base: {
-      'color': '#32325d',
-      'lineHeight': '18px',
-      'fontFamily': '"Helvetica Neue", Helvetica, sans-serif',
-      'fontSmoothing': 'antialiased',
-      'fontSize': '16px',
-      '::placeholder': {
-        color: '#aab7c4',
-      },
-    },
-    invalid: {
-      color: '#fa755a',
-      iconColor: '#fa755a',
-    },
-  }
-
-  const elements = client.value.elements()
-  const cardElement = elements.create('card', { style })
+  const elements = client.elements({ clientSecret })
+  const cardElement = elements.create('card')
 
   cardElement.mount('#card-element')
 
   return cardElement
 }
 
 export async function loadPaymentElement(clientSecret: string): Promise<any> {
-  client.value = await loadStripe(publishableKey)
+  client = await loadStripe(publishableKey)
 
-  const elements = client.value.elements()
+  const elements = client.elements()
   const cardElement = elements.create('payment')
 
   cardElement.mount('#payment-element')
 
-  elements.value = client.value.elements({ clientSecret })
+  elements.value = client.elements({ clientSecret })
 
   const paymentElement = elements.value.create('payment', {
     fields: { billingDetails: 'auto' },
@@ -64,10 +46,71 @@ export async function loadPaymentElement(clientSecret: string): Promise<any> {
   return cardElement
 }
 
-export async function confirmCardSetup(card: PaymentParam): Promise<{ setupIntent: any, error: any }> {
-  const data = await client.value.confirmCardSetup(card.clientSecret, { payment_method: card.paymentMethod })
+export async function confirmCardSetup(clientSecret: string, elements: any): Promise<{ setupIntent: any, error: any }> {
+  const data = await client.confirmCardSetup(clientSecret, { payment_method: { card: elements } })
 
   const { setupIntent, error } = data
 
   return { setupIntent, error }
 }
+
+export async function confirmCardPayment(clientSecret: string, elements: any): Promise<{ paymentIntent: any, error: any }> {
+  try {
+    const data = await client.confirmCardPayment(clientSecret, {
+      payment_method: {
+        card: elements,
+        billing_details: {
+          name: 'Chris Breuer',
+        },
+      },
+    })
+
+    const { paymentIntent, error } = data
+
+    return { paymentIntent, error }
+  }
+  catch (err) {
+    console.error('Error confirming card payment:', err)
+    return { paymentIntent: null, error: err }
+  }
+}
+
+export async function createPaymentMethod(elements: any): Promise<{ paymentIntent: any, error: any }> {
+  try {
+    const data = await client.createPaymentMethod({
+      type: 'card',
+      card: elements,
+    })
+
+    console.log('data from create payment method', data)
+
+    const { paymentIntent, error } = data
+
+    return { paymentIntent, error }
+  }
+  catch (err) {
+    console.error('Error confirming card payment:', err)
+    return { paymentIntent: null, error: err }
+  }
+}
+
+export async function confirmPayment(elements: any): Promise<{ paymentIntent: any, error: any }> {
+  try {
+    const data = await client.confirmPayment({
+      elements,
+      confirmParams: {
+        // Return URL where the customer should be redirected after the PaymentIntent is confirmed.
+        return_url: 'http://localhost:5173/settings/billing',
+      },
+    },
+    )
+
+    const { paymentIntent, error } = data
+
+    return { paymentIntent, error }
+  }
+  catch (err) {
+    console.error('Error confirming card payment:', err)
+    return { paymentIntent: null, error: err }
+  }
+}

storage/framework/core/payments/src/billable/payment-method.ts

@@ -169,8 +169,9 @@ export const managePaymentMethod: ManagePaymentMethod = (() => {
 
     const paymentMethods = await PaymentMethod.where('user_id', user.id)
       .orWhere(
-        ['is_default', '=', null],
+        ['is_default', 'is', null],
         ['is_default', '=', false],
+        ['is_default', '=', ''],
       )
       .get()