결제 버튼 API 호출

• product.mustache

					
                    .
                    .
                    .
                    
                    
                    <!-- 모달 버튼 -->
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-toggle="modal"
                            data-bs-target="#pay-modal"
                            data-bs-userName="{{userName}}"
                            data-bs-productName="{{name}}"
                            data-bs-price="{{price}}"
                            data-bs-userId="{{userId}}"
                            data-bs-productId="{{id}}"
                            >결제</button>

                </div>
            </div>
        </div>
    </div>

    <!-- 모달 -->
    <div class="modal fade" id="pay-modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">상품 결제</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 결제 폼-->
                    <form>
                        <!-- 주문자 이름 -->
                        <div class="mb-3">
                            <label class="form-label">주문자명</label>
                            <input class="form-control form-control-sm" id="userName" readonly>
                        </div>
                        <!-- 상품 이름 -->
                        <div class="mb-3">
                            <label class="form-label">상품 이름</label>
                            <input class="form-control form-control-sm" id="productName" readonly>
                        </div>
                        <!-- 상품 가격 -->
                        <div class="mb-3">
                            <label class="form-label">상품 가격</label>
                            <input class="form-control form-control-sm" id="productPrice" readonly>
                        </div>
                        <!-- 히든 인풋 -->
                        <input type="hidden" id="productId">
                        <input type="hidden" id="userId">
                        <!-- 전송 버튼 -->
                        <button type="button" class="btn btn-outline-primary btn-sm" id="pay-btn"
                                >결제</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{{/products}}
{{/userId}}


<script>
{
    //모달 버튼 변수화
    const payModal = document.querySelectorAll("#pay-modal");
    //모달 이벤트
    payModal.forEach(btn => {
        btn.addEventListener("show.bs.modal", (event) => {
            //트리거 버튼 선택
            const triggerBtn = event.relatedTarget;
            //데이터 가져옴
            const payInfo = {
                userName : triggerBtn.getAttribute("data-bs-userName"),
                productName : triggerBtn.getAttribute("data-bs-productName"),
                productPrice : triggerBtn.getAttribute("data-bs-price"),
                userId: triggerBtn.getAttribute("data-bs-userId"),
                productId: triggerBtn.getAttribute("data-bs-productId")
            }

            //데이터 반영
            document.querySelector("#userName").value = payInfo.userName;
            document.querySelector("#productName").value = payInfo.productName;
            document.querySelector("#productPrice").value = payInfo.productPrice;
            document.querySelector("#userId").value = payInfo.userId;
            document.querySelector("#productId").value = payInfo.productId;
            });
        });
}
{
    //결제 버튼 변수화
    const payBtn = document.querySelectorAll("#pay-btn");

    //결제 API 호출
    payBtn.forEach(btn => {
        btn.addEventListener("click", () => {
            const payInfo2 = {
                userId: document.querySelector("#userId").value,
                productId: document.querySelector("#productId").value,
                productPrice : document.querySelector("#productPrice").value
            }

            console.log(payInfo2);

            const url = `/order/product`
            fetch(url, {
                method: "POST",
                body: JSON.stringify(payInfo2),
                headers: {
                    "Content-Type": "application/json"
                }
            }).then(response => {
                const msg = (response.ok) ? "주문 완료" : "주문 실패";
                alert(msg);
            })
        });
    });
}

</script>

 

 

 

 

 

• git: https://github.com/Pearlmoon997/CoffeeShop

GitHub - Pearlmoon997/CoffeeShop: CoffeeShop