결제창 호출
JavaScriptSDK를 통해 결제창을 호출하는 방법을 안내합니다. SDK를 이용하여 결제창을 손쉽게 띄워보세요.
결제창 호출 샘플코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 결제위젯 SDK 추가 -->
<script src="https://js.seedpayments.co.kr/v1/seedpay.js"></script>
</head>
<body>
<!-- 결제하기 버튼 -->
<button id="payment-button">결제하기</button>
<script type="text/javascript">
const button = document.getElementById('payment-button');
// ----- 결제하기 버튼 누르면 결제창 띄우기 -----
button.addEventListener('click', function() {
SeedPay.requestPayment({
method: 'CARD', // 결제수단 ALL, CARD, BANK, VACNT 중 하나
mId: '123121234m', // 상점 아이디(필수)
amount: 1005, // 결제 금액(필수)
orderId: 'Z93MeKjW7mjRZBnZB6u4E', // 주문 ID(직접 만들어주세요)(필수)
orderName: '씨드 FIC 양고기 외 2건', // 주문명
returnUrl: returnUrl, // 결제(인증) 결과 전달하는 페이지(직접 만들어주세요)
customerEmail: 'seed.kim@seedglobal.co', // 구매자 이메일
customerName: '김씨드', // 구매자명
customerMobilePhone: '01012345679', // 구매자 휴대폰
options: {
period: '2023.10.16 ~ 2023.10.20', // 제공기간, default: 별도 제공기간 없음
card: {
flowMode: '1', // 직접호출, 0: 미사용(default), 1: 사용
cardCompany: '06' , // 카드사 선택시 간편결제사: '00' 고정
easyPay: '00', // 간편결제사 코드
cardInstallmentPlan: '00', // 할부개월
useCardPoint: '0', // 카드사 포인트 사용 여부
}
}
});
});
</script>
</body>
</html><body>
<div id="root"></div>
<script async src="https://js.seedpayments.co.kr/v1/seedpay.js"></script>
</body>import React from "react";
function App() {
// 결제 버튼 클릭 이벤트 처리
const handleClick = () => {
window.SeedPay.requestPayment({
method: "CARD", // 결제수단 ALL, CARD, BANK, VACNT 중 하나입니다.
mId: "123121234m", // 상점 아이디(필수)
amount: 1005, // 결제 금액(필수)
orderId: "Z93MeKjW7mjRZBnZB6u4E", // 주문 ID(직접 만들어주세요) (필수)
orderName: "씨드 FIC 양고기 외 2건", // 주문명
returnUrl: returnUrl, // 결제(인증) 결과 전달하는 페이지(직접 만들어주세요)
customerEmail: "seed.kim@seedglobal.co", // 구매자 이메일
customerName: "김씨드", // 구매자명
customerMobilePhone: "01012345679", // 구매자 휴대폰
options: {
period: "2023.10.16 ~ 2023.10.20", // 제공기간, default: 별도 제공기간 없음
card: {
flowMode: "1", // 직접호출, 0: 미사용(default), 1: 사용
cardCompany: "06", // 카드사 선택시 간편결제사: 00 고정
easyPay: "00", // 간편결제사 코드
cardInstallmentPlan: "00", // 할부개월
useCardPoint: "0", // 카드사 포인트 사용 여부
},
},
});
};
return <button onClick={handleClick}>결제하기</button>;
}
export default App;
import React from "react";
import Head from "next/head";
export default function Home() {
// 결제 버튼 클릭 이벤트 처리
const handleClick = () => {
window.SeedPay.requestPayment({
method: "ALL", // 결제수단 ALL, CARD, BANK, VACNT 중 하나
mId: "123121234m", // 상점 아이디(필수)
amount: 1005, // 결제 금액(필수)
orderId: "Z93MeKjW7mjRZBnZB6u4E", // 주문 ID(직접 만들어주세요)(필수)
orderName: "씨드 FIC 양고기 외 2건", // 주문명
returnUrl: returnUrl, // 결제(인증) 결과 전달하는 페이지(직접 만들어주세요)
customerEmail: "seed.kim@seedglobal.co", // 구매자 이메일
customerName: "김씨드", // 구매자명
customerMobilePhone: "01012345679", // 구매자 휴대폰
options: {
period: "2023.10.16 ~ 2023.10.20", // 제공기간, default: 별도 제공기간 없음
card: {
flowMode: "0", // 직접호출, 0: 미사용(default), 1: 사용
cardCompany: "00", // 카드사 선택시 간편결제사: '00' 고정
easyPay: "00", // 간편결제사 코드
cardInstallmentPlan: "00", // 할부개월
useCardPoint: "0", // 카드사 포인트 사용 여부
},
},
});
};
return (
<>
<Head>
<script
src="https://js.seedpayments.co.kr/v1/seedpay.js"
async
></script>
</Head>
<button onClick={handleClick}>결제하기</button>
</>
);
}
결제창 호출 파라미터
결제창 호출
URL : /payment/v1/view/request Protocol : HTTP/1.1 Method : POST Encoding : UTF-8 Content-Type : application/json
결제수단 ALL(모두), CARD(신용카드), BANK(계좌이체), VACNT(가상계좌)중 하나 선택
상점 아이디
거래 금액
주문 번호 주문한 결제를 식별하는 역할로, 결제를 요청할 때 가맹점에서 만들어서 사용한 값입니다. 중복되지 않는 고유한 값을 발급해야 합니다.
상품명
결제(인증) 결과 전달하는 페이지
구매자명
구매자 연락처
구매자 이메일 주소
제공 기간 Default: 별도 제공기간 없음
직접호출 0: 미사용(default) 1: 사용 default는 카드, 간편결제수단이 있는 기본 결제창을 호출. 사용은 앱카드 또는 간편결제사 결제창을 직접 호출. 앱카드를 호출하려면 cardCompany를 설정, 간편결제사 결제창을 호출하려면 easyPay를 설정
신용 카드의 할부 개월 수 값을 넣으면 해당 할부 개월 수로 결제 진행, 값을 넣지 않으면 고객이 결제창에서 할부 개월 수를 선택 가능 00 : 일시불, 02 : 2개월, 03 : 3개월, 04 : 4개월
카드로 결제할 때 설정하는 카드사 포인트 사용 여부 0 : 미사용, 1 : 사용
결제창 응답
전문 번호
인증 거래번호
상점 아이디
지불수단 (결제방식) 01 : 카드결제 02 : 실시간 계좌이체 03 : 가상계좌 (무통장 입금)
주문 번호 주문한 결제를 식별하는 역할로, 결제를 요청할 때 가맹점에서 만들어서 사용한 값입니다. 중복되지 않는 고유한 값을 발급해야 합니다.
결제 금액
상점 예약 필드에 셋팅한 값
인증 처리 일시 형태 : YYYYMMDDHHmmss 예시) 20230914135133
결제 정보 암호화 데이터
검증 데이터 (tid + mId + ediDate + amount + orderId + 가맹점KEY) 인증 데이터 정합성을 위해 가맹점에서 HASH값 비교
승인 요청 URL
망취소 요청 URL * 승인 요청 후 승인결과를 전달받지 못한 경우 해당 URL 을 통해 망취소 요청
카드 직접 호출(cardCompany)과 간편결제(easyPay)는 동시에 사용할 수 없습니다. 하나만 사용해 주세요.
Last updated
