ทำระบบเว็บขายของ ซื้อสินค้า ร้านค้าออนไลน์ ด้วย Next.js + Supabase + Stripe

1
import { createClient } from '@supabase/supabase-js'
2
import 'dotenv/config'
3

4
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
5
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
6

7
if (!supabaseUrl || !supabaseAnonKey) {
8
  throw new Error('Supabase URL and Anon Key are required.')
9
}
10

11
export const supabase = createClient(supabaseUrl, supabaseAnonKey)

1
import Stripe from 'stripe'
2
import { supabase } from '@/lib/supabase-client'
3
import 'dotenv/config'
4

5
const stripeSecretKey = process.env.STRIPE_SECRET_KEY
6

7
if (!stripeSecretKey) {
8
  console.error(
9
    'Stripe Secret Key is not set. Please set STRIPE_SECRET_KEY in your environment variables.'
10
  )
11
  process.exit(1)
12
}
13

14
const stripe = new Stripe(stripeSecretKey, {
15
  apiVersion: '2025-04-30.basil',
16
  typescript: true
17
})
18

19
async function main() {
20
  const res = await fetch('https://api.escuelajs.co/api/v1/products?offset=0&limit=10')
21

22
  if (!res.ok) {
23
    console.error('Error fetching products:', res.statusText)
24
    return
25
  }
26
  const products = await res.json()
27

28
  for (const product of products) {
29
    console.log(`Product ID: ${product.id} - ${product.title}`)
30

31
    try {
32
      // 1. create price & product
33
      const stripeProduct = await stripe.products.create({
34
        name: product.title,
35
        description: product.description,
36
        images: product.images
37
      })
38

39
      // 2. create price with product id
40
      const stripePrice = await stripe.prices.create({
41
        unit_amount: product.price * 1000,
42
        currency: 'thb',
43
        product: stripeProduct.id
44
      })
45

46
      if (!stripePrice || !stripeProduct) {
47
        console.error('Error creating Stripe product or price')
48
        continue
49
      }
50

51
      // 3. insert to supabase database.
52
      // note: ถ้าเรากำหนด RLS (Row Level Security) ไว้ใน Supabase
53
      // เราต้องให้สิทธิ์การเข้าถึงให้กับ service_role
54
      // หรือใช้ supabase.auth.admin เพื่อให้สิทธิ์การเข้าถึง
55
      // https://supabase.com/docs/guides/auth/row-level-security
56
      const { data, error: dbError } = await supabase
57
        .from('products')
58
        .insert([
59
          {
60
            name: product.title,
61
            description: product.description,
62
            price: product.price * 1000,
63
            image_url: product.images[0],
64
            stripe_product_id: stripeProduct.id,
65
            stripe_price_id: stripePrice.id
66
          }
67
        ])
68
        .select()
69

70
      if (dbError) {
71
        console.error('Error inserting product into Supabase:', dbError)
72
        continue
73
      }
74

75
      console.log(`product ${product.id} initial success`, data)
76
    } catch (createError) {
77
      console.error(createError)
78
      process.exit(1)
79
    }
80
  }
81
}
82

83
main().catch(console.error)

1
import { supabase } from '@/lib/supabase-client'
2

3
import ProductCard from '@/components/ProductCard'
4
import { Product } from '@/types'
5

6
const HomePage: React.FC = async () => {
7
  return (
8
    <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
9
      <div className="mb-12 text-center">
10
        <h2 className="mb-4 text-3xl font-bold text-gray-900 md:text-4xl">สินค้าขายดี</h2>
11
      </div>
12

13
      <div className="grid grid-cols-1 gap-8 sm:grid-cols-3">
14
        {products.map((product: Product) => (
15
          <ProductCard key={product.id} product={product} />
16
        ))}
17
      </div>
18
    </section>
19
  )
20
}
21

22
export default HomePage

1
'use client'
2

3
import Image from 'next/image'
4
import { ShoppingCart } from 'lucide-react'
5

