Fragments (Lite)

Simplify your PCI compliance by using our headless JavaScript SDK. It securely captures credit card details within your application and exchanges them for a safe, single-use token. You then use this token to process payments via our backend API, ensuring sensitive data never transits or is stored on your servers.

Installation

Before you can use the SDK, you need to add it to your project. You have two options:

Using npm (Recommended for modern web development)

If you are using a package manager like npm or yarn, you can add the SDK to your project's dependencies.

npm install @d24/sdk-minimal

Or you can perform a manual script installation

For simpler projects or direct HTML integration, you can include the SDK using a <script> tag in your HTML file. Make sure to place it in the <head> section of your document.

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

Initializing the SDK

Once installed, you must initialize the SDK with your unique public key and specify the environment you are working in. This step is mandatory and must be completed before you can call any other methods.

You will receive your public key from OKP. The environment should be set to 'stg' for testing and development, and 'prod' for your live application.

If you installed via npm:

import SDK from '@d24/sdk-minimal';

// Initialize the SDK once when your application loads.
new SDK('YOUR_PUBLIC_KEY', { environment: 'stg' });

If you are using the manual script:

// The SDK will be available on the global window object.
new window.D24.SDK('YOUR_PUBLIC_KEY', { environment: 'stg' });

Important: The SDK is designed to be a singleton, meaning it should only be instantiated once during your application's lifecycle. Attempting to initialize it more than once will result in an error.

Generate a secure card token

The primary purpose of this SDK is to convert raw credit card data into a single-use, secure token.

You will first collect the card information from your user through a form on your application. Then, you pass this data to the generateToken method. The SDK will validate the data and communicate with OKP servers to create the token.

The creditCard[] object requires the following fields:

number: The credit card number.
holder: The cardholder's full name.
cvv: The 3 or 4-digit security code.
expirationMonth: The two-digit expiration month (e.g., '05').
expirationYear: The two-digit expiration year (e.g., '28').

Here is how you generate a token:

// This is an asynchronous function, so you'll need to use async/await or .then()

async function processPayment(cardDetails) {
  try {
    // Assuming 'cardDetails' is an object with the required card fields
    const response = await window.D24.generateToken({ card: cardDetails });

    // The secure token
    const token = response.token;

    // Now, send this token to your backend server to make the API call
    // to finalize the deposit.
    console.log('Token created:', token);
    // sendTokenToServer(token);

  } catch (error) {
    // Handle any validation or network errors
    console.error('Error generating token:', error.message);
  }
}

// Example usage:
const myCardInfo = {
  number: '4509953566233704',
  holder: 'Juan Perez',
  cvv: '123',
  expirationMonth: '11',
  expirationYear: '25',
};

processPayment(myCardInfo);