LogoLogo
  • 포트원 서비스 업데이트 안내
    • 관리자콘솔 릴리즈노트
      • 2023-05-08 업데이트
      • 2023-04-24 업데이트
    • API/SDK 릴리즈노트
      • 2023-05-08 업데이트
      • 2023-04-24 업데이트
  • 🧩포트원 결제 연동 Docs
    • 🚗GET STARTED
  • 🛫결제 연동 준비하기
    • 🖥️1. 포트원 회원가입 하기
    • 🧷2. PG정보 설정하기
      • 🏢Payment Gateway
        • ⌨️NHN KCP 설정
        • ⌨️KG 이니시스 설정
        • ⌨️NICE페이먼츠 설정
        • ⌨️토스페이먼츠 설정
        • ⌨️KSNET 설정
        • ⌨️KICC 설정
        • ⌨️페이먼트월 설정
        • ⌨️다우 설정
        • ⌨️다날 설정
        • ⌨️JTNET 설정
        • ⌨️핵토파이낸셜 설정
          • 🚩내통장 결제
        • ⌨️KG모빌리언스 설정
        • ⌨️스마트로 설정
        • ⌨️페이팔 설정
        • ⌨️페이팔 SPB 일반결제 설정
        • ⌨️엑심베이 설정
        • ⌨️블루월넛 설정
      • ⛺간편 결제사
        • ⌨️네이버페이(결제형) 설정
        • ⌨️카카오페이 설정
        • ⌨️페이코 설정
        • ⌨️알리페이 설정
        • ⌨️토스간편결제 설정
    • ✔️3. 연동정보 확인하기
  • 결제창 연동하기
    • 🖥️인증결제 연동하기
      • 📒인증결제 정의
      • 🌠1. 포트원 라이브러리 추가
      • 💡2. 객체 초기화 하기
      • 🪧3. 결제 요청하기
      • 🎁4. 결제결과 처리하기
        • 🪟iframe 결제창 결과처리
        • 🖼️redirect 결제창 결과처리
      • 🔦5. 결제정보 검증하기
        • ⬅️결제정보 사전 검증하기
        • ➡️결제정보 사후 검증하기
      • 🛬6. 결제완료 처리하기
    • ⏰비 인증결제 연동하기
      • 🏍️빌링키 결제 요청하기
        • 🖱️REST API 이용하기
        • 🛡️PG결제창 이용하기
      • 💳카드정보를 이용한 키인결제
      • 🪧빌링키를 이용한 정기결제
    • 💸결제취소(환불) 연동하기
      • 💷가상계좌 환불하기
  • 결제결과 연동하기
    • ⚒️웹훅(Webhook) 연동하기
    • ✔️가상결제 입금통보 설정
  • 기타 서비스 연동하기
    • 📱휴대폰 본인인증 연동하기
      • 📔1. 본인인증 준비하기
      • 🥏2. 본인인증창 호출하기
      • 🚚3. 인증 완료정보 전달하기
      • 🤹4. 인증정보 조회 및 활용하기
    • 🚚통합인증 연동하기
      • 📒통합인증 준비하기
      • 🥏통합인증 요청하기
      • 🚚인증 완료정보 전달하기
      • 🤹인증정보 조회 및 활용하기
    • 💳신용카드 본인인증 연동
      • 📒1. 본인인증 준비하기
      • 🥏2. 본인인증 요청하기
      • 🚚3. 인증 완료정보 전달하기
      • 🤹4. 인증정보 조회 및 활용하기
    • 💻결제 URL 생성하기
    • 🛩️버짓핸들러 연동하기
    • 📟네이티브 모바일 SDK
  • TIP
    • 🌽결제금액 면세 적용방법
    • ✅오픈 전 체크사항
    • 🔏Confirm Process
    • 🎼포트원 결제 FLOW
    • 🎈Agency & Tier 란?
    • 📦PG사별 빌링키 획득 규칙
    • 🏦PG사별 은행코드표
    • 🧾PG사 코드표
    • 🚚택배사 코드표
    • 🪧리디렉션이란?
    • 📰PG사 오류코드
  • 관리자 콘솔 사용하기
    • 🎡관리자 콘솔 가이드
      • 전자결제 신청
      • 내 식별코드, API Keys
      • 관리자 및 하위 상점 계정 관리
      • 결제 연동 하기
      • 결제 내역
    • 💻복수 PG설정 및 사용하기
  • API
    • 📋포트원 API 소개
    • 🖇️REST API Access Token
    • 💳결제관련 API
      • ⌨️결제취소 API
      • ⌨️결제내역 단건조회 API
      • ⌨️결제내역 복수조회 API
      • ⌨️결제상태기준 복수조회 API
      • ⌨️결제 복수조회(주문All) API
      • ⌨️결제 복수조회(주문UQ) API
      • ⌨️빌링키 결제 복수조회 API
      • ⌨️결제금액 사전등록 API
      • ⌨️결제금액 단건 수정 API
      • ⌨️결제금액 단건조회
      • ⌨️결제 상세내역 조회 API
    • 📝빌링키 관리 API
      • ⌨️빌링키 발급 API
      • ⌨️빌링키 삭제 API
      • ⌨️빌링키 정보 단건조회 API
      • ⌨️빌링키 정보 복수조회 API
      • ⌨️빌링키 결제예약 조회 API
    • 🧭정기결제 관련 API
      • ⌨️결제 예약 API
      • ⌨️결제 예약취소 API
      • ⌨️결제예약 복수조회 API
      • ⌨️결제예약 단건조회 API
      • ⌨️결제예약 복수조회(빌키) API
    • 🪂비 인증 결제관련 API
      • ⌨️비 인증 결제(빌링키) API
      • ⌨️비 인증 결제(일회성) API
    • 🌏해외PG 관련 API
      • ⌨️페이먼트월 배송등록 API
    • 👮본인인증 관련 API
      • ⌨️본인인증 결과조회 API
      • ⌨️본인인증 정보삭제 API
      • ⌨️본인인증 요청 API
      • ⌨️본인인증 완료 API
    • 🎫간편결제 서비스 API
      • 🧽카카오페이
        • ⌨️주문내역 조회 API
      • 🛩️KCP Quick Pay
        • ⌨️구매자 정보 단건 삭제 API
      • 🧰페이코
        • ⌨️주문상태 단건 수정 API
      • 📗네이버페이 결제형
        • ⌨️에스크로 주문확정 API
        • ⌨️포인트 적립 API
        • ⌨️현금영수증 발급 가용액 조회 API
    • 🏦에스크로 관련 API
      • ⌨️배송정보 단건조회 API
      • ⌨️배송정보 단건등록 API
      • ⌨️배송정보 단건수정 API
    • 💵현금영수증 API
      • ⌨️포트원 발급분 취소 API
      • ⌨️발급내역 단건 조회 API
      • ⌨️현금영수증 단건발급 API
      • ⌨️외부 발급분 취소 API
      • ⌨️외부 발급내역 단건 조회 API
      • ⌨️현금영수증 발급(외부) API
    • 🏛️가상계좌 관련 API
      • ⌨️가상계좌 발급 API
      • ⌨️가상계좌 발급취소 API
      • ⌨️가상계좌 발급정보 수정 API
      • ⌨️예금주 조회 API
    • 🍶기타 API
      • 🎽베네피아 포인트
        • ⌨️포인트 단건조회 API
        • ⌨️포인트 결제 요청
      • 🏪편의점 결제
        • ⌨️수납번호 발급 API
        • ⌨️수납취소 API
      • 🗃️기관코드 조회
        • ⌨️카드사코드 전체조회 API
        • ⌨️카드사명 단건조회 API
        • ⌨️은행코드 전체조회 API
        • ⌨️은행명 단건조회 API
      • 🛖PG 정보
        • ⌨️PG MID 복수조회 API
  • SDK
    • 🔖JavaScript SDK
      • 💿결제요청 파라미터
      • 📀결제응답 파라미터
      • 💿본인인증 요청 파라미터
      • 📀본인인증 결과 파라미터
    • 📚JavaScript SDK (구버전)
      • ✏️SDK Release Note
  • FAQ
    • ⁉️자주 묻는 질문
  • 🔑PG사별 결제 연동 가이드
    • 🏢Payment Gateway
      • ⌨️NHN KCP
      • ⌨️KG 이니시스
      • ⌨️토스페이먼츠 (구 모듈)
      • ⌨️토스페이먼츠
        • 📍연동 유의사항
      • ⌨️(주)케이에스넷
        • 🚩연동 주의사항
      • ⌨️NICE페이먼츠
      • ⌨️KICC
      • ⌨️다우 (키움페이/페이조아)
        • 📍페이조아 유의사항
      • ⌨️KG모빌리언스
      • ⌨️페이먼트월
      • ⌨️다날
      • ⌨️핵토파이낸셜
        • 🏦내통장 결제
      • ⌨️JTNET
      • ⌨️스마트로
      • ⌨️페이팔
      • ⌨️페이팔 SPB 일반결제
        • 😲연동 유의사항
      • ⌨️엑심베이
      • ⌨️블루월넛
    • ⛺간편 결제사
      • ⌨️네이버페이(결제형)
      • ⌨️카카오페이
      • ⌨️페이코
      • ⌨️알리페이
      • ⌨️토스 간편결제
  • 워드프레스 플러그인 사용하기
    • 워드프레스 플러그인
      • 우커머스 플러그인
        • 일반결제 연동하기
        • 정기결제 연동하기
        • 가상계좌 입금통보 URL 설정하기
      • Easy Digital Downloads 플러그인
      • 결제버튼생성 플러그인
  • V2 연동하기 (beta)
    • ⚠️V2 연동 시작하기
    • 🖥️인증결제 연동하기
      • 1. 포트원 SDK 설치
      • 2. 결제 요청하기
      • 3. 결제검증 API 구현하기 (서버)
      • 4. 결제완료 처리하기 (클라이언트)
        • iframe 방식의 결과처리
        • redirect 방식의 결과처리
    • ⏰비인증결제 연동하기
      • 빌링키 결제
        • 1. 빌링키 발급하기
          • PG 결제창 이용하기
            • 1. 빌링키 결제 API 구현하기 (서버)
            • 2. 결제창을 통해 빌링키 발급하기
          • 포트원 API 이용하기
        • 2. 정기(예약)/반복결제 구현하기 (서버)
      • 키인(수기) 결제
    • 💸웹훅 연동하기
    • 🚀JavaScript SDK
      • 결제요청 파라미터
      • 결제응답 파라미터
      • 빌링키 발급 요청 파라미터
      • 빌링키 발급 응답 파라미터
    • 🏢PG사별 연동 가이드
      • ⌨️카카오페이
    • 🛬온보딩 연동 가이드 - 별도 계약 필요
  • API (V2 beta)
    • ⚠️V2 API 시작하기
    • 채널 관련 API
    • 인증 관련 API
    • 결제 관련 API
    • 현금영수증 관련 API
    • 정기결제 관련 API
    • 빌링키 관련 API
    • 가맹점 관리 API - 별도 계약 필요
    • 온보딩 API - 별도 계약 필요
  • 영문 연동가이드
