OrderPaymentInfoMob.html 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <!DOCTYPE html>
  2. <html lang="ko" xmlns:th="http://www.thymeleaf.org">
  3. <!--
  4. *******************************************************************************
  5. * @source : OrderPaymentInfoWeb.html
  6. * @desc : 결제정보 Page
  7. *============================================================================
  8. * STYLE24
  9. * Copyright(C) 2020 TSIT, All rights reserved.
  10. *============================================================================
  11. * VER DATE AUTHOR DESCRIPTION
  12. * === =========== ========== =============================================
  13. * 1.0 2021.02.01 jsh77b 최초 작성
  14. *******************************************************************************
  15. -->
  16. <!-- 결제수단 선택 -->
  17. <div class="foldGroup">
  18. <ul>
  19. <li>
  20. <div class="fold_head">
  21. <a href="javascript:void(0)">
  22. <div>
  23. <div class="fold_tit">
  24. <span>결제수단</span>
  25. </div>
  26. <div class="data payTypeNm">
  27. <span>선택없음</span>
  28. </div>
  29. </div>
  30. </a>
  31. </div>
  32. <div class="fold_cont">
  33. <div class="area_paymethod">
  34. <div class="paymethod_box">
  35. <div class="form_field">
  36. <ul class="sel_method">
  37. <li>
  38. <input type="radio" name="rdi-paynormal" id="payCreditCard" class="KCP" value="KCP|G014_30">
  39. <label for="payCreditCard">
  40. <span class="payType">신용카드</span>
  41. </label>
  42. </li>
  43. <li>
  44. <input type="radio" name="rdi-paynormal" id="payKakao" class="KAKAO" value="KAKAO|G014_99">
  45. <label for="payKakao">
  46. <span><em class="sr-only payType">카카오페이 결제</em>
  47. <em class="payimg kakao"></em></span>
  48. </label>
  49. </li>
  50. <li>
  51. <input type="radio" name="rdi-paynormal" id="payRealBank" class="KCP" value="KCP|G014_10">
  52. <label for="payRealBank">
  53. <span class="payType">실시간계좌이체</span>
  54. </label>
  55. </li>
  56. <li>
  57. <input type="radio" name="rdi-paynormal" id="payNaver" class="NAVER" value="NAVER|G014_99">
  58. <label for="payNaver">
  59. <span>
  60. <em class="sr-only payType">네이버페이 결제</em>
  61. <em class="payimg naver"></em>
  62. </span>
  63. </label>
  64. </li>
  65. <th:block th:if="${order.giftPackYn} == 'N'">
  66. <li>
  67. <input type="radio" name="rdi-paynormal" id="payVirtualBank" class="KCP" value="KCP|G014_20">
  68. <label for="payVirtualBank">
  69. <span class="payType">무통장입금</span>
  70. </label>
  71. </li>
  72. </th:block>
  73. <li>
  74. <input type="radio" name="rdi-paynormal" id="payPayco" class="PAYCO" value="PAYCO|G014_30">
  75. <label for="payPayco">
  76. <span>
  77. <em class="sr-only payType">페이코 결제</em>
  78. <em class="payimg payco"></em>
  79. </span>
  80. </label>
  81. </li>
  82. <li>
  83. <input type="radio" name="rdi-paynormal" id="payCellphone" class="KCP" value="KCP|G014_60">
  84. <label for="payCellphone">
  85. <span class="payType">휴대폰 결제</span>
  86. </label>
  87. </li>
  88. </ul>
  89. </div>
  90. <!-- 210527_ 추가 : 결제수단 반복사용 체크 -->
  91. <th:blcok th:if="${isLogin}">
  92. <div class="form_field">
  93. <div class="agree_paymethod123">
  94. <input id="chk-agree_paymethod123" type="checkbox">
  95. <label for="chk-agree_paymethod123">
  96. <span>선택한 결제수단으로 향후 결제 이용에 동의합니다.&nbsp;&nbsp;<em class="tmark_optional">(선택)</em></span>
  97. </label>
  98. </div>
  99. </div>
  100. </th:blcok>
  101. <div class="form_field">
  102. <div class="agree_insurance">
  103. <input id="chk-insurance" type="checkbox" name="insuranceYn">
  104. <label for="chk-insurance">
  105. <span>소비자 피해 보상보험 신청&nbsp;&nbsp;<em class="tmark_optional">(선택)</em></span>
  106. </label>
  107. <p>
  108. ‘전자상거래 등에서의 소비자보호에 관한 법률‘에 따라 현금 결제 시 서울보증보험㈜가 제공하는 소비자
  109. 피해보상보험을<br>신청할 수 있도록 해드리고 있습니다. (2013.11.28부터 시행)
  110. </p>
  111. <a href="/callcenter/faq/form" class="btn btn_default"><span>FAQ확인</span></a>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. </li>
  118. </ul>
  119. </div><!-- //결제수단 선택 -->
  120. <script th:inline="javascript">
  121. var dispYn = [[${order.dispYn}]]; // 노출여부
  122. var payMeans = [[${payMeans}]]; // 결제타입
  123. var pgGb = [[${pgGb}]]; // PG구분
  124. //화면노출
  125. var paymentInfoDispYn = function(temp) {
  126. if (temp == "Y") {
  127. $("#paymentInfo .fold_head").addClass("on");
  128. $("#paymentInfo .fold_cont").show();
  129. } else {
  130. $("#paymentInfo .fold_head").removeClass("on");
  131. $("#paymentInfo .fold_cont").hide();
  132. }
  133. }
  134. //컨텐츠 호출
  135. $(document).ready( function() {
  136. // 화면펼침
  137. if (pgGb == null || pgGb == '' || pgGb == 'ISTYLE' || pgGb == 'NAVER_ORDER') {
  138. $("#orderForm .payTypeNm").text("선택없음");
  139. paymentInfoDispYn("Y");
  140. } else {
  141. if (pgGb == 'KCP' && (payMeans == null || payMeans == "")) {
  142. $("#orderForm .payTypeNm").text("선택없음");
  143. paymentInfoDispYn("Y");
  144. }
  145. paymentInfoDispYn(dispYn);
  146. }
  147. // 2021.05.26 자주쓰는결제타입설정
  148. if (pgGb == "KCP") {
  149. if (payMeans == "G014_30") {
  150. $("#payCreditCard").attr("checked", true);
  151. $("#orderForm .payTypeNm").text("신용카드");
  152. $("#orderForm .area_paymethod .agree_insurance").hide();
  153. } else if (payMeans == "G014_60") {
  154. $("#payCellphone").attr("checked", true);
  155. $("#orderForm .payTypeNm").text("휴대폰 결제");
  156. $("#orderForm .area_paymethod .agree_insurance").hide();
  157. } else if (payMeans == "G014_10") {
  158. $("#payRealBank").attr("checked", true);
  159. $("#orderForm .payTypeNm").text("실시간계좌이체");
  160. $("#orderForm .area_paymethod .agree_insurance").show();
  161. } else if (payMeans == "G014_20") {
  162. $("#payVirtualBank").attr("checked", true);
  163. $("#orderForm .payTypeNm").text("무통장입금");
  164. $("#orderForm .area_paymethod .agree_insurance").show();
  165. }
  166. } else if (pgGb == "KAKAO") {
  167. $("#payKakao").attr("checked", true);
  168. $("#orderForm .payTypeNm").text("카카오페이 결제");
  169. $("#orderForm .area_paymethod .agree_insurance").hide();
  170. } else if (pgGb == "NAVER") {
  171. $("#payNaver").attr("checked", true);
  172. $("#orderForm .payTypeNm").text("네이버페이 결제");
  173. $("#orderForm .area_paymethod .agree_insurance").hide();
  174. } else if (pgGb == "PAYCO") {
  175. $("#payPayco").attr("checked", true);
  176. $("#orderForm .payTypeNm").text("페이코 결제");
  177. $("#orderForm .area_paymethod .agree_insurance").hide();
  178. }
  179. });
  180. </script>
  181. </html>