# 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 PandaBlue 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 @pandablue/sdk ``` **Or you can perform a manual script installation** Alternatively, you can add the PandaBlue.js module directly to your HTML file. Place this script tag in the `` of your document. ```html ``` {% hint style="success" %} #### Ensure to install the latest version on this [link](https://www.npmjs.com/package/@d24/sdk)! {% endhint %} {% 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 '@pandablue/sdk'; // Instantiate the SDK const pandablue = 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 pandablue = new window.pandablue.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
Cover image
GuideFollow detailed, step-by-step instructions and use our code examples to launch your integration with ease.Create a deposit3DSInstallmentsCard-on-file/files/t7pVgrDx3eVmppE0dwbP/pages/a2UAZ88e0UVPrwfPh7B5#deposits-with-fragments-all-in-one
API ReferenceDive into the complete technical specifications for every API endpoint, including all parameters and response formats.Technical detailsCustomize the UIPayment methodsCurrency exchange/files/i7nTPS25IojkETyG8eLc/spaces/VNE8t2FopKfzgQzTjlBb/pages/E1bX77ZsTLXFYmt0BrFx
--- # 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://docs.pandablue.com/guides/deposits/solutions/fragments-sdk/fragments-all-in-one.md?ask= ``` 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.