Powered by GitBook
On this page
  • API를 통한 빌링키 발급의 장점
  • API를 통한 빌링키 발급의 단점
  • 1. 빌링키 발급 API 구현하기 (서버)
  • 2. 카드 정보 입력받기
  • 빌링키 발급을 위한 카드정보

Was this helpful?

  1. V2 연동하기 (beta)
  2. 비인증결제 연동하기
  3. 빌링키 결제
  4. 1. 빌링키 발급하기

포트원 API 이용하기

포트원 REST API 를 이용하여 손쉽게 빌링키를 발급할 수 있습니다.

Previous2. 결제창을 통해 빌링키 발급하기Next2. 정기(예약)/반복결제 구현하기 (서버)

Last updated 2 years ago

Was this helpful?

Deprecated

이 문서는 더 이상 관리되지 않습니다.

를 이용해주세요.

고객 카드정보를 이용하여 포트원 빌링키 발급 API를 요청하면 포트원 서버가 PG사를 통해 빌링키를 발급받습니다.

이 과정에서 카드정보는 포트원 서버에 기록되지 않습니다.

API를 통한 빌링키 발급의 장점

가맹점이 원하는 형태의 화면으로 카드정보 입력란을 커스터마이징할 수 있습니다. 가맹점 UI/UX 친화적인 결제 환경을 계획하고 계시다면 API 연동 개발을 선택하시면 됩니다.

