[2편] 포트원(Portone)을 활용한 상세 결제 연동 실전 예시

1. 인트로: 개발 효율을 높이는 선택, 포트원

artcoaching.kr에 토스페이먼츠, 카카오페이, 나이스페이 등 여러 결제 수단을 한 번에 넣고 싶다면 포트원이 정답입니다. 복잡한 개별 PG사 연동 과정을 코드 몇 줄로 단축하는 구체적인 설정 방법을 소개합니다.

2. 본론: 포트원 연동 3단계 프로세스

섹션 1: 포트원 관리자 콘솔 설정

먼저 포트원 계정을 생성하고 내 식별 정보를 가져와야 합니다.

• 내 식별코드 확인: 관리자 페이지의 '결제 연동' 메뉴에서 강조된 글 가맹점 식별코드와 API Keys(REST API Key, Secret)를 복사해둡니다.

• 채널 설정: 테스트 모드에서 사용할 PG사(예: 토스페이먼츠 테스트)를 선택하고 채널을 활성화합니다.

섹션 2: 프론트엔드(클라이언트) 코드 삽입

AI 스튜디오로 만든 페이지의 결제 버튼에 스크립트를 연결합니다.

1. 강조된 글 포트원 라이브러리 스크립트 추가: <script src="https://cdn.iamport.kr/v1/iamport.js"></script>를 HTML 상단에 넣습니다.

2. 결제 요청 함수 작성:

   JavaScript

   function requestPay() {
     IMP.init("내_가맹점_식별코드");
     IMP.request_pay({
       pg: "kakaopay", 
       pay_method: "card",
       merchant_uid: "order_" + new Date().getTime(), // 고유 주문번호
       name: "아트코칭 프로그램",
       amount: 50000,
       buyer_email: "user@email.com"
     }, function (rsp) { // 결제 종료 시 실행되는 콜백
         if (rsp.success) {
            // 결제 성공 시 로직
         }
     });
   }
   

섹션 3: 백엔드 검증 및 웹훅(Webhook) 설정

보안을 위해 서버에서 결제 금액이 위변조되지 않았는지 최종 확인합니다.

1. 웹훅 URL 등록: 포트원 관리자 설정에서 호스팅어 서버 주소(예: artcoaching.kr/api/webhook)를 등록합니다.

2. 검증 로직: 서버는 포트원으로부터 받은 결제 번호(imp_uid)를 사용하여 포트원 API에 실제 결제된 금액을 조회하고, DB상의 주문 금액과 일치하는지 비교합니다.

3. 클로징: 자동화된 수익 창출 시스템 완성

포트원 설정이 마무리되면 이제 artcoaching.kr은 24시간 잠들지 않는 수익 창출 도구가 됩니다. 테스트 결제를 통해 실제 승인 과정을 확인한 뒤 실결제 모드로 전환하세요.

---

보정 및 다음 단계 안내

작성된 가이드 내용이 고객님의 현재 상황에 맞게 이해되셨나요? 특히 섹션 2의 코드 삽입 부분은 AI 스튜디오의 구조(직접 HTML 수정 가능 여부)에 따라 적용 방식이 달라질 수 있습니다.

• 승인 요청: 이 가이드를 바탕으로 블로그 포스팅을 진행할까요?

• 추가 도움: AI 스튜디오에서 위 스크립트를 삽입할 구체적인 위치를 찾는 데 도움이 필요하신가요? 혹은 이메일 마케팅(수집 폼) 연동 가이드도 이어서 작성해 드릴까요?