[Vue js] 아임포트 결제모듈 연동(KG 이니시스)
https://www.iamport.kr/ 온라인 비즈니스의 모든 결제를 한곳에서, 아임포트결제의 시작부터 비즈니스의 성장까지 아임포트와 함께하세요www.iamport.kr - 로그인후 우측 상단의 관리자 콘솔 접근 1. 아임포트 설정 - 내 정보 탭에서 가맹점 식별코드 복사 - PG 설정에서 기본 PG 사 KG 이니시스 설정 후 저장 2. FrontEnd- public/index.html head에 추가<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script> <script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.2.0.js"></script> - Component<template> <section class="test"> <input type="number" placeholder="금액 입력" v-model="price" > <div @click="PaymentBtn">결제</div> </section> </template> <script> const { IMP } = window; export default { name: "test", data(){ return{ price: 0 } }, created(){ document.cookie = "safeCookie1=foo; SameSite=Lax"; document.cookie = "safeCookie2=foo"; document.cookie = "crossCookie=bar; SameSite=None; Secure"; }, methods: { PaymentBtn:function(){ IMP.init("관리자 콘솔 - 내 정보 - 가맹점 식별코드"); IMP.request_pay({ // param pg: "html5_inicis", pay_method: "card", merchant_uid: "ORD20180131-0000011", name: "YOYOSTUDY", amount: this.price, buyer_email: "funidea_woo@naver.com", buyer_name: "테스터", buyer_tel: "010-8832-4280", buyer_addr: "서울특별시 영등포구 당산동", buyer_postcode: "07222" }, rsp => { // callback console.log(rsp); if (rsp.success) { console.log("결제 성공"); } else { console.log("결제 실패"); } }); } } } </script> <style scoped> input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input{ width:300px; border:0; border-bottom:1px #a8a8a8 solid; margin:0 10px 0; padding:0; height:40px; line-height:40px; outline: none; } .test{ display:flex; justify-content: center; align-items: center; height:100vh; } div{ width: 200px; height:40px; background-color:#ffffff; border:1px #a8a8a8 solid; color:black; display:flex; align-items: center; justify-content: center; cursor:pointer; } </style> 2. TEST - 결제 금액 입력 후 결제 버튼 클릭 - 결제 진행 - 결제 성공 확인(console.log) - 아임포트 관리자 콘솔에서 결제 내역 확인 가능
