[프로젝트] TossPayments 간편결제 API 사용해보기

이번에 좋은 기회로 기존 프로젝트에 합류하게 되었는데, 

적응 후 가장 먼저 담당할 파트가 Toss Payments API 연동하는 부분이라 간단하게 연습해보기로 했다.

 

근데 다 하고보니까 프로젝트에서 쓰는건 일반 결제에서 카드 결제인듯.. 로직은 파악했으니 바뀌어도 금방 할듯?

 

https://docs.tosspayments.com/sdk/v2/js

토스페이먼츠 JavaScript SDK | 토스페이먼츠 개발자센터

 

 

1. 프로젝트 초기 세팅

npm create vite@latest toss-test --template react-ts 
cd toss-test 
npm install

 

npm install @tosspayments/tosspayments-sdk --save

 

2. 상태 관리

const [widgets, setWidgets] = useState<any>(null); 
const [widgetVisible, setWidgetVisible] = useState(false);

로직/동작 확인용이니까 일단 any 타입으로

 

3. 위젯 초기화

  const handleShowWidget = async () => {
    setWidgetVisible(true);

    // 1. Toss SDK 초기화
    const tossPayments = await loadTossPayments(
      "test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm"
    );

    // 2. 회원 결제 위젯 인스턴스 생성
    const widgets = await tossPayments.widgets({ customerKey: ANONYMOUS });

    // 3. 결제 금액 설정
    widgets.setAmount({
      currency: "KRW",
      value: 100,
    });

    // 4. 결제 UI 렌더링
    // 4-1. 위젯 내 결제 UI selector DOM에 렌더링
    await widgets.renderPaymentMethods({
      selector: "#payment-widget",
      variantKey: "DEFAULT",
    });

    // 5. 이용약관 UI 렌더링
    // 5-1. 위젯 내 결제 UI selector DOM에 렌더링
    await widgets.renderAgreement({
      selector: "#agreement",
      variantKey: "AGREEMENT",
    });

    setWidgets(widgets);
  };

 

4. 결제 요청

여긴 docs 참고하면 된다.

  const handlePayment = async () => {
    if (!widgets) return;

    // 위젯 내 결제하기 버튼 입력 시 결제 요청
    await widgets.requestPayment({
      orderId: `order-${Date.now()}`,
      orderName: "테스트 결제",
      customerName: "홍길동",
      customerEmail: "test@test.com",
      successUrl: "http://localhost:3000/success",
      failUrl: "http://localhost:3000/fail",
    });
  };

 

5. 결제 요청

{!widgetVisible && (
  <button onClick={handleShowWidget}>결제 시작하기</button>
)}

{widgetVisible && (
  <div id="payment-widget" />
  <div id="agreement" />
  <button onClick={handlePayment}>결제하기</button>

 

---

클라이언트 상에서 해당 api로 어떻게 구현해야 하는지는 일단 이해 완료

문서에 상세하게 나와있어서 해보긴 쉬웠다.

샘플 프로젝트랑 코드도 다운받을 수 있어서 실제로 구현해볼 때 참고해보면 좋을 듯