결제 연동 체험하기

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

1. 결제창 실행 준비하기

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

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

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

<html>
<head>
<script src="https://js.tosspayments.com/v1"></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

결제수단

총 주문금액15,000
  • 더 궁금한 내용이 있나요?
  • 코드 샘플을 참고하세요
  • 기술지원이 필요한가요?
    디스코드 채팅|이메일 보내기