chore: wip

Author: glennmichael123

resources/functions/billing/payments.ts

@@ -23,6 +23,23 @@ export function useBillable() {
     return clientSecret
   }
 
+  async function subscribeToPlan(body: { type: string, plan: string }): Promise<string> {
+    const url = 'http://localhost:3008/stripe/create-subscription'
+
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+      },
+      body: JSON.stringify(body),
+    })
+  
+    const client: any = await response.json()
+  
+    return client
+  }
+
   async function loadStripeElement(clientSecret: string): Promise<boolean> {
     stripe.value = await loadStripe(publishableKey)
 
@@ -61,5 +78,5 @@ export function useBillable() {
     }
   }
 
-  return { fetchSetupIntent, loadStripeElement, handleAddPaymentMethod }
+  return { fetchSetupIntent, loadStripeElement, handleAddPaymentMethod, subscribeToPlan }
 }

resources/stores/payment.ts

@@ -83,10 +83,15 @@ export const usePaymentStore = defineStore('payment', {
   },
 
   getters: {
-    getPaymentMethods(state): any[] {
+    getPaymentMethods(state): StripePaymentMethod[] {
       return state.paymentMethods
     },
-    getDefaultPaymentMethod(state): any[] {
+    hasPaymentMethods(state): boolean {
+      return state.paymentMethods.length || !(!state.defaultPaymentMethod // Checks for null or undefined
+        || (typeof state.defaultPaymentMethod === 'object'
+          && Object.keys(state.defaultPaymentMethod).length === 0))
+    },
+    getDefaultPaymentMethod(state): StripePaymentMethod[] {
       return state.defaultPaymentMethod
     },
   },

resources/views/dashboard/components/billing/plans.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { useBillable } from '../../../../functions/billing/payments'
+
 const checkedPlanType = ref('monthly')
 const selectedPlan = ref('')
+const paymentStore = usePaymentStore()
 const planTypeKey = ref('stacks_hobby_early_monthly')
-let elements
-let stripe
+
+const { subscribeToPlan } = useBillable()
 
 const loading = ref(true)
 
@@ -37,40 +40,16 @@ const proPrice = computed(() => {
   return 749
 })
 
-// async function subscribePlan() {
-//   const body = {
-//     type: planTypeKey.value,
-//     plan: selectedPlan.value,
-//   }
-
-//   const url = 'http://localhost:3008/stripe/create-subscription'
-
-//   const response = await fetch(url, {
-//     method: 'POST',
-//     headers: {
-//       'Content-Type': 'application/json',
-//       'Accept': 'application/json',
-//     },
-//     body: JSON.stringify(body),
-//   })
-
-//   const client: any = await response.json()
 
-//   const clientSecret = client.client_secret
+async function subscribePlan() {
+  const subscriptionIntent = await subscribeToPlan({
+    type: planTypeKey.value,
+    plan: selectedPlan.value,
+  })
 
-//   stripe = await loadStripe(publishableKey)
-
-//   if (stripe) {
-//     elements = stripe.elements({clientSecret});
-//     const paymentElement = elements.create('payment');
-
-//     paymentElement.mount("#payment-element");
-//     const linkAuthenticationElement = elements.create("linkAuthentication");
-//     linkAuthenticationElement.mount("#link-authentication-element");
-//   }
-
-//   loading.value = false
-// }
+  // TODO: fire a toast or something
+  if (subscriptionIntent) alert('success!')
+}
 </script>
 
 <template>
@@ -162,7 +141,8 @@ const proPrice = computed(() => {
       <div class="flex justify-end pt-8">
         <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"
+          :disabled="!paymentStore.hasPaymentMethods"
+          class="rounded-md disabled:bg-gray-600 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="subscribePlan()"
         >
           Subscribe

storage/framework/core/payments/src/billable/subscription.ts

@@ -12,39 +12,46 @@ export interface SubscriptionManager {
 }
 
 export const manageSubscription: SubscriptionManager = (() => {
-  async function create(user: UserModel, type: string, lookupKey: string, params: Partial<Stripe.SubscriptionCreateParams>): Promise<Stripe.Response<Stripe.Subscription>> {
-    const price = await managePrice.retrieveByLookupKey(lookupKey)
-
-    if (!price)
-      throw new Error('Price does not exist in stripe')
-
-    const subscriptionItems = [{
-      price: price.id,
-      quantity: 1,
-    }]
-
+  async function create(
+    user: UserModel,
+    type: string,
+    lookupKey: string,
+    params: Partial<Stripe.SubscriptionCreateParams>
+  ): Promise<Stripe.Response<Stripe.Subscription>> {
+    const price = await managePrice.retrieveByLookupKey(lookupKey);
+  
+    if (!price) {
+      throw new Error('Price does not exist in Stripe');
+    }
+  
+    const subscriptionItems = [
+      {
+        price: price.id,
+        quantity: 1,
+      },
+    ];
+  
     const customerId = await manageCustomer.createOrGetStripeUser(user, {}).then((customer) => {
       if (!customer || !customer.id) {
-        throw new Error('Customer does not exist in Stripe')
+        throw new Error('Customer does not exist in Stripe');
       }
-
-      return customer.id
-    })
-
+      return customer.id;
+    });
+  
     const defaultParams: Stripe.SubscriptionCreateParams = {
       customer: customerId,
-      payment_behavior: 'default_incomplete',
+      payment_behavior: 'allow_incomplete', // or omit this line entirely
       expand: ['latest_invoice.payment_intent'],
       items: subscriptionItems,
-    }
-
-    const mergedParams = { ...defaultParams, ...params }
-
-    const subscription = await stripe.subscription.create(mergedParams)
-
-    await storeSubscription(user, type, subscription)
-
-    return subscription
+    };
+  
+    const mergedParams = { ...defaultParams, ...params };
+  
+    const subscription = await stripe.subscription.create(mergedParams);
+  
+    await storeSubscription(user, type, subscription);
+  
+    return subscription;
   }
 
   async function isActive(subscription: SubscriptionModel): Promise<boolean> {