> 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/guides/deposits/solutions/fragments-sdk/fragments-all-in-one.md). # Fragments (all-in-one) ### Getting Started Integrating the Fragments SDK is a straightforward process.\ Follow these initial steps to get up and running. {% stepper %} {% step %} ### Installation You can add the OneKey Payments SDK to your project in two ways: **Using NPM (Recommended)** For projects using a package manager, install the SDK from the npm public registry. ```sh npm install @d24/sdk ``` **Or you can perform a manual script installation** Alternatively, you can add the D24.js module directly to your HTML file. Place this script tag in the `` of your document. ```html ``` {% endstep %} {% step %} ### Initialization Before you can use any of the SDK's features, you must instantiate it. This step configures the SDK for your specific account and environment. **Important:** The SDK should only be instantiated once when your application loads. To instantiate, you'll need your `publicKey` and the desired `environment`. {% hint style="info" %} ## **How to find your `publicKey`** 1. Log into your **Merchant Panel**. 2. Navigate to **Settings > API Access**. 3. Under **Read Only Credentials**, you will find your **API Public key**. {% endhint %} Here’s how to instantiate the SDK in your code: **If you used NPM:** {% code overflow="wrap" %} ```javascript import SDK from '@d24/sdk'; // Instantiate the SDK const d24 = new SDK('YOUR_PUBLIC_KEY', { environment: 'stg', locale: 'en' }); ``` {% endcode %} **If you used the manual script:** {% code overflow="wrap" %} ```javascript // Instantiate the SDK from the global window object const d24 = new window.D24.SDK('YOUR_PUBLIC_KEY', { environment: 'stg', locale: 'en' }); ``` {% endcode %} **Environments:** * `stg`: Use for testing and development (Staging). * `prod`: Use for your live application (Production). {% endstep %} {% step %} ### Implementing the Credit Card Form Once the SDK is instantiated, you can render the `CreditCardForm` component. This component handles the entire card input and payment submission process securely. The component requires a few key properties to function: * `authToken`: A unique token generated from your backend by the Deposit Creation Endpoint. * `country`: The two-letter country iso-code (e.g., "BR"). * Callback functions to handle different outcomes of the payment process. #### Basic Example Here is a simple example of how to render the form: ```javascript // Make sure you have instantiated the SDK before this step ``` {% endstep %} {% step %} ### Handling Callbacks Callbacks are essential for managing the payment flow and providing feedback to your users. **`onSuccess`** This function is called when a payment is completed successfully. ```javascript function handlePaymentSuccess() { console.log('Payment was successful!'); // e.g., Redirect to a success page or show a success message } ``` **`onError`** This function is called if an error occurs during the payment process. ```javascript function handlePaymentError(error) { console.error('Payment failed:', error); // e.g., Display an error message to the user } ``` **`onBack`** This function is executed when the user clicks the "Go Back" button within the form. ```javascript function handleGoBack() { console.log('User clicked go back.'); // e.g., Navigate to the previous step in your checkout flow } ``` **`onTokenGenerationError`** This function is called if there's an issue with generating the secure token before the payment is attempted. ```javascript function handleTokenError(error) { console.error('Could not generate token:', error); // This is often a configuration or setup issue. } ``` {% endstep %} {% step %} ### Message customization You can customize the messages displayed on the final payment screens using the `messages` property. #### Example ```javascript ``` This concludes the API Guide.\ For a detailed list of all parameters, properties, and error codes, please consult the **API Reference** document :arrow\_right: Fragments (all-in-one) {% endstep %} {% step %} ### Customize the look and feel You fully customize the credit card form to match you website's user interface!\ Visit the API Reference to learn how to setup the **`colorSchema`**`[]` :arrow\_right: Customize the UI {% endstep %} {% endstepper %} ### Build the solution
GuideFollow detailed, step-by-step instructions and use our code examples to launch your integration with ease.Create a deposit3DSInstallmentsCard-on-file/files/ajqYINZDdtGuvSs8CTZj
API ReferenceDive into the complete technical specifications for every API endpoint, including all parameters and response formats.Technical detailsCustomize the UIPayment methodsCurrency exchange/files/5ZJod2bYyhZRv4B2z6qL