수파베이스 결제시스템 구현하기 (feat. TypeScript + Supabase)

수파베이스 토스페이먼츠 결제연동

토스페이먼츠 결제 시스템 구현하기 (feat. TypeScript + Supabase)

안녕하세요. 기술블로그 작성은 처음인데요. 오늘은 많은 개발자들에게 도움 될 프론트엔드 개발자도 풀스택 개발할 수 있는데 최적화된 수파베이스를 이용해 토스페이먼츠 결제 시스템을 TypeScript와 Supabase로 구현하는 방법을 공유합니다. 실제 프로덕션에서 사용 중인 코드를 바탕으로 설명드리니 현업에서 바로 적용하실 수 있습니다.

목차

• 토스페이먼츠 연동 준비하기
• 결제 프로세스 이해하기
• 데이터베이스 설계
• 결제 API 구현하기
• 실제 서비스 운영 팁

1. 토스페이먼츠 연동 준비하기

1.1 필요한 설정

토스페이먼츠 연동을 위해서는 다음 정보들이 필요합니다:

• 클라이언트 키 (테스트/실서버용)
• 시크릿 키 (테스트/실서버용)
• 웹훅 URL

// .env 파일 예시
TOSS_PAYMENTS_CLIENT_KEY=test_ck_xxxxx
TOSS_PAYMENTS_SECRET_KEY=test_sk_xxxxx

2. 데이터베이스 설계하기

2.1 주문 테이블

-- 주문 상태 enum
CREATE TYPE order_status_enum AS ENUM (
    'pending_payment',  -- 결제 대기
    'paid',            -- 결제 완료
    'cancelled'        -- 취소됨
);

-- 주문 테이블
CREATE TABLE orders (
    id BIGINT PRIMARY KEY,
    order_number TEXT UNIQUE NOT NULL,
    total_amount TEXT NOT NULL,
    status order_status_enum NOT NULL DEFAULT 'pending_payment',
    created_at TIMESTAMPTZ DEFAULT NOW()
);

 

 

2.2 결제 테이블

-- 결제 상태 enum
CREATE TYPE payment_status_enum AS ENUM (
    'ready',           -- 결제 준비
    'in_progress',     -- 진행중
    'done',           -- 완료
    'cancelled',      -- 취소됨
    'failed'          -- 실패
);

-- 결제 테이블
CREATE TABLE payments (
    id BIGINT PRIMARY KEY,
    order_id BIGINT REFERENCES orders(id),
    payment_key TEXT UNIQUE,
    status payment_status_enum NOT NULL DEFAULT 'ready',
    created_at TIMESTAMPTZ DEFAULT NOW()
);

3. 결제 API 구현하기

3.1 결제 생성 API

export async function createPayment(req: Request): Promise {
  const { orderId, amount } = await req.json();
  
  // 결제 생성
  const payment = await createTossPayment({
    amount,
    orderId,
    orderName: '상품 주문',
    successUrl: `${REDIRECT_URL}/success`,
    failUrl: `${REDIRECT_URL}/fail`
  });
  
  return new Response(JSON.stringify({
    paymentKey: payment.paymentKey,
    redirectUrl: payment.nextRedirectUrl
  }));
}

4. 결제 검증과 보안

4.1 웹훅 처리

export async function handleWebhook(req: Request): Promise {
  const payload = await req.json();
  
  // 결제 상태 업데이트
  await updatePaymentStatus({
    paymentKey: payload.paymentKey,
    status: payload.status,
    orderId: payload.orderId
  });
  
  return new Response('ok');
}

5. 실제 서비스 운영 팁

5.1 모니터링 포인트

• 결제 성공률 모니터링
• 결제 실패 원인 분석
• 웹훅 수신 상태 확인
• 트랜잭션 로그 관리

5.2 보안 체크리스트

• API 키 보안 관리
• 웹훅 시그니처 검증
• 결제 금액 검증
• 중복 결제 방지

마무리

지금까지 토스페이먼츠 결제 시스템의 기본적인 구현 방법에 대해 알아보았습니다. 다음 글에서는 결제 취소와 환불 프로세스 구현에 대해 다루도록 하겠습니다.

참고 자료

• 토스페이먼츠 공식 문서
• Supabase 공식 문서

토스페이먼츠 개발자센터

 

Supabase Docs

 

2024.12.05 - [분류 전체보기] - AWS Lambda 탈출기: Supabase Edge Functions로 비용 60% 줄인 후기

AWS Lambda 탈출기: Supabase Edge Functions로 비용 60% 줄인 후기