<%@ 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="form" uri="http://www.springframework.org/tags/form" %>


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <c:set var="ctx" value="${pageContext.request.contextPath}"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="${ctx }/resource/css/style.css"/>

    <title>네이버페이 간편결제 테스트</title>

    <style>

        .btnNaverPay {
            width: 48px;
            height: 14px;
            padding: 3px 10px 3px 10px;
            border-radius: 2px;
            background-color: rgb(3, 199, 90);
            top: 50%;
            left: 50%;
            position: absolute;
            transform: scale(7.0);
        }

        .btnNaverPay a {
            display: block;
            text-indent: -9999px;
            background-image: url(${ctx}/resource/images/nvep/sp_detail.png?20220428);
            background-size: 232px 178px;
            background-position: -135px 141px;
        }


    </style>
</head>
<body>


<%--<input type="button" id="btnNaverPay" value="네이버페이 결제 버튼">--%>
<div id="btnNaverPay" class="btnNaverPay">
    <a href="#" class="_2-uvQuRWK5">
        <span class="blind">네이버페이 결제</span>
    </a>
</div>


<script src="https://nsp.pay.naver.com/sdk/js/naverpay.min.js"></script>
<script>
    //계약정보
    const mode = "development"; // development(개발) or production(운영)
    const openType = "page"; // page(결제페이지 이동) or popup(팝업페이지)
    const clientId = "eN8fbl2qw0tox78Z3D5C";
    const billUid = "intgrnNoti-1668492558-bu-ZPPjT4.ebJehfmlFOVO";
    const url = "http://211.119.124.118:18090/bill/nv/ep/apply";
    const returnUrl = url + "?billUid=" + billUid;
    //결제창정보
    const productName = "테스트상품";
    const merchantUserKey = "gamengUserKey-00001"; //가맹점 주문내역 확인 가능한 가맹점 결제번호 또는 주문번호를 전달해야 합니다.
    const merchantPayKey = "gamengUserKey-00001"; //가맹점의 사용자 키(개인 아이디와 같은 개인정보 데이터는 제외하여 전달해야 합니다)
    const totalPayAmount = "100";
    const taxScopeAmount = "100";
    const taxExScopeAmount = "0";

    let oPay = Naver.Pay.create({
        "mode": mode, // development or production
        "clientId": clientId, // clientId
        "openType": openType,
        <%--"onAuthorize": function (oData) {--%>
        <%--    console.log(oData);--%>
        <%--    if (oData.resultCode === "Success") {--%>
        <%--        // 네이버페이 결제 승인 요청 처리--%>
        <%--        let param = {};--%>
        <%--        param['billUid'] = '${billUid}';--%>
        <%--        param['paymentId'] = oData.paymentId;--%>
        <%--        param['resultCode'] = oData.resultCode;--%>
        <%--        param['resultMessage'] = oData.resultMessage;--%>
        <%--        param['reserveId '] = oData.reserveId ;--%>
        <%--        $.post('${ctx }/bill/nv/ep/result', {});--%>
        <%--    } else {--%>
        <%--        alert("실패했습니둥둥둥");--%>
        <%--        // 필요 시 oData.resultCode 와 oData.resultMessage 를 활용하여 적절한 사용자 안내 처리 구현--%>
        <%--    }--%>
        <%--}--%>
    });
    //직접 만드신 네이버페이 결제버튼에 click Event를 할당하세요
    let elNaverPayBtn = document.getElementById("btnNaverPay");
    elNaverPayBtn.addEventListener("click", payPage);

    function payPage() {
        oPay.open({
            "merchantUserKey": merchantUserKey,
            "merchantPayKey": merchantPayKey,
            "productName": productName,
            "totalPayAmount": totalPayAmount,
            "taxScopeAmount": taxScopeAmount,
            "taxExScopeAmount": taxExScopeAmount,
            "returnUrl": returnUrl
        });
    }

    // function payPage() {
    //     oPay.open({
    //         "merchantUserKey": merchantUserKey,
    //         "merchantPayKey": merchantPayKey,
    //         "productName": productName,
    //         "totalPayAmount": totalPayAmount,
    //         "taxScopeAmount": taxScopeAmount,
    //         "taxExScopeAmount": taxExScopeAmount,
    //         "productCount": 1,
    //         "returnUrl": returnUrl,
    //         "productItems": [{
    //             "categoryType": "ETC",
    //             "categoryId": "ETC",
    //             "uid": "1234",
    //             "name": "test",
    //             "payReferrer": "ETC",
    //             "count": 1
    //         }, {
    //             "categoryType": "ETC",
    //             "categoryId": "ETC",
    //             "uid": "4567",
    //             "name": "test2",
    //             "payReferrer": "ETC",
    //             "count": 2
    //         }]
    //     });
    // }


</script>
</body>


</html>
