> For the complete documentation index, see [llms.txt](https://apidocs.onekeypayments.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apidocs.onekeypayments.com/deposits-tools/cards-sdk/with-user-interface.md).

# With User Interface

### Getting started

This guide introduces the D24 Credit Card SDK, aimed at simplifying credit card processing integration. Follow these steps for a quick setup and start leveraging secure payment processing in your application.

{% hint style="info" %}
This page is limited to the explanation of how to Install, Instantiate and technically understand the SDK.\
In order to learn how to create a integrate the Cards SDK in the payment flow, please visit [Deposits with Cards SDK](broken://pages/KtV3jRp0Oid6MvGEguvF)**.**
{% endhint %}

### Installation

#### **Load D24 as a npm module**

Install the D24.js from the npm public registry.

```bash
npm install @d24/sdk
```

or

#### **Manually load the D24.js script**

Add the D24.js module as a script in the top of your app HTML

```html
<script
	type="module"
	src="https://d24sdk.s3.amazonaws.com/releases/d24-1.0.21.es.js"
></script>
```

### How to use

#### **Instantiation**

First of all, we must instantiate the SDK.

Keep in mind that the SDK can be instantiated only once, and it is a requirement to be able to use all its methods.

In order to instantiate the SDK we need to specify the **public key** and the **environment**.

{% hint style="info" %}

#### Retrieving your `publicKey`

Before instantiating the SDK make sure to retrieve your publicKey.\
This can be done by: Logging into the Merchant Panel, going into **Settings** > **API Access**, under your **Read Only Credentials** you will find your **API Public key**.
{% endhint %}

* npm

```javascript
import SDK from '@d24/sdk';

new SDK('as1i2nxal12bvd', { environment: 'stg' });
```

* es

```javascript
new window.D24.SDK('as1i2nxal12bvd', { environment: 'stg' });
```

### How to use the constructor `SDK(publicKey, options)` <a href="#constructorpublickey-options" id="constructorpublickey-options"></a>

***Required parameters***

<table><thead><tr><th width="212">Parameter</th><th>Type</th><th>Description</th><th>Required</th><th>Possible values</th></tr></thead><tbody><tr><td>publicKey</td><td>string</td><td>Public key provided by us</td><td>true</td><td>-</td></tr><tr><td>options</td><td>object</td><td>Options</td><td>true</td><td>-</td></tr><tr><td>options.environment</td><td>string</td><td>Environment</td><td>true</td><td><code>stg</code>, <code>prod</code></td></tr><tr><td>options.locale</td><td>string</td><td>Locale</td><td>true</td><td><code>en</code>, <code>es</code>, <code>pt</code></td></tr></tbody></table>

**Possible errors**

| Error                                                          | Explanation                                                                                                   |
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| SDK was already instantiated.                                  | The SDK has already been instantiated and you are trying to instantiate it again                              |
| The environment \[config.environment] is not supported.        | The environment you passed to the constructor is not valid, remember that it only accepts "`stg`" or "`prod`" |
| You must instantiate D24CreditCardSDK before using SDK methods | You attempted to use the SDK features without having previously instantiated it.                              |

## CreditCardForm

After instantiating the SDK, you will be able to use the **CreditCardForm** component.

```typescript
<CreditCardForm
    authToken="2NROUtadDbLT67UFZlvTCO9QOJhSyHhF"
    country="CL"
    onTokenGenerationError={handleTokenErrorCallback}
    onBack={handleGoBack}
/>
```

### Properties

<table><thead><tr><th width="234">Property</th><th>Type</th><th width="305">Description</th><th>Required</th><th>Example</th><th>Default</th><th>Possible values</th></tr></thead><tbody><tr><td><code>authToken</code></td><td>string</td><td>The <code>checkout_token</code> returned by the Deposit Creation Endpoint.</td><td>true</td><td></td><td></td><td></td></tr><tr><td><code>country</code></td><td>string</td><td>Country code</td><td>true</td><td>CL</td><td></td><td></td></tr><tr><td><code>onTokenGenerationError</code></td><td>function</td><td>Callback function that will be executed when an error occurs generating token</td><td>true</td><td>-</td><td></td><td></td></tr><tr><td><code>onBack</code></td><td>function</td><td>Callback function that will be executed when the user clicks on the Go Back button</td><td>true</td><td>-</td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>

### Callbacks

#### `onTokenGenerationError`

This callback function will be executed when an error occurs generating token.

```typescript
function handleTokenErrorCallback(error: string) {
	console.log(error);
}
```

#### `onBack`

This callback function will be executed when the user clicks on the Go Back button.

```typescript
function handleGoBackCallback() {
	console.log('Go back');
}
```

## Deposit Creation

To learn who to use the Cards SDK With User Interface within the Deposit Creation, please visit de page below of our Knowledge Base :sunglasses:

{% content-ref url="/pages/HaFdbXh6mKPwYB0ARkS7" %}
[With User Interface](/knowledge-base/deposits-with-cards-sdk/with-user-interface.md)
{% endcontent-ref %}