인프런 커뮤니티 질문&답변

해당 파일

mall_test\templates\mall_test\payment_form.html

1. 문제점
코드 작성후 결제 테스트를 해보니, KG이니시스의 팝업이 차단되었다는 메세지가 있는 창이 계속 발생합니다.

2. 상황

1) 크롬에서 팝업 차단 안되게 설정함(캡쳐1 참조)
2) 강의 원본 코드(캡쳐2 참조) 및 버튼 추가 코드(캡쳐3 참조)에서 동일하게 KG이니시스의 팝업이 차단되었다는 내용의 창이 발생해서 더 이상 결제 진행이 안됩니다.
3) PG사를 카카오페이 혹은 토스페이먼츠로 설정시 정상 결제 진행됨.

3. 해당 코드
1) 강의 원본 코드(결과는 캡쳐2 참조)

{% extends "mall_test/base.html" %} {% block content %}
<h2>결재하기</h2>

<script src="https://cdn.iamport.kr/v1/iamport.js"></script>
<script>
  (function () {
    const IMP = window.IMP;
    const code = "iamport";
    IMP.init(code);

    const merchant_uid = "merchant_" + new Date().getTime();

    IMP.request_pay(
      {
        merchant_uid: merchant_uid,
        name: "주문 테스트",
        amount: 100,
      },
      function (response) {
        // 콜백 함수
        console.log(response);
      },
    );
  })();
</script>
{% endblock %}

2) 버튼 추가 코드(결과는 캡쳐3 참조)

• KG이니시스: 팝업 차단이 되었다는 창이 발생해서 더이상 결재 진행 안됨

• 카카오페이 혹은 토스페이먼츠: 정상 결재 완료됨

{% extends "mall_test/base.html" %} {% block content %}
<h2>결재하기</h2>

<button id="payButton">결제하기</button>
<script src="https://cdn.iamport.kr/v1/iamport.js"></script>
<script>
  (function () {
    const IMP = window.IMP;
    IMP.init("imp로 시작하는 코드"); // 포트원에서 발급받은 imp 사용

    document.getElementById("payButton").addEventListener("click", function () {
      const merchant_uid = "merchant_" + new Date().getTime();

      IMP.request_pay(
        {
          // pg: "kakaopay.TC0ONETIME", // 카카오페이 (등록된 PG)
          pg: "tosspayments.iamporttest_3", // 토스페이먼츠 (등록된 PG)
          // pg: "html5_inicis.INIpayTest", // KG이니시스 HTML5 (등록된 PG)
          pay_method: "card",
          merchant_uid: merchant_uid,
          name: "주문 테스트",
          amount: 100,
        },
        function (response) {
          console.log(response);
          if (response.success) {
            alert("결제 완료!");
          } else {
            alert("결제 실패: " + response.error_msg);
          }
        },
      );
    });
  })();
</script>
{% endblock %}

4. 캡쳐한 사진들

캡쳐1: 크롬 팝업 차단 해제 설정함

캡쳐2: 강의 원본 코드(KG이니시스 팝업 차단 메세지 발생)

캡쳐3: 버튼 추가 코드(KG이니시스 팝업 차단 메세지 발생)