เพิ่ม Proxy และ checkout

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    proxy: {
      '/api': { // เพิ่มตรงนี้เข้ามา
        target: 'http://127.0.0.1:5010/<project_name>/us-central1/api',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      }
    }
  },
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

http://127.0.0.1:5010/<project_name>/us-central1/api/placeorder

http://127.0.0.1:5173/api/placeorder

npm install axios

import axios from 'axios'

export const useUserCartStore = defineStore('user-cart', {
  state: () => ({
    items: [],
    checkout: {}
  }),
  getters: {
    summaryPrice (state) {
      return state.items.reduce((acc, item) => acc + (item.price * item.quantity), 0)
    },
    quantity (state) {
      return state.items.reduce((acc, item) => acc + item.quantity, 0)
    },
    user (state) {
      const accountStore = useAccountStore()
      return accountStore.user
    },
    cartRef (state) {
      return ref(realtimeDB, `carts/${this.user.uid}`)
    }
  },
  actions: {
    /* code เหมือนเดิม */
    async checkout (checkoutData) {
      try {
        let checkout = {
          ...checkoutData,
          products: this.items.map(product => ({
            productId: product.productId,
            quantity: product.quantity
          }))
        }

        const response = await axios.post('/api/placeorder', {
          source: 'test-source-id', // mock ไว้ก่อน เดี๋ยวเราจะมาปรับตอน omise
          checkout
        }, {
          headers: {
            'Authorization': this.user.accessToken // ดึง access token จาก Firebase Authentication
          }
        })
        return response.data

        // เอา localstorage ทั้งหมดออกไป
      } catch (error) {
        console.log('error', error.code)
        throw new Error('out of stock')
      }
    }
  }
})

<script setup>
import UserLayout from '@/layouts/UserLayout.vue'

const checkout = async () => {
  // submit checkout data
  try {
    // เพิ่ม validate
    if (
      !userCheckoutData.email ||
      !userCheckoutData.name ||
      !userCheckoutData.address
    ) {
      throw new Error('Please add email, name, address')
    }
    // เพิ่ม ส่งข้อมูล
    const result = await userCartStore.checkout(userCheckoutData)
    // เพิ่ม redirect ไปยังหน้าที่รับมา
    location.href = result.redirectUrl
  } catch (error) {
    alert(error.message)
  }
}
</script>