결제 채널 설정 (PG사 계약)에 따른 구체적인 절차|가나투데이

결제 채널 설정 (PG사 계약)에 따른 구체적인 절차|가나투데이

아트 온 톡(Art On Tok) VIP 멤버십의 실결제를 활성화하기 위해 필요한 행정적 절차와 이를 시스템에 적용하는 기술적 방법을 정리해 드립니다.

결제 채널 설정 (PG사 계약)에 따른 구체적인 절차|가나투데이

1단계: 행정 및 연동 설정 절차 (포트원 기준)

구독자가 실제로 결제하게 하려면 PG사(결제대행사)와의 계약이 필수입니다.

  1. 포트원(PortOne) 회원가입 및 관리자 콘솔 접속포트원 사이트에서 가입합니다.

  2. 바로가기::  포트원,  https://portone.io/korea/ko

  3. 결제 채널 설정 (PG사 계약):

    • '결제 연동' 메뉴에서 사용할 PG사(토스페이먼츠, 카카오페이, 나이스페이 등)를 선택합니다.

    • 실제 결제를 위해서는 사업자 등록증이 필요하며, PG사 심사(약 1~2주)가 완료되어야 실연동 아이디가 발급됩니다.

    • 테스트 단계에서는 '테스트 모드'를 활성화하여 가상 결제를 진행할 수 있습니다.

  4. 식별 코드 확인:

    • 포트원 관리자 콘솔 -> '내 식별코드·API 키' 메뉴에서 Store ID (Store-...)를 확인합니다. 이 코드가 코드 내에 삽입되어야 합니다.


2단계: 기술적 구현 및 업데이트

사용자가 결제 수단을 선택하고 '결제하기'를 눌렀을 때, 실제 포트원 SDK가 올바른 파라미터로 호출되도록 Club.tsx를 최적화했습니다.

(i) 업데이트 내용:

  • 상태 관리 최적화: 결제 진행 중, 성공, 실패 상태를 명확히 분리했습니다.

  • 실제 연동 준비: storeId를 쉽게 교체할 수 있도록 변수화했습니다.

  • UI 피드백 강화: 결제 중 로딩 상태와 성공 시 VIP 등급 즉시 반영 기능을 강화했습니다.

3단계: 최종 운영을 위한 조언

  1. 웹훅(Webhook) 설정: 실제 결제 시스템에서는 사용자가 결제 도중 창을 닫거나 네트워크 오류가 발생할 수 있습니다. 이를 완벽하게 처리하려면 서버(Node.js, Python 등)를 구축하고 포트원의 '웹훅' 기능을 사용하여 서버 대 서버로 결제 완료를 확인해야 합니다. 현재는 프론트엔드 코드만으로 처리되므로, 나중에 백엔드를 추가할 때 이 부분을 고려하시기 바랍니다.

  2. 테스트 결제: 심사 전까지는 포트원 관리자 페이지에서 '가상계좌'나 '테스트 PG'를 설정하여 실제 돈이 나가지 않는 테스트 결제를 마음껏 진행해 볼 수 있습니다.

  3. 현금영수증 및 계산서: VIP 멤버십은 유료 서비스이므로, 결제 완료 후 자동으로 현금영수증이 발행되도록 PG사 설정을 확인해야 합니다.

이제 이 코드를 적용하면 구독자가 결제 수단을 선택하고 실제로 결제창이 뜨는 단계까지 완벽하게 작동하게 됩니다!

처음으로