결제 연동 체험하기

토스페이먼츠의 간편한 결제 연동 과정을 한눈에 볼 수 있습니다. 각 단계별 설명과 함께 달라지는 UI와 코드를 확인해보세요.

1. 결제창 실행 준비하기

토스페이먼츠 결제창은 JavaScript SDK의 requestPayment() 메서드를 사용해서 띄울 수 있습니다.

메서드의 첫 번째 파라미터 값으로 결제수단인 카드를, 두 번째 파라미터에는 추가 주문 정보를 객체 형태로 전달합니다.

'결제하기' 버튼을 눌러서 결제창을 실행해보세요.

<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://js.tosspayments.com/v1/payment"></script>
  </head>
  <body>
    <section>
      <!-- ... -->
      <span>총 주문금액</span>
      <span>15,000 원</span>
      <button id="payment-button">15,000원 결제하기</button>
    </section>
    <script>
      var clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq'
      var tossPayments = TossPayments(clientKey)

      var button = document.getElementById('payment-button') // 결제하기 버튼

      button.addEventListener('click', function () {
        tossPayments.requestPayment('카드', {
          amount: 15000,
          orderId: '',
          orderName: '토스 티셔츠 외 2건',
          customerName: '박토스',
          successUrl: 'http://localhost:8080/success',
          failUrl: 'http://localhost:8080/fail',
        })
      })
    </script>
  </body>
</html>

HTML