Klip Docs
Search…
JavaScript SDK
이 페이지에서는 BApp에서 Klip을 활용하기 위한 App2App JavaScript SDK를 설명합니다.

요구 사항

  • (npm 이용하여 설치하는 경우) node 10 이상 권장

환경 설정

Klip JavaScript SDK는 별도의 가입 절차가 필요 없고 기본적으로 HTTP 통신이 가능한 어느 환경에서도 동작 가능합니다. 다만, 카카오톡 더보기탭의 Klip을 실행하여 사용자의 승인을 받아야하기 때문에 기본적으로 모바일 카카오톡이 설치된 환경에서 호출 해야합니다.

npm을 이용하는 경우

npm install klip-sdk 혹은 yarn add klip-sdk 커맨드를 통해 설치 후 다음과 같이 ES module import 방식으로 사용합니다.
1
import { prepare, request, getResult, getCardList } from 'klip-sdk'
Copied!

직접 파일을 다운 받아 사용하는 경우

다운로드탭에서 Klip JavaScript SDK를 다운받습니다. 다운 받은 파일을 레포지토리에 위치시킨 후 HTML파일에 다음과 같이 스트립트 태그를 삽입합니다.
1
<script src="./lib/klipSDK-2.0.0.min.js"></script>
Copied!
이후 글로벌 네임스페이스에 선언된 klipSDK 변수를 활용하여 각 메소드에 접근합니다.
1
klipSDK.prepare(...)
2
klipSDK.request(...)
3
klipSDK.getResult(...)
4
klipSDK.getCardList(...)
Copied!

API

개요

App2App API 요청은 크게 prepare, request, getResult의 순서로 진행이 됩니다.
  • prepare는 어떠한 요청을 할지 요청을 정의하는 단계로 총 5가지 종류의 요청이 존재
  • request는 함수 호출을 통해 Klip으로 화면이 전환되어 실제 서명 프로세스를 진행
  • getResult는 함수 호출을 통해 결과값을 받고 확인
추가적으로 getCardList는 BApp 개발의 편의를 위해 Klip 사용자의 NFT 목록을 받아올 수 있도록 제공되는 함수입니다. 이 문서 혹은 Klip에 관한 문의는 개발자 포럼을 방문해 도움을 받으십시오.

prepare

App2App API 요청을 준비하고 request key를 받습니다.

prepare.auth

