LEVEL 51 QUEST

결제 시스템 연동 - Stripe, 토스페이먼츠

결제 시스템 연동 - Stripe, 토스페이먼츠 — DevFoil 바이브코딩 Stage 11, Lv.51

결제 시스템 연동 개요

Stripe vs 토스페이먼츠

온라인 결제를 받으려면 결제 대행사(PG)를 연동해야 합니다. 해외 시장을 타겟으로 하면 Stripe, 한국 시장이면 토스페이먼츠가 적합합니다.

비교 항목	Stripe	토스페이먼츠
타겟 시장	글로벌 (195개국+)	한국 특화
결제 수단	카드, Apple Pay, Google Pay	카드, 계좌이체, 간편결제(카카오페이 등)
수수료	2.9% + 30센트	약 3.3% (카드사별 상이)
개발 편의성	매우 우수 (문서 최고 수준)	양호 (한국어 문서)
구독 결제	내장 지원 (Stripe Billing)	빌링키 방식으로 직접 구현

Stripe Checkout 구현

가장 간단한 결제 방법 - Stripe Checkout

Stripe Checkout은 Stripe이 제공하는 호스팅 결제 페이지입니다. 결제 UI를 직접 만들 필요 없이, Stripe의 안전한 결제 페이지로 리다이렉트합니다.

// 1. Stripe 패키지 설치
// npm install stripe

// 2. 환경변수 설정 (.env.local)
// STRIPE_SECRET_KEY=sk_test_...
// NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
// STRIPE_WEBHOOK_SECRET=whsec_...

// 3. 결제 세션 생성 API
// src/app/api/checkout/route.ts
import Stripe from 'stripe';
import { NextResponse } from 'next/server';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST() {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [{
      price_data: {
        currency: 'krw',
        product_data: {
          name: '프리미엄 플랜 (1개월)',
          description: '모든 기능 무제한 이용',
        },
        unit_amount: 29000, // 29,000원
      },
      quantity: 1,
    }],
    mode: 'payment',
    success_url: `${process.env.NEXT_PUBLIC_URL}/success`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/pricing`,
  });

  return NextResponse.json({ url: session.url });
}

프론트엔드에서 결제 버튼 연결

// src/components/CheckoutButton.tsx
'use client';

export function CheckoutButton() {
  const handleCheckout = async () => {
    const res = await fetch('/api/checkout', { method: 'POST' });
    const { url } = await res.json();
    window.location.href = url; // Stripe 결제 페이지로 이동
  };

  return (
    <button
      onClick={handleCheckout}
      className="bg-blue-600 text-white px-8 py-3 rounded-lg
                 font-bold hover:bg-blue-700 transition"
    >
      지금 구매하기 - 29,000원
    </button>
  );
}

🔒

여기까지는 미리보기입니다

결제 시스템 연동 - Stripe, 토스페이먼츠
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)