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.

Getting Started

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

Installation

You can add the D24 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 @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 <head> of your document.

<script
  type="module"
  src="https://d24sdk.s3.amazonaws.com/releases/d24-1.0.21.es.js"
></script>

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.

How to find your `publicKey`

Log into your Merchant Panel.
Navigate to Settings > API Access.
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 '@d24/sdk';

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

If you used the manual script:

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

Environments:

stg: Use for testing and development (Staging).
prod: Use for your live application (Production).

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:

// 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}
/>

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

Message customization

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

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)

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

Build the solution

Guide

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

API Reference

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

PreviousFragments (Lite)NextOneShot

Last updated 15 days ago

Was this helpful?