feat: checkout page

Author: imrim12

app/api/payment.ts

@@ -1,6 +1,6 @@
 export function useApiPayment() {
-  function checkout(type: 'payos' | 'vnpay', productIdentifier: string) {
-    if (type !== 'payos' && type !== 'vnpay')
+  function checkout(type: 'payos' | 'vnpay' | 'sepay', productIdentifier: string) {
+    if (type !== 'payos' && type !== 'vnpay' && type !== 'sepay')
       throw new Error('Invalid payment provider')
 
     return $api<{

app/components/Billing/BillingSubscriptionCard.vue

@@ -65,7 +65,7 @@ const billingCycleProgress = computed(() => {
 
       <div class="mt-2">
         <strong>
-          {{ new Intl.NumberFormat('en-US', { style: 'currency', currency: (subscription?.currency || 'usd').toUpperCase() }).format((subscription?.items.data[0]?.price.unit_amount || 0) / 100) }} {{ $t('Per Month') }}
+          {{ new Intl.NumberFormat('en-US', { style: 'currency', currency: (subscription?.currency || 'USD').toUpperCase() }).format((subscription?.items.data[0]?.price.unit_amount || 0) / 100) }} {{ $t('Per Month') }}
         </strong>
 
         <UBadge v-if="subscription?.metadata.hightlight" :label="$t('Popular')" />

app/pages/checkout.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { parseQuery } from 'ufo'
+
+definePageMeta({
+  middleware(to) {
+    if (!to.query.qr) {
+      return navigateTo({ name: 'pricing' })
+    }
+  },
+})
+
+const { data: page } = await useAsyncData('pricing', () => queryCollection('pricing').first())
+
+useSeoMeta({
+  title: page.value?.title,
+  ogTitle: page.value?.title,
+  description: page.value?.description,
+  ogDescription: page.value?.description,
+})
+
+defineOgImageComponent('Saas')
+
+const route = useRoute()
+
+const checkoutQr = computed(() => String(route.query.qr))
+const checkoutInfo = computed(() => {
+  const query = parseQuery(checkoutQr.value)
+
+  return query
+})
+
+function handleCheckStatus() {
+  //
+}
+</script>
+
+<template>
+  <div v-if="page">
+    <UPageSection
+      :title="page.topup.title"
+      :description="page.topup.description"
+    >
+      <div class="grid md:grid-cols-2 gap-4 items-start">
+        <div class="flex justify-center">
+          <img
+            :src="String($route.query.qr)"
+            alt="QR Code for payment"
+            class="rounded-lg shadow-xl max-w-sm w-full"
+          >
+        </div>
+
+        <UCard class="w-full">
+          <template #header>
+            <h3 class="text-xl font-semibold leading-6 text-gray-900 dark:text-white">
+              {{ $t('Payment Summary') }}
+            </h3>
+          </template>
+
+          <div class="space-y-4">
+            <div class="flex justify-between items-center">
+              <span class="text-lg font-medium text-gray-500 dark:text-gray-400">{{ $t('Bank Name') }}</span>
+              <span class="text-lg font-semibold text-gray-900 dark:text-white">{{ checkoutInfo.bank }}</span>
+            </div>
+            <UDivider />
+            <div class="flex justify-between items-center">
+              <span class="text-lg font-medium text-gray-500 dark:text-gray-400">{{ $t('Amount') }}</span>
+              <span class="text-xl font-bold text-primary-500 dark:text-primary-400">{{ checkoutInfo.amount }}</span>
+            </div>
+            <UDivider />
+            <div class="flex justify-between items-start">
+              <span class="text-lg font-medium text-gray-500 dark:text-gray-400">{{ $t('Description') }}</span>
+              <span class="text-lg text-gray-700 dark:text-gray-300 text-right">{{ checkoutInfo.des }}</span>
+            </div>
+          </div>
+
+          <template #footer>
+            <p class="text-lg text-gray-500 dark:text-gray-400">
+              {{ $t('Please verify the details before proceeding with the payment.') }}
+            </p>
+            <div>
+              <UButton
+                class="w-full font-semibold mt-4" size="xl"
+                @click="handleCheckStatus"
+              >
+                {{ $t('I have transfered the money! (Click here)') }}
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </div>
+    </UPageSection>
+
+    <UPageSection
+      :title="page.faq.title"
+      :description="page.faq.description"
+    >
+      <UPageAccordion
+        multiple
+        class="max-w-4xl mx-auto"
+        :items="page.faq.items"
+      />
+    </UPageSection>
+  </div>
+</template>

app/pages/pricing.vue

@@ -73,9 +73,17 @@ async function handleCheckout() {
     await navigateTo({ path: '/sign-in' }, { external: true })
   }
 
-  const { data: checkoutData } = await paymentApi.checkout('payos', productIdentifier)
+  // const { data: checkoutData } = await paymentApi.checkout('payos', productIdentifier)
 
-  window.open(checkoutData.paymentUrl, '_blank')
+  // window.open(checkoutData.paymentUrl, '_blank')
+  const { data: checkoutData } = await paymentApi.checkout('sepay', productIdentifier)
+
+  navigateTo({
+    name: 'checkout',
+    query: {
+      qr: checkoutData.paymentUrl,
+    },
+  })
 }
 
 tryOnBeforeMount(async () => {

app/utils/currency.ts

@@ -1,3 +1,7 @@
 export function formatPrice(price: number, currency: string) {
+  if (currency !== 'USD' && currency !== 'VND') {
+    return price
+  }
+
   return new Intl.NumberFormat('vi-VN', { style: 'currency', currency }).format(price)
 }

server/utils/payment/vn/sepay.ts

@@ -2,7 +2,7 @@ import type { paymentProviderTransactionTable } from '@base/server/db/schemas'
 import { withQuery } from 'ufo'
 
 interface SePayCheckoutProps {
-  orderCode: string
+  orderCode: number
   amount: number
   paymentProviderTransaction: typeof paymentProviderTransactionTable.$inferSelect
 }