112 lines
5.0 KiB
Plaintext
112 lines
5.0 KiB
Plaintext
<%@ 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 : PaySucsR.jsp
|
|
Description : 토스 위젯결제성공 화면
|
|
Modification Information
|
|
|
|
수정일 수정자 수정내용
|
|
------- -------- ---------------------------
|
|
2024-06-12 이경숙 최초 생성
|
|
--%>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>토스 결제 샘플</title>
|
|
</head>
|
|
<body>
|
|
<div class="box_section" style="width: 600px">
|
|
<img width="100px" src="https://static.toss.im/illusts/check-blue-spot-ending-frame.png" />
|
|
<h2>결제를 완료했어요</h2>
|
|
|
|
<div class="p-grid typography--p" style="margin-top: 50px">
|
|
<div class="p-grid-col text--left"><b>결제금액</b></div>
|
|
<div class="p-grid-col text--right" id="amount"></div>
|
|
</div>
|
|
<div class="p-grid typography--p" style="margin-top: 10px">
|
|
<div class="p-grid-col text--left"><b>주문번호</b></div>
|
|
<div class="p-grid-col text--right" id="orderId"></div>
|
|
</div>
|
|
<div class="p-grid typography--p" style="margin-top: 10px">
|
|
<div class="p-grid-col text--left"><b>paymentKey</b></div>
|
|
<div class="p-grid-col text--right" id="paymentKey" style="white-space: initial; width: 250px"></div>
|
|
</div>
|
|
<div class="p-grid" style="margin-top: 30px">
|
|
<button class="button p-grid-col5" onclick="location.href='https://docs.tosspayments.com/guides/payment/integration';">연동 문서</button>
|
|
<button class="button p-grid-col5" onclick="location.href='https://discord.gg/A4fRFXQhRu';" style="background-color: #e8f3ff; color: #1b64da">실시간 문의</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box_section" style="width: 600px; text-align: left">
|
|
<b>Response Data :</b>
|
|
<div id="response" style="white-space: initial"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// 쿼리 파라미터 값이 결제 요청할 때 보낸 데이터와 동일한지 반드시 확인하세요.
|
|
// 클라이언트에서 결제 금액을 조작하는 행위를 방지할 수 있습니다.
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
// 서버로 결제 승인에 필요한 결제 정보를 보내세요.
|
|
async function confirm() {
|
|
var requestData = {
|
|
paymentKey: urlParams.get("paymentKey"),
|
|
orderId: urlParams.get("orderId"),
|
|
amount: urlParams.get("amount"),
|
|
};
|
|
|
|
const response = await fetch("/sopmal/pay/tossPayWidgetSuccss", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(requestData),
|
|
});
|
|
|
|
const json = await response.json();
|
|
|
|
if (!response.ok) {
|
|
// TODO: 결제 실패 비즈니스 로직을 구현하세요.
|
|
console.log(json);
|
|
window.location.href = "/sopmal/pay/PayFail?message=${json.message}&code=${json.code}"; //orderId string 주문번호입니다.
|
|
}
|
|
|
|
// TODO: 결제 성공 비즈니스 로직을 구현하세요.
|
|
console.log(json);
|
|
return json;
|
|
}
|
|
confirm().then(function (data) {
|
|
document.getElementById("response").innerHTML = `<pre>${JSON.stringify(data, null, 4)}</pre>`;
|
|
});
|
|
|
|
const paymentKeyElement = document.getElementById("paymentKey"); //결제를 식별하는 키 값입니다. 토스페이먼츠에서 발급합니다. 결제 승인, 결제 조회, 결제 취소 등 운영에 필요한 값입니다.
|
|
const orderIdElement = document.getElementById("orderId"); //주문번호입니다. 결제 요청에 보낸 값입니다.
|
|
const amountElement = document.getElementById("amount"); //결제 금액입니다
|
|
|
|
/*
|
|
결제 금액입니다. 결제 요청에 보낸 결제 금액과 같은지 반드시 확인해보세요. 클라이언트에서 결제 금액을 조작해 승인하는 행위를 방지할 수 있습니다.
|
|
만약 값이 다르다면 결제를 취소하고 구매자에게 알려주세요. 적립금이나 쿠폰이 적용된 금액이 맞는지도 확인해보세요.
|
|
*/
|
|
|
|
/*
|
|
paymentType string : 결제 유형입니다. NORMAL, BRANDPAY, KEYIN 중 하나입니다.
|
|
*/
|
|
|
|
orderIdElement.textContent = urlParams.get("orderId");
|
|
amountElement.textContent = urlParams.get("amount") + "원";
|
|
paymentKeyElement.textContent = urlParams.get("paymentKey");
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|