결제 시스템 구축하기
단순한 UI 연동을 넘어, 실제 돈이 오가는 과정의 전체 구조와 안전한 백엔드 검증 로직을 포함한 실전 구축 가이드를 안내해 드립니다. 적당히 흐름만 이해하시고, 해당 결제 사이트에서 사업자 등록 및 매장 등록하신 후, 아래 코드 프롬프트에 붙여넣어서 구현하세요. 그리고 카드사 검수 2~3주 정도 생각하시면 편합니다.
💡 핵심 추천: 수수료와 정산 속도를 고려할 때 토스페이먼츠와 페이플(Payple) 조합을 가장 추천합니다. 특히 페이플은 업계 후발주자로서 매우 공격적인 D+1 정산 혜택을 제공하여 초기 사업자의 자금 회전에 큰 도움이 됩니다.
1. PG사 선택 가이드 (왜 이 세 곳인가?)
대한민국에는 많은 결제 대행사(PG)가 있지만, 바이브 머니에서는 아래 세 곳을 우선순위로 추천합니다.
토스페이먼츠
Toss Payments- 장점: 압도적으로 깔끔한 결제창 UX, 개발자 문서가 매우 잘 되어 있음
- 수수료: 일반 카드 결제 약 2.0% ~ 3.4%
- 추천: 사용자 경험(UX)이 브랜드 이미지에 중요한 경우
- ⚠️ 대기 안내: 현재 신청자 폭주로 인해 승인 심사 완료까지 최소 2달 이상 대기하셔야 합니다.
페이플
Payple- 장점: D+1 빠른 정산 (오늘 팔면 내일 입금), 낮은 수수료
- 정산: 후발주자 혜택으로 자금 회전속도가 매우 빠름 (강력 추천)
- 추천: 현금 흐름이 중요한 초기 스타트업 및 소상공인
나이스페이먼츠
Nice Payments- 장점: 업계 최고 수준의 중대형사 결제 안정성 및 탄탄한 신뢰도
- 정산: 영업일 기준 5~7일 소요 (전형적인 대형 PG사 구조)
- 추천: 안정적인 대량 거래 및 대형 서비스 스케일업에 적합
2. 전체 구조 먼저 이해하기
결제는 프론트엔드 혼자서 처리할 수 없습니다. 보안을 위해 다음과 같은 5단계 흐름을 거칩니다.
- 결제 호출: 사용자가 결제 버튼을 클릭하고 프론트에서 SDK를 띄웁니다.
- 1차 승인: 사용자가 카드 정보를 입력하면 PG사에서 결제를 일시 승인합니다.
- 데이터 전달: PG사가 결제 키, 주문 번호, 금액을 프론트 주소로 넘깁니다.
- 최종 검증 (서버): Netlify Function(백엔드)이 PG사 서버에 "이 결제 진짜 맞냐?"라고 한 번 더 확인합니다.
- 완료: 검증이 끝나면 DB를 업데이트하고 사용자에게 완료 화면을 보여줍니다.
📌 핵심: 중요한 비밀 키와 검증 로직은 전부 Netlify Function(백엔드)에서 처리해야 안전합니다.
3. 공통 세팅 (Next.js + Netlify)
결제 연동에 필요한 시크릿 키 등의 환경 변수는 Netlify 대시보드에서 직접 입력하거나, 바이브 코딩(MCP/CLI)에게 "결제 연동을 위해 환경 변수를 세팅해 줘"라고 요청하세요. AI가 보안 수준과 플랫폼 명세에 맞추어 폴더 구조 설계 및 연동 인프라 구성을 자동으로 완료해 줍니다.
4. 상세 구현 가이드
각 결제사는 연동을 위한 공식 API 문서(Github 등)나 AI 모델용 MCP 명세를 제공하고 있습니다. AI 에이전트를 통해 코딩을 진행할 때 프롬프트에 해당 공식 문서 주소나 라이브러리 정보를 직접 입력해 주시면 정확한 연동 코드를 바로 작성해 줍니다. 또한 결제 수신 상태를 안전하게 전달받기 위해 웹훅(Webhook)이 존재한다면 꼭 함께 테스트해달라고 명시하세요.
프론트엔드: SDK 로드 및 결제 요청
토스페이먼츠 SDK를 동적으로 로드하고 결제창을 띄우는 과정입니다. 결제창이 뜬 이후 성공 여부에 따라 미리 지정해 둔 Success URL 혹은 Fail URL로 리다이렉트되어 후속 데이터 처리가 이루어집니다.
백엔드: API / Function 승인 검증
사용자 브라우저에서 결제 완료 시, PG사 서버에 최종 승인 요청 API를 호출하여 결제 완료에 따른 후처리(결제 완료 이력 DB 기록, 구독 권한 발급 등)를 서버 사이드에서 검증하고 확정합니다.
5. 왕초보가 특히 주의해야 할 점
- 테스트 모드 vs 실운영 키 분리: 토스는 테스트 키와 라이브 키가 완전히 다르며, 페이플 또한 호출 도메인 자체가 다릅니다. 배포 전 반드시 확인하세요.
- 중요 키 보안: Secret Key는 절대로 프론트엔드 코드에 두지 마세요. 오직 Netlify Function 환경 변수에서만 관리해야 합니다.
- 금액 검증: 사용자가 조작할 수 있는 프론트엔드 금액 대신, 서버에서 DB에 저장된 주문 금액과 대조하여 다를 경우 승인을 거절해야 합니다.
- 결제 중복 처리 방지: 새로고침 등으로 결제가 두 번 처리되지 않도록, DB에 주문 상태 컬럼을 두고 '이미 결제됨'인 경우 승인 요청을 차단하세요.
6. 공식 개발자 문서 링크
더 구체적인 API 명세나 최신 기능은 아래 공식 문서를 참고하세요.