# 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 %}


---

# 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://apidocs.onekeypayments.com/deposits-tools/cards-sdk/with-user-interface.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.