6
import { Product, ProductCardProps } from '@/types'
7

8
const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
9
  return (
10
    <div className="overflow-hidden rounded-lg bg-white shadow-md transition-shadow duration-300 hover:shadow-lg">
11
      <div className="aspect-square overflow-hidden">
12
        <Image
13
          src={product.image_url}
14
          alt={product.name}
15
          width={300}
16
          height={300}
17
          className="h-full w-full object-cover transition-transform duration-300 hover:scale-105"
18
        />
19
      </div>
20

21
      <div className="p-4">
22
        <h3 className="mb-2 line-clamp-2 text-lg font-semibold text-gray-800">{product.name}</h3>
23

24
        <div className="flex items-center justify-between">
25
          <span className="text-2xl font-bold text-gray-900">${product.price}</span>
26

27
          <button className="flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors duration-200 hover:bg-blue-700">
28
            <ShoppingCart className="h-4 w-4" />
29
            Buy Now
30
          </button>
31
        </div>
32
      </div>
33
    </div>
34
  )
35
}
36

37
export default ProductCard

1
export interface Product {
2
  id: string
3
  name: string
4
  description: string
5
  price: number
6
  image_url: string
7
  stripe_price_id: string
8
}
9

10
export interface ProductCardProps {
11
  product: Product
12
}

1
// import type { NextConfig } from 'next'
2

3
const nextConfig: NextConfig = {
4
  images: {
5
    domains: ['m.media-amazon.com', 'jcpenney.scene7.com', 'i.imgur.com']
6
  }
7
}
8

9
export default nextConfig

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;

1
import { NextResponse } from 'next/server'
2
import Stripe from 'stripe'
3

4
const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY
5

6
if (!STRIPE_SECRET_KEY) {
7
  throw new Error('Stripe secret key must be provided')
8
}
9

10
const stripe = new Stripe(STRIPE_SECRET_KEY, {
11
  apiVersion: '2025-04-30.basil',
12
  typescript: true
13
})
14

15
export async function POST(request: Request) {
16
  try {
17
    const { stripePriceId, price, productId, quantity = 1 } = await request.json()
18

19
    if (!stripePriceId || !price || !productId) {
20
      return NextResponse.json(
21
        { error: 'stripePriceId or price or productId is required' },
22
        { status: 400 }
23
      )
24
    }
25

26
    const origin = request.headers.get('origin') || 'http://localhost:3000'
27

28
    const session = await stripe.checkout.sessions.create({
29
      line_items: [
30
        {
31
          price: stripePriceId,
32
          quantity
33
        }
34
      ],
35
      metadata: {
36
        productId,
37
        price: price.toString(),
38
        quantity: quantity.toString()
39
      },
40
      mode: 'payment',
41
      success_url: `${origin}/payment-success?session_id={CHECKOUT_SESSION_ID}`,
42
      cancel_url: `${origin}/?canceled=true`
43
    })
44

45
    return NextResponse.json({ url: session.url })
46
  } catch (err) {
47
    const error = err as Error
48
    console.error('Error creating Stripe session:', error.message)
49
    return NextResponse.json({ error: error.message }, { status: 500 })
50
  }
51
}

1
import { redirect } from 'next/navigation'
2

3
const ProductCard: React.FC<ProductCardProps> = ({ product }) => {
4
  const handleBuyProduct = async () => {
5
    const { id: productId, price, stripe_price_id: stripePriceId } = product
6

7
    const response = await fetch('/api/checkout-session', {
8
      method: 'POST',
9
      headers: {
10
        'Content-Type': 'application/json'
11
      },
12
      body: JSON.stringify({ stripePriceId, productId, price })
13
    })
14

15
    if (!response.ok) {
16
      const errorData = await response.json()
17
      console.error('Failed to create checkout session:', errorData)
18
      alert(`เกิดข้อผิดพลาดในการเริ่มการชำระเงิน: ${errorData.error || response.statusText}`)
19
      return
20
    }
21

22
    const { url, error } = await response.json()
23

24
    if (error) {
25
      console.error('Stripe redirection error:', error)
26
      alert(`เกิดข้อผิดพลาดในการเปิดหน้าชำระเงิน: ${error.message}`)
27
    }
28

29
    redirect(url)
30
  }
31

32
  return (
33
    // ...
34
  )
35
}

