# 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-fileGuides.pngBroken link
API ReferenceDive into the complete technical specifications for every API endpoint, including all parameters and response formats.Technical detailsCustomize the UIPayment methodsCurrency exchangeAPI Reference.pngAll-in-one