API를 통한 빌링키 발급의 단점

개인정보 이용약관을 명시해야 하며 PG사 및 카드사 심사가 까다롭고 개인정보 유출에 유의해야 합니다.

1. 빌링키 발급 API 구현하기 (서버)

예시를 위해 경로가 /billing-keys인 빌링키 발급 API를 구현합니다.

이 API는 내부적으로 포트원의 빌링키 발급 API를 호출하며, API 호출을 위해 인증이 필요하므로 서버에서 구현되어야 합니다.

// bodyParser 등을 통해 body의 Content-Type에 맞게 데이터를 파싱할 수 있는지 확인해주세요.
// 아래의 카드 정보 입력하기의 방법에 따라 요청으로 오는 Content-Type이 다를 수 있습니다.
// POST 요청을 받는 /billing-keys
app.post("/billing-keys", async (req, res) => {
  try {
    // 카드를 통한 빌링키 발급을 위한 정보들이 오기를 기대합니다.
    // 자세한 필요한 정보는 빌링키 발급 API를 참고해주세요.
    const {
      customer_id,
      card_number,
      expiry_month,
      expiry_year,
      birth_or_business_registration_number,
      password_two_digits,
    } = req.body;

    // 1. 포트원 API를 사용하기 위한 액세스 토큰 발급 받기
    const signinResponse = await axios({
      url: "https://api.portone.io/v2/signin/api-key",
      method: "post",
      headers: { "Content-Type": "application/json" },
      data: {
        api_key: PORTONE_API_KEY, // 포트원 API Key
      },
    });
    const { access_token } = signinResponse.data;
    
    // 2. 포트원 빌링키 발급 API 호출
    const issueResponse = await axios({
      url: "https://api.portone.io/v2/billing-keys",
      method: "post",
      // 1번에서 발급받은 액세스 토큰을 Bearer 형식에 맞게 넣어주세요.
      headers: { "Authorization": "Bearer " + access_token },
      data: {
        customer: {
          customer_id,
        },
        payment_method_option: {
          card: {
            card_credential: {
              card_number,
              expiry_month,
              expiry_year,
              birth_or_business_registration_number,
              password_two_digits
            },
          },
        },
      }
    });

    const { customer_id, billing_key } = issueResponse.data;
    // 빌링키가 발급되었습니다! 빌링키를 저장하거나 결제하는 로직을 구성하세요.
  } catch (e) {
    // 빌링키 발급에 실패했습니다.
    res.status(400).send(e);
  }
});

