# All-in-one

This document provides a detailed technical reference for all components, methods, and properties available in the OneKey Payments Credit Card SDK.

## SDK Constructor

The SDK is instantiated using a constructor that takes a public key and an options object.

```javascript
new SDK(publicKey, options)
```

### Parameters

<table><thead><tr><th width="158.109375">Parameter</th><th width="106.125">Type</th><th width="206.77734375">Description</th><th width="108.12890625">Required</th><th>Possible values</th></tr></thead><tbody><tr><td><code>publicKey</code></td><td><code>string</code></td><td>Your unique public key provided by D24.</td><td><strong>true</strong></td><td><br></td></tr><tr><td><code>options</code></td><td><code>object[]</code></td><td>An object containing configuration options.</td><td><strong>true</strong></td><td><br></td></tr><tr><td><code>options.environment</code></td><td><code>string</code></td><td>Specifies the operating environment.</td><td><strong>true</strong></td><td><code>stg</code>, <code>prod</code></td></tr><tr><td><code>options.locale</code></td><td><code>string</code></td><td>Sets the language for the UI components.</td><td><strong>true</strong></td><td><code>en</code>, <code>es</code>, <code>pt</code></td></tr></tbody></table>

#### Instantiation Errors

Attempting to instantiate or use the SDK incorrectly will result in one of the following errors:

| Error                                                          | Explanation                                                                                                    |
| -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| SDK was already instantiated.                                  | You are trying to call `new SDK(...)` more than once.                                                          |
| The environment \[config.environment] is not supported.        | The value for `options.environment` is not `'stg'` or `'prod'`.                                                |
| You must instantiate D24CreditCardSDK before using SDK methods | You attempted to use a component or method like `CreditCardForm` before the SDK was successfully instantiated. |

## &#x20;`<CreditCardForm />` Component

This is the primary UI component for collecting and processing credit card information.

### Properties

<table><thead><tr><th>Property</th><th>Type</th><th width="301.078125">Description</th><th>Required</th></tr></thead><tbody><tr><td><code>authToken</code></td><td><code>string</code></td><td>The unique <code>checkout_token</code> returned by your call to the Deposit Creation Endpoint.</td><td><strong>true</strong></td></tr><tr><td><code>country</code></td><td><code>string</code></td><td>The two-letter ISO 3166-1 alpha-2 country code.</td><td><strong>true</strong></td></tr><tr><td><code>onSuccess</code></td><td><code>function</code></td><td>Callback function executed when the payment is successful.</td><td><strong>true</strong></td></tr><tr><td><code>onError</code></td><td><code>function</code></td><td>Callback function executed when an error occurs during the payment.</td><td><strong>true</strong></td></tr><tr><td><code>onBack</code></td><td><code>function</code></td><td>Callback function executed when the user clicks the "Go Back" button.</td><td><strong>true</strong></td></tr><tr><td><code>onTokenGenerationError</code></td><td><code>function</code></td><td>Callback function executed when an internal error occurs while generating the payment token.</td><td><strong>true</strong></td></tr><tr><td><code>messages</code></td><td><code>object[]</code></td><td>An object for defining custom text on the payment completion screens.</td><td><strong>false</strong></td></tr></tbody></table>

#### `messages` Object Structure

You can override the default text for the success and error screens by providing a `messages` object.

<table><thead><tr><th width="317.31640625">Property</th><th width="117.61328125">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>messages.paymentComplete.success.title</code></td><td><code>string</code></td><td>The title displayed on the success screen.</td></tr><tr><td><code>messages.paymentComplete.success.description</code></td><td><code>string</code></td><td>The description text displayed on the success screen.</td></tr><tr><td><code>messages.paymentComplete.error.title</code></td><td><code>string</code></td><td>The title displayed on the error screen.</td></tr><tr><td><code>messages.paymentComplete.error.description</code></td><td><code>string</code></td><td>The description text displayed on the error screen.</td></tr></tbody></table>

### Callbacks <a href="#callbacks" id="callbacks"></a>

**`onTokenGenerationError`**

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

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

**`onBack`**

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

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