Legacy Redirect 기반 Webpay Plus의 현대적 Stack 통합 설계

Integrating Webpay Plus into a modern stack

Felipe González Alarcón2026년 6월 4일10분intermediate

AI 요약

Context

칠레 전자상거래 시장의 필수 결제 수단인 Webpay Plus의 Legacy 인터페이스 통합 필요성 제기. JSON API와 Webhook 기반의 현대적 방식이 아닌 Full-page Redirect 및 Form POST 방식의 고전적 통합 모델로 인한 설계 제약 존재.

Technical Solution

PCI Compliance 범위 최소화를 위해 카드 정보 처리를 전면 배제하고 Transbank 도메인 기반의 외부 결제 페이지 활용
Token Leakage 방지를 위해 token_ws를 포함한 Hidden HTML Form을 통한 프로그램 방식의 자동 Submit 구조 설계
GET과 POST 요청을 동시 수용하는 단일 Commit Endpoint 구축으로 Timeout, Cancel, Success의 세 가지 예외 케이스 통합 처리
NestJS Backend와 Next.js Frontend 간의 Server Action 경계 설정을 통한 Backend URL 은닉 및 보안성 강화
Transaction Token 기반의 3-Step Handshake(Create, Redirect, Commit) 프로세스 구현을 통한 상태 동기화
Transbank SDK를 활용한 트랜잭션 생성 및 응답 코드 0 기반의 최종 승인 검증 로직 적용

실천 포인트

1. 외부 결제 연동 시 GET/POST 혼용 가능성을 고려한 엔드포인트 유연성 확보 여부 확인

2. 보안 민감 정보(Token 등) 전달 시 Query Parameter 대신 Hidden Form POST 사용 검토

3. 단순 성공/실패 외에 Timeout 및 User Abort와 같은 엣지 케이스의 상태 정의 및 처리 로직 설계

4. Frontend에서 Backend API 직접 호출 대신 Server Action/Proxy 계층을 통한 내부 인프라 주소 은닉 적용

태그

#NestJS #Webpay Plus #Next.js #PCI Compliance #Payment Gateway

원문 읽기