이노페이 결제창은 JavaScript SDK의 goPay 메서드를 사용해서 띄울 수 있습니다.
메서드의 첫 번째 파라미터 값으로 결제 수단인 CARD를, 두 번째 파라미터 부터는 추가 주문 정보를 문자열 형태로 전달합니다.
‘결제하기’ 버튼을 눌러서 결제창을 실행해 보세요.
1. 결제창 실행 준비
HTML
<html>
<head>
<script type="text/javascript" src="https://pg.innopay.co.kr/ipay/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://pg.innopay.co.kr/ipay/js/innopay-2.0.js" charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#btn_pay").click(function(){
// 결제요청 함수
innopay.goPay({
//// 필수 파라미터
PayMethod:'CARD', // 결제수단(CARD,BANK,VBANK,CARS,CSMS,DSMS,EPAY,EBANK)
MID:'testpay01m', // 가맹점 MID
GoodsName:'이노페이 화장품', // 상품명
Amt:20000, // 결제금액(과세)
BuyerName:'홍길동', // 고객명
BuyerTel:'01012345678', // 고객전화번호
BuyerEmail:'test@email.com', // 고객이메일
ResultYN:'Y', // 결제결과창 출력유뮤
Moid:'testpay01m01234567890', // 가맹점에서 생성한 주문번호 셋팅
...
// 선택 파라미터
ReturnURL:'https://pg.innopay.co.kr/pay/returnPay.jsp',
// 결제결과 전송 URL(없는 경우 아래 innopay_result 함수에 결제결과가 전송됨)
});
});
});
</script>
</head>
<body>
<section>
...
<span>총 주문금액</span>
<span>20,000 원</span>
...
<button id="btn_pay">결제하기</button>
</section>
</body>
</html>
상품명이노페이 화장품
총 주문금액20,000원
결제수단
2. 결제창 호출
결제창이 실행되었습니다.
약관동의 후 카드사를 선택하고 ‘다음’ 버튼을 누르면 카드사 결제 인증이 진행됩니다.
‘다음’ 버튼을 눌러 결제를 진행해 보세요.
신용카드결제
- 입력
- 확인
- 완료
-
상점인피니소프트
-
상품명이노페이 화장품
-
상품가격20,000원
이용약관 동의
결제정보 입력
무이자 할부 안내3. 결제승인 요청
카드사 결제 인증에 성공하면, 결제를 구분할 수 있는 값인 tid와 일부 주문 정보를 가지고 결제 확인 페이지로 이동합니다.
결제내용 확인 후 ‘다음’ 버튼을 누르면 결제정보를 포함하여 최종 결제승인 요청을 보냅니다.
‘다음’ 버튼을 눌러 최종 결제승인을 요청하세요.
HTTP/JSON – 카드사 인증 결과 응답
{
"PayMethod":"CARD",
"mid":"testpay01m",
"tid":"202208089def4a8ec9924033b1278fadaf7c8181",
"amt": 20000,
"moid":"testpay01m01234567890",
"authdate":"220808141025",
"authcode":"00827401"
...
}4. 결제완료
결제 승인 요청이 성공하면 다음과 같은 응답이 돌아옵니다.
받은 응답 내용을 이용해서 결제 성공 페이지에 고객에게 보여줄 정보를 표시할 수 있습니다.
HTTP/JSON – 결제결과 응답
{
"PayMethod":"CARD",
"mid":"testpay01m",
"tid":"202208089def4a8ec9924033b1278fadaf7c8181",
"amt": 20000,
"moid":"testpay01m01234567890",
"authdate":"220808141025",
"authcode":"00827401",
...
"resultcode":"3001",
"resultmsg":"카드 결제 성공",
"errorcode":null,
"errormsg":null,
...
}
