# JavaScript SDK

## Prerequisites

* (When using npm) node 10 or higher

## Environment Setup

Klip JavaScript SDK doesn't require a separate registration process and works in any environments where HTTP communication is possible. But since user's consent is received using Klip located in the More\[…] tab in the mobile app KakaoTalk, you need to have KakaoTalk installed to make the requests.

### When using npm

Install using the `npm install klip-sdk` or `yarn add klip-sdk` command. It should be imported as an ES module as shown below:

```javascript
import { prepare, request, getResult, getCardList } from 'klip-sdk'
```

### When downloading the file directly

Download Klip JavaScript SDK in the [Download](/a2a-sdk/a2a-sdk-download.md) tab. Place the file in the repository and insert a script tag in the HTML file as shown below:

```html
<script src="./lib/klipSDK-2.0.0.min.js"></script>
```

Access each method using the klipSDK variable declared in the global namespace.

```javascript
klipSDK.prepare(...)
klipSDK.request(...)
klipSDK.getResult(...)
klipSDK.getCardList(...)
```

## API

### Overview

App2App API requests are made in the order: `prepare`, `request`, and `getResult`.

* `prepare` is the step in which requests (from of a total of five) are defined
* `request` is the step in which the function is called and the signing takes place on Klip
* `getResult` is the step in which the result is returned from the function call

