chore: wip

Author: glennmichael123

app/Actions/Payment/StorePaymentMethodAction.ts

@@ -0,0 +1,18 @@
+import type { RequestInstance } from '@stacksjs/types'
+import { Action } from '@stacksjs/actions'
+import User from '../../../storage/framework/orm/src/models/User.ts'
+
+export default new Action({
+  name: 'StorePaymentMethodAction',
+  description: 'Store the customers payment methods',
+  method: 'POST',
+  async handle(request: RequestInstance) {
+    const userId = Number(request.getParam('id'))
+    const user = await User.find(userId)
+    const paymentIntent = request.get('setupIntent') as string
+
+    const paymentMethod = await user?.addPaymentMethod(paymentIntent)
+
+    return paymentMethod
+  },
+})

resources/functions/billing/payments.ts

@@ -45,19 +45,19 @@ export function useBillable() {
         card: elements,
         billing_details: { name: 'Chris Breuer' },
       },
-    };
-
-
-    // const { setupIntent, error } = 
-    await confirmCardSetup(param)
-
-    // if (error) {
-    //   console.error(error.message)
-    // } // Display or handle error for the user
-    // else {
-    //   if (!paymentStore.hasPaymentMethods)
-    //     await paymentStore.setDefaultPaymentMethod(setupIntent.payment_method)
-    // }
+    }
+
+    const { setupIntent, error } = await confirmCardSetup(param)
+
+    if (error) {
+      console.error(error.message)
+    } // Display or handle error for the user
+    else {
+      if (!paymentStore.hasPaymentMethods)
+        await paymentStore.setDefaultPaymentMethod(setupIntent.payment_method)
+      else
+       await paymentStore.storePaymentMethod(setupIntent.payment_method)
+    }
   }
 
   function isEmpty(object: any) {

resources/stores/payment.ts

@@ -94,6 +94,25 @@ export const usePaymentStore = defineStore('payment', {
       return res
     },
 
+    async storePaymentMethod(setupIntent: string): Promise<string> {
+      const url = 'http://localhost:3008/stripe/payment-method/1'
+  
+      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-form.vue

@@ -14,8 +14,6 @@ onMounted( async () => {
 })
 
 async function addPaymentMethod() {
-  // console.log(paymentIntent.value)
-  // console.log(element.value)
   await handleAddPaymentMethod(paymentIntent.value, element.value)
 }
 </script>
@@ -27,7 +25,7 @@ async function addPaymentMethod() {
     >
       <div id="link-authentication-element" />
       <div id="card-element" />
-      <button @click="addPaymentMethod" type="button" class="rounded bg-indigo-600 w-full px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save Payment Method</button>
+      <button @click="addPaymentMethod" type="button" class="rounded bg-indigo-600 w-full px-2 py-1 mt-4 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save Payment Method</button>
     </form>
   </div>
 </template>

routes/api.ts

@@ -36,6 +36,7 @@ route.group({ prefix: '/payments' }, async () => {
   route.delete('/delete-payment-method/{id}', 'Actions/Payment/DeleteDefaultPaymentAction')
   route.put('/update-default-payment-method/{id}', 'Actions/Payment/UpdateDefaultPaymentMethodAction')
   route.post('/set-default-payment-method/{id}', 'Actions/Payment/SetDefaultPaymentAction')
+  route.post('/payment-method/{id}', 'Actions/Payment/StorePaymentMethodAction')
   route.post('/create-payment-intent/{id}', 'Actions/Payment/CreatePaymentIntentAction')
   route.post('/create-subscription/{id}', 'Actions/Payment/CreateSubscriptionAction')
   route.post('/update-subscription/{id}', 'Actions/Payment/UpdateSubscriptionAction')

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

@@ -21,22 +21,7 @@ export async function loadCardElement(clientSecret: string): Promise<any> {
   client.value = await loadStripe(publishableKey)
 
   const elements = client.value.elements()
-  const cardElement = elements.create('card', {
-    style: {
-      base: {
-        color: '#32325d',
-        fontFamily: '"Poppins", sans-serif',
-        fontSize: '16px',
-        fontWeight: '500',
-        '::placeholder': {
-          color: '#aab7c4',
-        },
-      },
-      invalid: {
-        color: '#fa755a',
-      },
-    },
-  })
+  const cardElement = elements.create('card')
 
   cardElement.mount('#card-element')
 
@@ -63,9 +48,9 @@ export async function loadPaymentElement(clientSecret: string): Promise<any> {
 }
 
 export async function confirmCardSetup(card: PaymentParam): Promise<{ setupIntent: any, error: any }> {
-  console.log(card)
+  const data = await client.value.confirmCardSetup(card.clientSecret, { payment_method: card.paymentMethod })
 
-  const { setupIntent, error } = await client.value.confirmCardSetup(card.clientSecret, { payment_method: card.paymentMethod })
+  const { setupIntent, error } = data
 
   return { setupIntent, error }
 }

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

@@ -8,6 +8,7 @@ export interface ManagePaymentMethod {
   addPaymentMethod: (user: UserModel, paymentMethod: string | Stripe.PaymentMethod) => Promise<Stripe.Response<Stripe.PaymentMethod>>
   updatePaymentMethod: (user: UserModel, paymentMethodId: string, updateParams?: Stripe.PaymentMethodUpdateParams) => Promise<Stripe.Response<Stripe.PaymentMethod>>
   setDefaultPaymentMethod: (user: UserModel, paymentMethodId: string) => Promise<Stripe.Response<Stripe.Customer>>
+  storePaymentMethod: (user: UserModel, paymentMethodId: string) => Promise<PaymentMethodModel>
   deletePaymentMethod: (user: UserModel, paymentMethodId: string) => Promise<Stripe.Response<Stripe.PaymentMethod>>
   retrievePaymentMethod: (user: UserModel, paymentMethodId: number) => Promise<PaymentMethodModel | undefined>
   retrieveDefaultPaymentMethod: (user: UserModel) => Promise<PaymentMethodModel | undefined>
@@ -35,6 +36,8 @@ export const managePaymentMethod: ManagePaymentMethod = (() => {
       })
     }
 
+    storePaymentMethod(user, stripePaymentMethod.id)
+
     return stripePaymentMethod as Stripe.Response<Stripe.PaymentMethod>
   }
 
@@ -57,9 +60,39 @@ export const managePaymentMethod: ManagePaymentMethod = (() => {
       },
     })
 
+    storePaymentMethod(user, paymentMethodId)
+
     return updatedCustomer
   }
 
+  async function storePaymentMethod(user: UserModel, paymentMethodId: string): Promise<PaymentMethodModel> {
+    if (!user.hasStripeId()) {
+      throw new Error('Customer does not exist in Stripe')
+    }
+
+    const paymentMethod = await stripe.paymentMethod.retrieve(paymentMethodId)
+
+    const method = {
+      type: 'card',
+      last_four: Number(paymentMethod.card?.last4), 
+      brand: paymentMethod.card?.brand,
+      exp_year: paymentMethod.card?.exp_year,
+      exp_month: paymentMethod.card?.exp_month,
+      user_id: user.id,
+      provider_id: paymentMethod.id 
+    }
+
+    if (paymentMethod.customer !== user.stripe_id) {
+      await stripe.paymentMethod.attach(paymentMethod.id, {
+        customer: user.stripe_id || '',
+      })
+    }
+
+    const model = await PaymentMethod.create(method)
+
+    return model
+  }
+
   async function deletePaymentMethod(user: UserModel, paymentMethodId: string): Promise<Stripe.Response<Stripe.PaymentMethod>> {
     if (!user.hasStripeId()) {
       throw new Error('Customer does not exist in Stripe')
@@ -124,5 +157,5 @@ export const managePaymentMethod: ManagePaymentMethod = (() => {
     return paymentMethod
   }
 
-  return { addPaymentMethod, deletePaymentMethod, retrieveDefaultPaymentMethod, updatePaymentMethod, listPaymentMethods, setDefaultPaymentMethod, retrievePaymentMethod }
+  return { addPaymentMethod, deletePaymentMethod, retrieveDefaultPaymentMethod, updatePaymentMethod, listPaymentMethods, setDefaultPaymentMethod, storePaymentMethod, retrievePaymentMethod }
 })()