결제 연동 체험하기
토스페이먼츠의 간편한 결제 연동 과정을 한눈에 볼 수 있습니다. 각 단계별 설명과 함께 달라지는 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