지금 개발중인 웹에 결제창을 띄워보려고 아임포트 API를 연동해보고 있는데 생각만큼 잘 안된다.
구글링해서 연동 예제코드를 받아오긴 했으나... button type에 마우스 클릭 Event 리스닝을 하면 쥰내 결제창 잘 뜨는데, 결제 정보 받는 container를 form으로 묶어 놓고 input type의 form submit Event 리스닝을 시켜놓으면 마치 학창시절, 선생님이 "질문 있는 사람?" 그랬을 때 마냥 고요하다.
준내 잘되는 코드
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script async type="text/javascript" src="https://service.iamport.kr/js/iamport.payment-1.1.5.js"></script> <body> /*... 중략 ...*/ </body> <script> $("#check_module").click(function () { var IMP = window.IMP; // 생략가능 IMP.init('imp########'); // 'iamport' 대신 부여받은 "가맹점 식별코드"를 사용 // i'mport 관리자 페이지 -> 내정보 -> 가맹점식별코드 IMP.request_pay({ pg: 'inicis', // version 1.1.0부터 지원. /* 'kakao':카카오페이, html5_inicis':이니시스(웹표준결제) 'nice':나이스페이 'jtnet':제이티넷 'uplus':LG유플러스 'danal':다날 'payco':페이코 'syrup':시럽페이 'paypal':페이팔 */ pay_method: 'card', /* 'samsung':삼성페이, 'card':신용카드, 'trans':실시간계좌이체, 'vbank':가상계좌, 'phone':휴대폰소액결제 */ merchant_uid: 'merchant_' + new Date().getTime(), /* merchant_uid에 경우 https://docs.iamport.kr/implementation/payment 위에 url에 따라가시면 넣을 수 있는 방법이 있습니다. 참고하세요. 나중에 포스팅 해볼게요. */ name: '주문명:결제테스트', //결제창에서 보여질 이름 amount: 1000, //가격 buyer_email: 'iamport@siot.do', buyer_name: '구매자이름', buyer_tel: '010-1234-5678', buyer_addr: '서울특별시 강남구 삼성동', buyer_postcode: '123-456', @*m_redirect_url: 'https://www.yourdomain.com/payments/complete'*@ m_redirect_url: 'humanentec.iptime.org' /* 모바일 결제시, 결제가 끝나고 랜딩되는 URL을 지정 (카카오페이, 페이코, 다날의 경우는 필요없음. PC와 마찬가지로 callback함수로 결과가 떨어짐) */ }, function (rsp) { console.log(rsp); if (rsp.success) { var msg = '결제가 완료되었습니다.'; msg += '고유ID : ' + rsp.imp_uid; msg += '상점 거래ID : ' + rsp.merchant_uid; msg += '결제 금액 : ' + rsp.paid_amount; msg += '카드 승인번호 : ' + rsp.apply_num; } else { var msg = '결제에 실패하였습니다.'; msg += '에러내용 : ' + rsp.error_msg; } alert(msg); }); }); </script>
(코드출처 : https://minaminaworld.tistory.com/78)
문제 많은 코드
<script> $("form[name=payfrm]").on("submit", function () { /* ......... 중략 ...........*/ }, function (rsp) { /* ........ 또략 .........*/ }); }); </script>
어제 하루종일 여기에 올인한 결과, 내 뇌로는 원인을 알 수가 없었다. 혹시나 javascript와 html 페이지 loading하는 시간 차이때문에 이러는 건가 싶어서 script 태그에 async, defer 등... 구글링 결과로 찾은 오만가지 조미료들을 뿌려봤으나 소용이 없었다. 결국 오늘, form submit 이후 사용자 input 값만 DB에 뿌려주고 결제창을 띄워주는 페이지로 Redirection하는 방법을 사용하기로 마음먹었다. 되면 개이득.
Nerd가 부러운 개발자
안녕하세요 같은 문제로 고생중인데 혹시 해결하셨나요..?