2. 카드 정보 입력받기

빌링키 발급을 위한 카드정보

  • 카드번호

  • 유효기간(년/월)

  • 생년월일 혹은 사업자번호 (법인카드)

  • 비밀번호 앞 두자리

결제하기 버튼 클릭 시 입력 값들로 /billing-keys에 대해 POST요청이 호출되는 예제입니다.

카드 정보를 입력하는 필드들을 다음과 같이 작성합니다. 법인카드(개인명의로 발급된 기명카드 제외)의 경우 birthOrBusinessRegistrationNumber 파라미터에 사업자번호 10자리를 입력하시면 됩니다.

function CardForm(props) {
  const [state, setState] = useState({
    card_number: '',
    expiry_month: '',
    expiry_year: '',
    birth_or_business_registration_number: '',
    password_two_digits: '',
    customer_id: 'CUSTOMER_ID_HERE',
  });
  function handleInputChange(event) {
    const { value, name } = event.target;
    this.setState({
      [name]: value,
    });
  }
  function handleFormSubmit(event) {
    event.preventDefault();
    axios({
      // 1. 빌링키 발급 API 구현하기에서 구현한 URL을 제공해주세요.
      url: MY_SERVER_URL + "/issue-billing",
      method: "post",
      data: { ...state },
    }).then(response => {
      // 구현하신 빌링키 발급 API 응답 대로 결과를 처리하세요!
    });
  }
  return (
    <form onSubmit={handleFormSubmit}>
      <label>
        카드 번호
        <input type="text" name="card_number" value={state.card_number} onChange={handleInputChange} />
      </label>
      <label>
        카드 유효기간(년)
        <input type="text" name="expiry_year" value={state.expiry_year} onChange={handleInputChange} />
      </label>
      <label>
        카드 유효기간(월)
        <input type="text" name="expiry_month" value={state.expiry_month} onChange={handleInputChange} />
      </label>
      <label>
        생년월일 혹은 사업자번호(
        <input type="text" name="birth_or_business_registration_number" value={state.birth_or_business_registration_number} onChange={handleInputChange} />
      </label>
      <label>
        카드 비밀번호 앞 두자리
        <input type="text" name="password_two_digits" value={state.password_two_digits} onChange={handleInputChange} />
      </label>
      <input type="submit" value="결제하기" />
    </form>
  );
}
<!-- 1. 빌링키 발급 API 구현하기에서 구현한 URL을 제공해주세요. -→
<form action="https://MY-SERVER-URL/billing-keys", method="post">
  <label>
    카드 번호
    <input type="text" name="card_number">
  </label>
  <label>
    카드 유효기간(년)
    <input type="text" name="expiry_year">
  </label>
  <label>
    카드 유효기간(월)
    <input type="text" name="expiry_month">
  </label>
  <label>
    생년월일 혹은 사업자번호(법인카드)
    <input type="text" name="birth_or_business_registration_number">
  </label>
  <label>
    카드 비밀번호 앞 두자리
    <input type="text" name="password_two_digits">
  </label>
  <input hidden type="text" value="CUSTOMER_ID_HERE" name="customer_id">
  <input type="submit" value="결제하기">
</form>
⏰
PortOne 개발자센터