1
import type { NextPage } from 'next'
2
import Head from 'next/head'
3

4
const PaymentSuccess: NextPage = () => {
5
  return (
6
    <div className="container mx-auto p-4 text-center">
7
      <Head>
8
        <title>Payment Successful</title>
9
      </Head>
10
      <h1 className="mb-4 text-2xl font-bold">ชำระเงินเรียบร้อย</h1>
11
    </div>
12
  )
13
}
14

15
export default PaymentSuccess

1
import { NextResponse } from 'next/server'
2
import Stripe from 'stripe'
3
import { supabase } from '@/lib/supabase-client'
4

5
const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY || ''
6
const STRIPE_WEBHOOK_SECRET = process.env.STRIPE_WEBHOOK_SECRET || ''
7

8
if (!STRIPE_SECRET_KEY || !STRIPE_WEBHOOK_SECRET) {
9
  throw new Error('Stripe secret key must be provided')
10
}
11

12
// Initialize Stripe
13
const stripe = new Stripe(STRIPE_SECRET_KEY, {
14
  apiVersion: '2025-04-30.basil',
15
  typescript: true
16
})
17

18
export async function POST(request: Request) {
19
  try {
20
    const rawBody = await request.text() // Get raw body
21
    const signature = request.headers.get('stripe-signature') as string
22

23
    let event: Stripe.Event
24

25
    try {
26
      event = stripe.webhooks.constructEvent(rawBody, signature, STRIPE_WEBHOOK_SECRET)
27
    } catch (err) {
28
      const error = err as Error
29
      console.error(`Webhook signature verification failed: ${error.message}`)
30
      return NextResponse.json({ error: `Webhook Error: ${error.message}` }, { status: 400 })
31
    }
32

33
    // Handle the event
34
    switch (event.type) {
35
      case 'checkout.session.completed':
36
        const session = event.data.object as Stripe.Checkout.Session
37
        console.log(`Payment successful for session ID: ${session.id}`)
38

39
        const totalAmount = (session.amount_total ?? 0) / 100
40

41
        try {
42
          const productId = session.metadata?.productId
43
          const quantity = session.metadata?.quantity
44

45
          // 1. Find product in Supabase
46
          const { data: productData, error: productError } = await supabase
47
            .from('products')
48
            .select('id, price')
49
            .eq('id', productId)
50
            .maybeSingle()
51

52
          if (productError || !productData) {
53
            console.error('Supabase error ', productError)
54

55
            return NextResponse.json({ error: 'Webhook Error: Product not found' }, { status: 404 })
56
          }
57

58
          // 2. Create Order record in Supabase
59
          const { error: orderError } = await supabase.from('orders').insert([
60
            {
61
              product_id: productData.id,
62
              quantity: quantity || 1,
63
              total_amount: totalAmount,
64
              status: 'paid',
65
              stripe_checkout_session_id: session.id
66
            }
67
          ])
68

69
          if (orderError) {
70
            console.error('Error inserting order into Supabase:', orderError)
71
            return NextResponse.json(
72
              { error: `Webhook Error: ${orderError.message}` },
73
              { status: 500 }
74
            )
75
          }
76

77
          console.log(`Order created successfully for session: ${session.id}`)
78
        } catch (dbError) {
79
          const dErr = dbError as Error
80
          console.error('Database operation error:', dErr.message)
81
          return NextResponse.json({ error: `Webhook Error: ${dErr.message}` }, { status: 500 })
82
        }
83
        break
84

85
      default:
86
        console.warn(`Unhandled event type ${event.type}`)
87
    }
88

89
    return NextResponse.json({ received: true })
90
  } catch (error) {
91
    console.error('Error processing webhook:', error)
92
    return NextResponse.json({ error: 'Internal Server Error processing webhook' }, { status: 500 })
93
  }
94
}

