beadv5_5_ChamomileChicken_BE/deposit-payment.html at dev · Account-4-Review/beadv5_5_ChamomileChicken_BE · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://js.tosspayments.com/v1"></script>
</head>
<body>

<h2>예치금 충전 테스트</h2>

<button onclick="prepareDeposit()">충전 준비</button>
<button onclick="startPayment()">결제하기</button>

<p id="orderIdText"></p>

<script>
    const clientKey = "test_ck_yL0qZ4G1VOj211Mwom2v3oWb2MQY";
    const tossPayments = TossPayments(clientKey);

    let depositPaymentId = null;

    // 1. 예치금 충전 준비
    async function prepareDeposit() {

        const res = await fetch("http://localhost:9001/api/v1/payments/deposits/prepare", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                userId: "6393c05a-7eb7-4a59-b2a5-33c7e37c7a12", // 이 부분 수정
                amount: 10000,
                paymentMethod: "TOSS"
            })
        });

        const data = await res.json();

        depositPaymentId = data.depositPaymentsId;

        document.getElementById("orderIdText").innerText =
            "depositPaymentId: " + depositPaymentId;

        console.log("depositPayment 생성:", depositPaymentId);
    }

    // 2. 결제 시작
    async function startPayment() {

        if (!depositPaymentId) {
            alert("먼저 충전 준비를 하세요!");
            return;
        }

        tossPayments.requestPayment("카드", {
            amount: 10000,
            orderId: depositPaymentId,
            orderName: "예치금 충전",
            successUrl: "http://localhost:5500/deposit-success.html",
            failUrl: "http://localhost:5500/fail.html"
        });
    }
</script>

</body>
</html>