결제 연동을 제품처럼 완성하는 주문서와 운영 화면
토스페이먼츠 결제위젯, 서버 승인, 결제 로그, 관리자 환불 기능을 하나의 구매 경험으로 묶었습니다. 제안용 목업이지만 실제 구현 흐름을 그대로 따라갈 수 있게 구성했습니다.
서버 승인
Confirm API
결제 로그
Prisma ORM
운영 액션
Cancel API
Featured checkout
결제위젯
위젯형
주문서 안에서 결제수단과 약관 UI를 직접 렌더링하고, 성공 리다이렉트 이후 서버가 최종 승인합니다.
Product catalog
제안 범위를 그대로 상품화했습니다
각 상품은 상세 페이지, 산출물, 예상 기간, 결제 위젯 주문서를 갖습니다. 제안서 설명과 시연 흐름을 같은 화면에서 해결할 수 있습니다.
Core integration
PG 연동
Next.js 서버 라우트와 Prisma 스키마를 기준으로 결제 요청, 승인 검증, 실패 처리, 영수증 저장까지 연결하는 기본 구축 패키지입니다.
490,000원
Checkout experience
결제위젯
토스페이먼츠 결제위젯을 주문서 안에 직접 렌더링하고, 결제수단 UI와 약관 UI를 실제 구매 흐름처럼 구성합니다.
790,000원
Admin operations
운영 어드민
NextAuth 관리자 Role을 기준으로 결제 내역, 상태 로그, 영수증 링크, 전체/부분 환불 액션을 운영 화면으로 제공합니다.
980,000원
const widgets = tossPayments.widgets({ customerKey })
await widgets.setAmount({ value, currency: "KRW" })
await widgets.renderPaymentMethods({ selector })
await widgets.renderAgreement({ selector })
// successUrl 이후 서버에서 금액 검증
await confirmPayment({ paymentKey, orderId, amount })Checkout widget
결제수단 UI를 직접 그리지 않습니다
토스페이먼츠 결제위젯은 결제수단과 약관 UI를 SDK가 렌더링합니다. 클라이언트는 인증만 시작하고, 서버는 저장된 주문 금액으로 최종 승인합니다.
- Payment Widget 기본 채택
- 서버 권위 금액 검증
- 관리자 환불 API 연결
Live checkout
이 화면에서 바로 결제위젯을 테스트하세요
테스트 키를 사용하면 실제 과금 없이 결제 인증 흐름을 확인할 수 있습니다. 성공 URL에서는 서버가 결제 금액을 다시 검증한 뒤 승인 API를 호출합니다.
Checkout summary
결제위젯 주문서 구축 패키지
790,000원