-
Notifications
You must be signed in to change notification settings - Fork 24
/
checkout.html
93 lines (88 loc) · 4.53 KB
/
checkout.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<link rel="icon" href="https://static.toss.im/icons/png/4x/icon-toss-logo.png" />
<link rel="stylesheet" type="text/css" href="./public/style.css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>토스페이먼츠 샘플 프로젝트</title>
<!-- 결제위젯 SDK 추가 -->
<script src="https://js.tosspayments.com/v1/payment-widget"></script>
</head>
<body>
<!-- 주문서 영역 -->
<div class="wrapper">
<div class="box_section" style="padding: 40px 30px 50px 30px; margin-top: 30px; margin-bottom: 50px">
<!-- 결제 UI -->
<div id="payment-method"></div>
<!-- 이용약관 UI -->
<div id="agreement"></div>
<!-- 쿠폰 체크박스 -->
<div class="checkable typography--p" style="padding-left: 25px">
<label for="coupon-box" class="checkable__label typography--regular"
><input id="coupon-box" class="checkable__input" type="checkbox" aria-checked="true" disabled /><span class="checkable__label-text">5,000원 쿠폰 적용</span></label
>
</div>
<!-- 결제하기 버튼 -->
<button class="button" id="payment-button" style="margin-top: 30px" disabled>결제하기</button>
</div>
</div>
<script>
const button = document.getElementById("payment-button");
const coupon = document.getElementById("coupon-box");
const generateRandomString = () => window.btoa(Math.random()).slice(0, 20);
var amount = 50000;
// ------ 결제위젯 초기화 ------
// TODO: clientKey는 개발자센터의 결제위젯 연동 키 > 클라이언트 키로 바꾸세요.
// TODO: 구매자의 고유 아이디를 불러와서 customerKey로 설정하세요. 이메일・전화번호와 같이 유추가 가능한 값은 안전하지 않습니다.
// @docs https://docs.tosspayments.com/reference/widget-sdk#sdk-설치-및-초기화
const clientKey = "test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm";
const customerKey = generateRandomString();
const paymentWidget = PaymentWidget(clientKey, customerKey); // 회원 결제
// const paymentWidget = PaymentWidget(clientKey, PaymentWidget.ANONYMOUS); // 비회원 결제
// ------ 결제 UI 렌더링 ------
// @docs https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션
paymentMethodWidget = paymentWidget.renderPaymentMethods(
"#payment-method",
{ value: amount },
// 렌더링하고 싶은 결제 UI의 variantKey
// 결제 수단 및 스타일이 다른 멀티 UI를 직접 만들고 싶다면 계약이 필요해요.
// @docs https://docs.tosspayments.com/guides/payment-widget/admin#멀티-결제-ui
{ variantKey: "DEFAULT" }
);
// ------ 이용약관 UI 렌더링 ------
// @docs https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자-옵션
paymentWidget.renderAgreement("#agreement", { variantKey: "AGREEMENT" });
// ------ 결제 UI 렌더링 완료 이벤트 ------
paymentMethodWidget.on("ready", function () {
button.disabled = false;
coupon.disabled = false;
});
// ------ 결제 금액 업데이트 ------
// @docs https://docs.tosspayments.com/reference/widget-sdk#updateamount결제-금액
coupon.addEventListener("change", function () {
if (coupon.checked) {
paymentMethodWidget.updateAmount(amount - 5000);
} else {
paymentMethodWidget.updateAmount(amount);
}
});
// ------ '결제하기' 버튼 누르면 결제창 띄우기 ------
// @docs https://docs.tosspayments.com/reference/widget-sdk#requestpayment결제-정보
button.addEventListener("click", function () {
// 결제를 요청하기 전에 orderId, amount를 서버에 저장하세요.
// 결제 과정에서 악의적으로 결제 금액이 바뀌는 것을 확인하는 용도입니다.
paymentWidget.requestPayment({
orderId: generateRandomString(),
orderName: "토스 티셔츠 외 2건",
successUrl: window.location.origin + "/success.php",
failUrl: window.location.origin + "/fail.php",
customerEmail: "customer123@gmail.com",
customerName: "김토스",
customerMobilePhone: "01012341234",
});
});
</script>
</body>
</html>