초기소스

src/main/webapp/WEB-INF/views/sopmal/ordr/PayCheckOutC.jsp

@@ -0,0 +1,113 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
+<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
+<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
+<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui"%>
+<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld"%>
+
+<%--
+    Class Name : PayCheckOutC.jsp
+    Description : 결제창
+    Modification Information
+
+    https://docs.tosspayments.com/guides/get-started
+    https://docs.tosspayments.com/guides/payment-widget/integration
+
+    수정일       수정자     수정내용
+    -------    -------- ---------------------------
+    2024-06-12 이경숙     최초 생성 생성
+--%>
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="utf-8" />
+    <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 clientKey = "test_ck_0RnYX2w5322yZWP2kbBR3NeyqApQ"; //drumj2 키
+
+      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 + "/sopmal/pay/PaySuccess",
+          failUrl: window.location.origin + "/sopmal/pay/PayFail",
+          customerEmail: "customer123@gmail.com",
+          customerName: "김토스",
+          customerMobilePhone: "01012341234",
+        });
+      });
+    </script>
+  </body>
+</html>