@d24/sdk v1.0.23

D24 Credit card SDK

Learn how to use our SDK in Javascript to allow integrations with our Deposits APIs

• Getting started
  • Instalation
    • npm
    • UMD
  • How to use
    • Instantiation
    • Tokenaization a credit card
• API
  • constructor(publicKey, options)
    • Parameters
    • Possible errors
  • generateToken({card}): Promise\<{token: string}> Parameters Possible errors
• CreditCardForm

Getting started

Start project

Project dependencies:

• node
• npm
• python
• poeditor

To start this project in a development environment follow the following steps:

1. Run pip install poeditor
2. Inside project folder run npm install and npm run dev.

Instalation

Load D24 as a npm module

Install the D24.js from the npm public registry.

npm install @d24/sdk

or

Manually load the D24.js script

Add the D24.js module as a script in the of your app HTML

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

How to use

Instantiation

First of all, we must instantiate the SDK.

Keep in mind that the SDK can be instantiated only once, and it is a requirement to be able to use all its methods.

In order to instantiate the SDK we need to specify the public key and the environment.

• npm

import SDK from '@d24/sdk';

new SDK('as1i2nxal12bvd', { environment: 'stg' });

• umd

new window.D24.SDK('as1i2nxal12bvd', { environment: 'stg' });

constructor(publicKey, options)

Parameters

Tokenaization a credit card

Once we instantiate the SDK, we can tokenize a card, said token will be used later to send it to the backend and generate the payment through an endpoint.

• npm

import { generateToken } from '@d24/sdk';

const creditCard = {
	number: '4509953566233704',
	holder: 'Juan Perez',
	cvv: '123',
	expirationMonth: '11',
	expirationYear: '25',
};

const response = await generateToken({ card: creditCard });
const token = response.token;

• umd

const creditCard = {
	number: '4509953566233704',
	holder: 'Juan Perez',
	cvv: '123',
	expirationMonth: '11',
	expirationYear: '25',
};

const response = await window.D24.generateToken({ card: creditCard });
const token = response.token;

API

Possible errors

generateToken({card}): Promise\<{token: string}>

This method validates that the card data is correct and generates a token. Although it has validations that occur at the frontend level, it uses a D24 endpoint to be able to generate the token which executes additional validations.

To validate the data structure, the joi library is used, therefore the errors returned at the frontend level are generated with said library.

Parameters

Returns

Possible errors

CreditCardForm

Fonts

Add the following fonts to your project (inside index.html or any main html):

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

Form

After instantiating the SDK, we will be able to use the CreditCardForm component.

<CreditCardForm
    authToken="2NROUtadDbLT67UFZlvTCO9QOJhSyHhF"
    country="CL"
    lang="en"
    tokenCallBack={handleTokenCallback}
    tokenErrorCallBack={handleTokenErrorCallback}
    goBackCallBack={handleGoBack}
/>

Props

Callbacks

tokenCallBack

This callback function will be executed when the token is generated successfully.

function handleTokenCallback(token: string) {
	console.log(token);
}

tokenErrorCallBack

This callback function will be executed when an error occurs generating token.

function handleTokenErrorCallback(error: string) {
	console.log(error);
}

goBackCallBack

This callback function will be executed when the user clicks on the Go Back button.

function handleGoBackCallback() {
	console.log('Go back');
}