결제창 호출

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: '[email protected]', // 구매자 이메일
        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>

index.html

<body>
    <div id="root"></div>
    <script async src="https://js.seedpayments.co.kr/v1/seedpay.js"></script>
</body>

App.js

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: "[email protected]", // 구매자 이메일
      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;

index.js

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: "[email protected]", // 구매자 이메일
      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

method(10byte)

결제수단 ALL(모두), CARD(신용카드), BANK(계좌이체), VACNT(가상계좌)중 하나 선택

mId(10byte)

상점 아이디

amount(15byte)

거래 금액

orderId(40byte)

주문 번호 주문한 결제를 식별하는 역할로, 결제를 요청할 때 가맹점에서 만들어서 사용한 값입니다. 중복되지 않는 고유한 값을 발급해야 합니다.

orderName(100byte)

상품명

returnUrl

결제(인증) 결과 전달하는 페이지

customerName(30byte)

구매자명

customerMobilePhone(20byte)

구매자 연락처

customerEmail(60byte)

구매자 이메일 주소

period(21byte)

제공 기간 Default: 별도 제공기간 없음

flowMode(1byte)

직접호출 0: 미사용(default) 1: 사용 default는 카드, 간편결제수단이 있는 기본 결제창을 호출. 사용은 앱카드 또는 간편결제사 결제창을 직접 호출. 앱카드를 호출하려면 cardCompany를 설정, 간편결제사 결제창을 호출하려면 easyPay를 설정

cardCompany(2byte)

카드사 코드 method: 'CARD', flowMode: '1' 이면 설정한 카드사의 결제창 호출 카드사 코드 바로가기

easyPay(2byte)

간편결제사 코드 method: 'CARD', flowMode: '1', cardCompay: '00' 이면 설정한 간편결제사의 결제창 호출 간편결제사 코드 바로가기

cardInstallmentPlan(2byte)

신용 카드의 할부 개월 수 값을 넣으면 해당 할부 개월 수로 결제 진행, 값을 넣지 않으면 고객이 결제창에서 할부 개월 수를 선택 가능 00 : 일시불, 02 : 2개월, 03 : 3개월, 04 : 4개월

useCardPoint(1byte)

카드로 결제할 때 설정하는 카드사 포인트 사용 여부 0 : 미사용, 1 : 사용

결제창 응답

resultCd(4byte)

인증에 대한 성공, 실패 코드 : 0000 : 0000을 제외한 나머지

resultMsg(100byte)

결과 메시지 : 정상처리 : 기타 오류 메시지

nonce(30byte)

전문 번호

tid(30byte)

인증 거래번호

mId(10byte)

상점 아이디

method(2byte)

지불수단 (결제방식) 01 : 카드결제 02 : 실시간 계좌이체 03 : 가상계좌 (무통장 입금)

orderId(40byte)

주문 번호 주문한 결제를 식별하는 역할로, 결제를 요청할 때 가맹점에서 만들어서 사용한 값입니다. 중복되지 않는 고유한 값을 발급해야 합니다.

amount(15byte)

결제 금액

mbsReserved(500byte)

상점 예약 필드에 셋팅한 값

ediDate(14byte)

인증 처리 일시 형태 : YYYYMMDDHHmmss 예시) 20230914135133

payData

결제 정보 암호화 데이터

signData

검증 데이터 (tid + mId + ediDate + amount + orderId + 가맹점KEY) 인증 데이터 정합성을 위해 가맹점에서 HASH값 비교

approvalUrl

승인 요청 URL

netCancleUrl

망취소 요청 URL * 승인 요청 후 승인결과를 전달받지 못한 경우 해당 URL 을 통해 망취소 요청

카드 직접 호출(cardCompany)과 간편결제(easyPay)는 동시에 사용할 수 없습니다. 하나만 사용해 주세요.

Previous연동 준비하기 NextAPI 연동

Last updated 1 year ago