search
Document ValidationsPayment Methods

Fragments (all-in-one)

This guide will provide you with everything you need to integrate our powerful, all-in-one payment solution into your application for a seamless native checkout experience.

hashtag
Getting Started

Integrating the Fragments SDK is a straightforward process. Follow these initial steps to get up and running.

1

hashtag
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.

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 <head> of your document.

<script
  type="module"
  src="https://pandabluesdk.s3.amazonaws.com/releases/pandablue-1.0.21.es.js"
></script>
circle-check

hashtag
Ensure to install the latest version on this linkarrow-up-right!

2

hashtag
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.

circle-info

hashtag
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.

Here’s how to instantiate the SDK in your code:

If you used NPM:

import SDK from '@pandablue/sdk';

// Instantiate the SDK
const pandablue = new SDK('YOUR_PUBLIC_KEY', { environment: 'stg', locale: 'en' });

If you used the manual script:

// Instantiate the SDK from the global window object
const pandablue = new window.pandablue.SDK('YOUR_PUBLIC_KEY', { environment: 'stg', locale: 'en' });

Environments:

  • stg: Use for testing and development (Staging).

  • prod: Use for your live application (Production).

3

hashtag
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.

hashtag
Basic Example

Here is a simple example of how to render the form:

// Make sure you have instantiated the SDK before this step
<CreditCardForm
  authToken="YOUR_CHECKOUT_TOKEN"
  country="BR"
  onSuccess={handlePaymentSuccess}
  onError={handlePaymentError}
  onBack={handleGoBack}
  onTokenGenerationError={handleTokenError}
  messages={handleMessages}
/>

4

hashtag
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.

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.

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.

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.

function handleTokenError(error) {
  console.error('Could not generate token:', error);
  // This is often a configuration or setup issue.
}

5

hashtag
Message customization

You can customize the messages displayed on the final payment screens using the messages property.

hashtag
Example

<CreditCardForm
  // ... other properties
  messages={{
    paymentComplete: {
      success: {
        title: "Payment Received!",
        description: "Thank you for your purchase."
      },
      error: {
        title: "Payment Failed",
        description: "Something went wrong. Please try again."
      }
    }
  }}
/>

This concludes the API Guide. For a detailed list of all parameters, properties, and error codes, please consult the API Reference document ➡️ Fragments (all-in-one)

6

hashtag
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[] ➡️ paintbrushCustomize the UI

hashtag
Build the solution

Cover

Guide

Follow detailed, step-by-step instructions and use our code examples to launch your integration with ease.

Create a deposit

3DS

Installments

Card-on-file

Cover

API Reference

Dive into the complete technical specifications for every API endpoint, including all parameters and response formats.

Technical details

Customize the UI

Payment methods

Currency exchange

PreviousFragments (Lite)NextOneShot

Last updated

Was this helpful?