클라이언트 연동breadcrumbSDK 연동

SDK 연동 가이드

SDK를 이용한 클라이언트 연동 방법을 설명해요.

SDK란?

다날 결제 SDK는 결제 연동을 보다 빠르고 간편하게 구현할 수 있도록 도와주는 도구예요.
SDK를 통해 결제창 혹은 Billing 등록창 호출과 사용자 인증 흐름을 쉽게 구현할 수 있어요.

1. SDK 불러오기

다날 결제 SDK는 아래 두 가지 방식 중 하나를 선택하여 연동할 수 있어요.
프로젝트 환경에 따라 편하신 방법을 선택해 주세요.

다날 결제 SDK를 연동하는 두 가지 방식
1. HTML <script> 태그를 사용하기
간단한 HTML 기반 페이지에서 빠르게 연동할 때 이 방식을 사용하면 좋아요.
2. npm 모듈을 사용하기
React.js 등 Frontend Framework와 함께 사용하는 프로젝트에 추천드려요.

HTML 파일의 <head> 또는 <body> 태그 안에 아래 코드를 추가해 주세요.

<script src="https://static.danalpay.com/d1/sdk/index.js"></script>
<script>              
    const danalPayments = DanalPayments('CL_TEST_I4d8FWYSSKl-42F7y3o9g_7iexSCyHbL8qthpZxPnpY=');
    danalPayments.requestPayment({
      // ...params
    });               
</script>

이 스크립트를 추가하면, 브라우저의 window 전역 객체에 DanalPayments라는 객체에 접근할 사용할 수 있어요.
이 객체를 통해 이후 결제창 호출을 할 수 있어요.

2. SDK 초기화

결제를 요청하기 전에 SDK를 초기화하는 과정이 필요해요.
사전에 발급받은 Client Key를 사용해서 DanalPayments 인스턴스를 만들어요.

import {  loadDanalPaymentsSDK  } from "@danalpay/javascript-sdk";

// async/await
const danalPayments = await loadDanalPaymentsSDK({ clientKey: "CL_TEST_I4d8FWYSSKl-42F7y3o9g_7iexSCyHbL8qthpZxPnpY=" })
danalPayments.requestPayment({
  // ...params
});

// Promise
loadDanalPaymentsSDK({ clientKey: "CL_TEST_I4d8FWYSSKl-42F7y3o9g_7iexSCyHbL8qthpZxPnpY=" })
  .then((danalPayments) => {
      danalPayments.requestPayment({
      // ...params
  });
})

Client Key가 없으신가요? 테스트 단계라면 샌드박스에서 테스트 키를 제공해요.
테스트와 계약 체결까지 모두 완료하셨다면 영업 담당자를 통해 연동에 필요한 키를 받을 수 있어요.

💡다음 단계: 결제창 호출

SDK 연동이 끝났다면, 결제창을 호출 할 수 있어요
결제창을 성공적으로 호출하면, 사용자가 결제창에서 결제를 위한 인증을 진행할 차례에요
사용자는 선택한 결제수단으로 결제를 완료하기 위해 아래 인증 단계를 거쳐야 해요

  • 휴대폰결제: 본인인증(SMS, VACS, ACS, 삼성페이 인증 등)
  • 신용카드: 카드사 인증(앱카드, 비밀번호 등)
  • 간편결제: 간편결제사 인증
  • 계좌이체: 은행 계좌 인증

자세한 내용은 요청 사용자 인증 결과 처리 가이드를 확인해 주세요.

※ 일반 결제창이 연동이 아닌 Billing(자동결제) 연동은 Billing 등록창 호출 가이드를 이어서 확인해주세요

맨 위로