포트원 v2 PortOne v2

차세대 PortOne v2 결제 시스템 통합

PortOne v2 통합 PG 서비스입니다. Store ID와 Channel Key를 입력하면 실제 결제 모듈을 테스트해볼 수 있습니다.

PortOne v2 공식 사이트 →PortOne v2 개발자 문서 →PortOne v2 Next.js 샘플 코드 (GitHub) →

API 키 설정

실시간 데모

API 키를 입력하면 실시간 데모를 확인할 수 있습니다.

설정 가이드

PortOne 회원가입

PortOne 웹사이트에서 v2 계정을 생성하세요.

Store ID 및 Channel Key 확인

PortOne v2 관리자 페이지에서 Store ID와 Channel Key를 확인하세요.

결제 수단 설정

사용할 결제 수단(카드, 가상계좌 등)을 설정하세요.

웹사이트에 적용

아래 코드를 웹사이트에 추가하세요.

v1과 v2의 차이점

PortOne v1

• Merchant ID 사용
• jQuery 기반 스크립트
• 콜백 함수 방식

PortOne v2

• Store ID + Channel Key
• 모던 ES6+ SDK
• Promise/async-await

NPM 패키지 설치 (권장)

공식 PortOne v2 SDK를 사용하여 최적화된 결제 경험을 구현합니다.

NPM 패키지 설치

bash

npm install @portone/browser-sdk

React 컴포넌트 사용법

tsx

'use client';

import { useState } from 'react';
import { PortOne } from '@portone/browser-sdk';

export default function PaymentComponent() {
  const [payMethod, setPayMethod] = useState<'CARD' | 'VIRTUAL_ACCOUNT' | 'TRANSFER'>('CARD');
  const [isLoading, setIsLoading] = useState(false);

  const handlePayment = async () => {
    setIsLoading(true);

    try {
      const response = await PortOne.requestPayment({
        storeId: 'store-00000000-0000-0000-0000-000000000000',
        channelKey: 'channel-key-00000000-0000-0000-0000-000000000000',
        paymentId: 'payment-' + Date.now(),
        orderName: '테스트 상품',
        totalAmount: 1000,
        currency: 'KRW',
        payMethod: payMethod,
        customer: {
          fullName: '홍길동',
          phoneNumber: '010-1234-5678',
          email: 'test@example.com'
        }
      });

      if (response.code) {
        // 결제 실패
        console.error('결제 실패:', response);
        alert(`결제 실패: ${response.message}`);
      } else {
        // 결제 성공
        console.log('결제 성공:', response);
        alert(`결제 성공! Payment ID: ${response.paymentId}`);
        
        // 서버에 결제 검증 요청
        const verifyResponse = await fetch('/api/payments/verify', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ 
            paymentId: response.paymentId,
            txId: response.txId 
          })
        });
        
        if (verifyResponse.ok) {
          console.log('서버 검증 완료');
        }
      }
    } catch (error) {
      console.error('결제 처리 중 오류:', error);
      alert('결제 처리 중 오류가 발생했습니다.');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium mb-2">결제 수단</label>
        <select 
          value={payMethod} 
          onChange={(e) => setPayMethod(e.target.value as any)}
          className="w-full px-3 py-2 border rounded-md"
        >
          <option value="CARD">신용카드</option>
          <option value="VIRTUAL_ACCOUNT">가상계좌</option>
          <option value="TRANSFER">계좌이체</option>
        </select>
      </div>
      <button 
        onClick={handlePayment}
        disabled={isLoading}
        className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
      >
        {isLoading ? '결제 진행중...' : '결제하기'}
      </button>
    </div>
  );
}