1
const Navbar = () => {
2
  return (
3
    <header className="sticky top-0 z-10 bg-white shadow-sm">
4
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
5
        <div className="flex h-16 items-center justify-between">
6
          <div className="flex items-center">
7
            <h1 className="text-2xl font-bold text-gray-900">Fake Store</h1>
8
          </div>
9

10
          <nav className="hidden space-x-8 md:flex">
11
            <a href="#" className="font-medium text-gray-600 hover:text-gray-900">
12
              Products
13
            </a>
14

15
            <a
16
              href="https://www.devahoy.com"
17
              className="font-medium text-gray-600 hover:text-gray-900"
18
              target="_blank"
19
            >
20
              Contact
21
            </a>
22
          </nav>
23
        </div>
24
      </div>
25
    </header>
26
  )
27
}
28

29
export default Navbar

1
const Hero = () => {
2
  return (
3
    <section className="bg-gradient-to-r from-blue-600 to-purple-700 text-white">
4
      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
5
        <div className="text-center">
6
          <h2 className="mb-4 text-4xl font-bold md:text-6xl">แต่งเติมเรื่องราวในสไตล์คุณ</h2>
7
          <p className="mb-8 text-xl text-blue-100 md:text-2xl">
8
            ร้านค้าตัวอย่างของคุณ สำหรับเลือกชมเสื้อผ้าและเครื่องประดับหลากหลายสไตล์
9
          </p>
10
          <button className="cursor-pointer rounded-lg bg-white px-8 py-3 font-semibold text-blue-600 transition-colors duration-200 hover:bg-gray-100">
11
            ช็อปเลย
12
          </button>
13
        </div>
14
      </div>
15
    </section>
16
  )
17
}
18

19
export default Hero

1
const Footer = () => {
2
  return (
3
    <footer className="bg-gray-900 text-white">
4
      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
5
        <div className="text-center text-gray-300">
6
          <p>
7
            &copy; 2025 FakeStore. อ่านบทความเต็มที่ :{' '}
8
            <a
9
              href="https://github.com/phonbopit/eshop"
10
              className="underline underline-offset-2"
11
              target="_blank"
12
            >
13
              ทำระบบเว็บขายของ E-commerce
14
            </a>
15
          </p>
16
        </div>
17
      </div>
18
    </footer>
19
  )
20
}
21

22
export default Footer

1
{
2
  new Intl.NumberFormat('th-TH', {
3
    style: 'currency',
4
    currency: 'THB'
5
  }).format(product.price / 100)
6
}

1
import type { Metadata } from 'next'
2
import { IBM_Plex_Sans_Thai } from 'next/font/google'
3
import './globals.css'
4
import Navbar from '@/components/Navbar'
5
import Footer from '@/components/Footer'
6
import Hero from '@/components/Hero'
7

8
const ibmPlex = IBM_Plex_Sans_Thai({
9
  subsets: ['thai'],
10
  weight: ['300', '500', '700'],
11
  display: 'swap'
12
})
13

14
export const metadata: Metadata = {
15
  title: 'Create Next App',
16
  description: 'Generated by create next app'
17
}
18

19
export default function RootLayout({
20
  children
21
}: Readonly<{
22
  children: React.ReactNode
23
}>) {
24
  return (
25
    <html lang="en">
26
      <body className={`${ibmPlex.className} antialiased`}>
27
        <div className="min-h-screen bg-gray-100">
28
          <Navbar />
29
          <Hero />
30
          {children}
31
          <Footer />
32
        </div>
33
      </body>
34
    </html>
35
  )
36
}