사용자의 정보를 획득하는 요청입니다.
Parameters
Name
Type
Description
bappName
string
사용자에게 표시될 BApp의 이름
successLink
string
사용자 동의과정 완료 후 돌아올 링크 (optional)
failLink
string
사용자 동의과정에서 문제가 발생 할 경우 돌아올 링크 (optional)
Example
1
const bappName = 'my app'
2
const successLink = 'myApp://...'
3
const failLink = 'myApp://...'
4
const res = await prepare.auth({ bappName, successLink, failLink })
5
if (res.err) {
6
// 에러 처리
7
} else if (res.request_key) {
8
// request_key 보관
9
}
Copied!
이 문서 혹은 Klip에 관한 문의는 [개발자 포럼](https://forum.klaytn.com/c/klip-api/28)을 방문해 도움을 받으십시오.

prepare.sendKLAY

사용자의 KLAY를 특정 주소로 전송하는 요청입니다.
Parameters
Name
Type
Description
bappName
string
사용자에게 표시될 BApp의 이름
to
string
받는 사람의 주소
amount
string
보낼 KLAY 수량 (단위: KLAY, 소수점 최대 6자리 허용)
from
string
사용자의 Klip 계정 주소가 from 주소와 일치하는 경우만 진행 (optional)
successLink
string
사용자 동의과정 완료 후 돌아올 링크 (optional)
failLink
string
사용자 동의과정에서 문제가 발생 할 경우 돌아올 링크 (optional)
Example
1
const bappName = 'my app'
2
const from = '0xB21F0285d27beb2373EC...'
3
const to = '0xD8b1dC332...'
4
const amount = '13.2'
5
const successLink = 'myApp://...'
6
const failLink = 'myApp://...'
7
const res = await prepare.sendKLAY({ bappName, from, to, amount, successLink, failLink })
8
if (res.err) {
9
// 에러 처리
10
} else if (res.request_key) {
11
// request_key 보관
12
}
Copied!
이 문서 혹은 Klip에 관한 문의는 [개발자 포럼](https://forum.klaytn.com/c/klip-api/28)을 방문해 도움을 받으십시오.

prepare.sendToken

사용자가 보유한 토큰을 특정 주소로 전송하는 요청입니다.
Parameters
Name
Type
Description
bappName
string
사용자에게 표시될 BApp의 이름
to
string
받는 사람의 주소
amount
string
보낼 토큰 수량 (단위: 토큰의 default 단위, 소수점 최대 6자리 허용)
contract
string
토큰 컨트랙트 주소
from
string
사용자의 Klip 계정 주소가 from 주소와 일치하는 경우만 진행 (optional)
successLink
string
사용자 동의과정 완료 후 돌아올 링크 (optional)
failLink
string
사용자 동의과정에서 문제가 발생 할 경우 돌아올 링크 (optional)
Example
1
const bappName = 'my app'
2
const from = '0xB21F0285d27beb2373EC...'
3
const to = '0xD8b1dC332...'
4
const amount = '10.123'
5
const contract = '0x813FB7677BbBAA...'
6
const successLink = 'myApp://...'
7
const failLink = 'myApp://...'
8
const res = await prepare.sendToken({ bappName, from, to, amount, contract, successLink, failLink })
9
if (res.err) {
10
// 에러 처리
11
} else if (res.request_key) {
12
// request_key 보관
13
}
Copied!
이 문서 혹은 Klip에 관한 문의는 [개발자 포럼](https://forum.klaytn.com/c/klip-api/28)을 방문해 도움을 받으십시오.

prepare.sendCard

사용자가 보유한 카드(NFT)를 특정 주소로 전송하는 요청입니다.
Parameters
Name
Type
Description
bappName
string
사용자에게 표시될 BApp의 이름
to
string
받는 사람의 주소
id
string
NFT id
contract
string
NFT 컨트랙트 주소
from
string
사용자의 Klip 계정 주소가 from 주소와 일치하는 경우만 진행 (optional)
successLink
string
사용자 동의과정 완료 후 돌아올 링크 (optional)
failLink
string
사용자 동의과정에서 문제가 발생 할 경우 돌아올 링크 (optional)
Example
1
const res = await prepare.sendCard({ bappName, from, to, id, contract, successLink, failLink })
2
if (res.err) {
3
setErrorMsg(res.err)
4
} else {
5
setRequestKey(res.request_key)
6
}
Copied!
이 문서 혹은 Klip에 관한 문의는 [개발자 포럼](https://forum.klaytn.com/c/klip-api/28)을 방문해 도움을 받으십시오.

prepare.executeContract

사용자가 특정 컨트랙트의 함수를 실행하도록 하는 요청입니다.
Parameters
Name
Type
Description
bappName
string
사용자에게 표시될 BApp의 이름
to
string
컨트랙트의 주소
value
string
컨트랙트 실행하면서 같이 보낼 KLAY 수량 (단위: peb)
abi
string
실행할 함수의 abi
params
string
실행할 함수의 인자 목록
from
string
사용자의 Klip 계정 주소가 from 주소와 일치하는 경우만 진행 (optional)
successLink
string
사용자 동의과정 완료 후 돌아올 링크 (optional)
failLink
string
사용자 동의과정에서 문제가 발생 할 경우 돌아올 링크 (optional)
Example
1
const bappName = 'my app'
2
const from = '0xB21F0285d27beb2373EC...'
3
const to = '0xD8b1dC332...'
4
const value = '800000000'
5
const abi = "{\"constant\":false,\"inputs\":[{\"name\":\"tokenId\",\"type\":\"uint256\"}],\"name\":\"buyCard\",\"outputs\":[],\"payable\":true,\"stateMutability\":\"payable\",\"type\":\"function\"}"
6
const params = "[\"2829\"]"
7
const successLink = 'myApp://...'
8
const failLink = 'myApp://...'
9
const res = await prepare.executeContract({ bappName, from, to, value, abi, params, successLink, failLink })
10
if (res.err) {
11
// 에러 처리
12
} else if (res.request_key) {
13
// request_key 보관
14
}
Copied!
이 문서 혹은 Klip에 관한 문의는 [개발자 포럼](https://forum.klaytn.com/c/klip-api/28)을 방문해 도움을 받으십시오.

request

Deep Link를 통해 Klip에 인증 또는 서명을 요청합니다. 만약, 실행 중인 스마트폰 기기에 KakaoTalk이 설치되어 있지 않으면, 자동으로 AppStore의 KakaoTalk 다운로드 화면으로 이동됩니다. prepare 요청을 통해 받은 request key를 인자로 받습니다. QR code를 이용한 request 스텝 처리는 QR code 예제 항목을 참조하십시오.
Parameters
Name
Type
Description
requestKey
String
요청 번호
onUnsupportedEnvironment
Function
모바일 환경이 아닌 경우 실행 할 콜백 함수 (optional)
Example
1
request('b37f873d-32ce-4d5d-b72e-08d528e7fb8e', () => alert('모바일 환경에서 실행해주세요'))
Copied!
이 문서 혹은 Klip에 관한 문의는 [개발자 포럼](https://forum.klaytn.com/c/klip-api/28)을 방문해 도움을 받으십시오.

getResult

App2App API 요청에 대한 결과를 확인합니다.
Parameters
Name
Type
Description
requestKey
String
요청 번호
Example
1
getResult('b37f873d-32ce-4d5d-b72e-08d528e7fb8e')
Copied!
이 문서 혹은 Klip에 관한 문의는 [개발자 포럼](https://forum.klaytn.com/c/klip-api/28)을 방문해 도움을 받으십시오.

getCardList

사용자의 카드(NFT) 보유 목록을 가져옵니다. 조회하고자 하는 NFT 컨트랙트 주소를 알고 있어야 하며, Klip에서 지원하는 컨트랙트만 가능합니다.
Parameters
Name
Type
Description
contract
String
조회할 카드의 컨트랙트 주소
eoa
String
조회할 사용자 주소
cursor
String
조회할 커서값입니다. 만약, 조회할 카드의 보유목록이 100개 이상이면, 다음 100개 정보를 받을 수 있습니다.(optional)
Example
1
const contract = '0xB21F0285d27beb2373EC...'
2
const eoa = '0xD8b1dC332...'
3
const cursor = ''
4
getCardList({ contract, eoa, cursor })
Copied!
이 문서 혹은 Klip에 관한 문의는 [개발자 포럼](https://forum.klaytn.com/c/klip-api/28)을 방문해 도움을 받으십시오.

Error Code

Http Status
Error Code
Description
이 문서 혹은 Klip에 관한 문의는 [개발자 포럼](https://forum.klaytn.com/c/klip-api/28)을 방문해 도움을 받으십시오.
Last modified 2mo ago