In addition, `getCardList` is a function for the convenience of BApp developers that returns a list of NFTs of Klip users.\
If you need help with this document or Klip in general, please visit our [Developer Forum](https://forum.klaytn.com/c/klip-api/28).

<br>

### prepare

Prepares a App2App API request and obtains a request key.

### prepare.auth

Obtains user information.

**Parameters**

| Name        | Type   | Description                                                                  |
| ----------- | ------ | ---------------------------------------------------------------------------- |
| bappName    | string | The name of the BApp displayed to users                                      |
| successLink | string | (optional) The return link after obtaining user consent                      |
| failLink    | string | (optional) The return link in case of a problem while obtaining user consent |

**Example**

```javascript
const bappName = 'my app'
const successLink = 'myApp://...'
const failLink = 'myApp://...'
const res = await prepare.auth({ bappName, successLink, failLink })
if (res.err) {
  // Handle error
} else if (res.request_key) {
  // Store request_key
}
```

\
If you need help with this document or Klip in general, please visit our \[Developer Forum]\(<https://forum.klaytn.com/c/klip-api/28>).

### prepare.sendKLAY

A request to send a user's KLAY to a certain address.

**Parameters**

| Name        | Type   | Description                                                                     |
| ----------- | ------ | ------------------------------------------------------------------------------- |
| bappName    | string | The name of the BApp displayed to users                                         |
| to          | string | The address of the recipient                                                    |
| amount      | string | The amount of KLAY to send (Unit: KLAY, up to the 6th decimal place)            |
| from        | string | (optional) To check if the Klip account address matches with the `from` address |
| successLink | string | (optional) The return link after obtaining user consent                         |
| failLink    | string | (optional) The return link in case of a problem while obtaining user consent    |

**Example**

```javascript
const bappName = 'my app'
const from = '0xB21F0285d27beb2373EC...'
const to = '0xD8b1dC332...'
const amount = '13.2'
const successLink = 'myApp://...'
const failLink = 'myApp://...'
const res = await prepare.sendKLAY({ bappName, from, to, amount, successLink, failLink })
if (res.err) {
  // Handle error
} else if (res.request_key) {
  // Store request_key
}
```

\
If you need help with this document or Klip in general, please visit our \[Developer Forum]\(<https://forum.klaytn.com/c/klip-api/28>).

### prepare.sendToken

A request to send a user's tokens to a certain address.

**Parameters**

| Name        | Type   | Description                                                                                     |
| ----------- | ------ | ----------------------------------------------------------------------------------------------- |
| bappName    | string | The name of the BApp displayed to users                                                         |
| to          | string | The address of the recipient                                                                    |
| amount      | string | The amount of tokens to send (Unit: The default unit of the token, up to the 6th decimal place) |
| contract    | string | The address of the token contract                                                               |
| from        | string | (optional) To check if the Klip account address matches with the `from` address                 |
| successLink | string | (optional) The return link after obtaining user consent                                         |
| failLink    | string | (optional) The return link in case of a problem while obtaining user consent                    |

**Example**

```javascript
const bappName = 'my app'
const from = '0xB21F0285d27beb2373EC...'
const to = '0xD8b1dC332...'
const amount = '10.123'
const contract = '0x813FB7677BbBAA...'
const successLink = 'myApp://...'
const failLink = 'myApp://...'
const res = await prepare.sendToken({ bappName, from, to, amount, contract, successLink, failLink })
if (res.err) {
  // Handle error
} else if (res.request_key) {
  // Store request_key
}
```

\
If you need help with this document or Klip in general, please visit our \[Developer Forum]\(<https://forum.klaytn.com/c/klip-api/28>).

### prepare.sendCard

A request to send a user's NFT to a certain address.

**Parameters**

| Name        | Type   | Description                                                                     |
| ----------- | ------ | ------------------------------------------------------------------------------- |
| bappName    | string | The name of the BApp displayed to users                                         |
| to          | string | The address of the recipient                                                    |
| id          | string | ID of the NFT                                                                   |
| contract    | string | The address of the NFT contract                                                 |
| from        | string | (optional) To check if the Klip account address matches with the `from` address |
| successLink | string | (optional) The return link after obtaining user consent                         |
| failLink    | string | (optional) The return link in case of a problem while obtaining user consent    |

**Example**

```javascript
const res = await prepare.sendCard({ bappName, from, to, id, contract, successLink, failLink })
if (res.err) {
  setErrorMsg(res.err)
} else {
  setRequestKey(res.request_key)
}
```

\
If you need help with this document or Klip in general, please visit our \[Developer Forum]\(<https://forum.klaytn.com/c/klip-api/28>).

### prepare.executeContract

A request for the user to execute the functino of a certain contract.

**Parameters**

| Name        | Type   | Description                                                                     |
| ----------- | ------ | ------------------------------------------------------------------------------- |
| bappName    | string | The name of the BApp displayed to users                                         |
| to          | string | The address of the contract                                                     |
| value       | string | Amount of KLAY to be sent during contract execution (unit: peb)                 |
| abi         | string | ABI of the function to execute                                                  |
| params      | string | List of parameters of the function to execute                                   |
| from        | string | (optional) To check if the Klip account address matches with the `from` address |
| successLink | string | (optional) The return link after obtaining user consent                         |
| failLink    | string | (optional) The return link in case of a problem while obtaining user consent    |

**Example**

```javascript
const bappName = 'my app'
const from = '0xB21F0285d27beb2373EC...'
const to = '0xD8b1dC332...'
const value = '800000000'
const abi = "{\"constant\":false,\"inputs\":[{\"name\":\"tokenId\",\"type\":\"uint256\"}],\"name\":\"buyCard\",\"outputs\":[],\"payable\":true,\"stateMutability\":\"payable\",\"type\":\"function\"}"
const params =  "[\"2829\"]"
const successLink = 'myApp://...'
const failLink = 'myApp://...'
const res = await prepare.executeContract({ bappName, from, to, value, abi, params, successLink, failLink })
if (res.err) {
  // Handle error
} else if (res.request_key) {
  // Store request_key 
}
```

\
If you need help with this document or Klip in general, please visit our \[Developer Forum]\(<https://forum.klaytn.com/c/klip-api/28>).

### Klip request

Request authentification or signature using deep link. If the device doesn't have KakaoTalk installed, or the version of the installed KakaoTalk doesn't support Klip, it redirects automatically to the download page on Google Play. You need to pass the request key obtained during the **prepare** step as a parameter. To implement the request step using QR code, please refer to [QR Code Tutorial](/rest-api/rest-api-a2a.md#request-qr-code).

**Parameters**

| Name                     | Type     | Description                                                             |
| ------------------------ | -------- | ----------------------------------------------------------------------- |
| requestKey               | String   | Request number                                                          |
| onUnsupportedEnvironment | Function | (optional) The callback function to execute in a non-mobile environment |

**Example**

```javascript
request('b37f873d-32ce-4d5d-b72e-08d528e7fb8e', () => alert('Please execute in a mobile environment'))
```

\
If you need help with this document or Klip in general, please visit our \[Developer Forum]\(<https://forum.klaytn.com/c/klip-api/28>).

### getResult

Returns the response of an App2App API request.

**Parameters**

| Name       | Type   | Description    |
| ---------- | ------ | -------------- |
| requestKey | String | Request number |

**Example**

```javascript
getResult('b37f873d-32ce-4d5d-b72e-08d528e7fb8e')
```

\
If you need help with this document or Klip in general, please visit our \[Developer Forum]\(<https://forum.klaytn.com/c/klip-api/28>).

### getCardList

Returns a list of a user's Cards (NFTs). You have to know the contract address of the NFTs that you want to return. It must be a contract supported on Klip.

**Parameters**

| Name     | Type   | Description                                                                                                             |
| -------- | ------ | ----------------------------------------------------------------------------------------------------------------------- |
| contract | String | The contract address of the Cards to retrieve                                                                           |
| eoa      | String | Address of the user to retrieve                                                                                         |
| cursor   | String | (optional) The pointer after which the next request will retrieve the next 100 items if the number of Cards exceeds 100 |

**Example**

```javascript
const contract = '0xB21F0285d27beb2373EC...'
const eoa = '0xD8b1dC332...'
const cursor = ''
getCardList({ contract, eoa, cursor })
```

\
If you need help with this document or Klip in general, please visit our \[Developer Forum]\(<https://forum.klaytn.com/c/klip-api/28>).

## Error Code

| Http Status | Error Code | Description                                    |
| ----------- | ---------- | ---------------------------------------------- |
| -           | -          | Same as [Klip REST API Error Code](/basics.md) |

\
If you need help with this document or Klip in general, please visit our \[Developer Forum]\(<https://forum.klaytn.com/c/klip-api/28>).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://en.docs.klipwallet.com/a2a-sdk/a2a-sdk-js.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.