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

This guide introduces the D24 Credit Card SDK, aimed at simplifying credit card processing integration. Follow these steps for a quick setup and start leveraging secure payment processing in your application.

This page is limited to the explanation of how to Install, Instantiate and technically understand the SDK. In order to learn how to create a integrate the Cards SDK in the payment flow, please visit Deposits with Cards SDK.

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.

Installation

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.

Retrieving your publicKey

Before instantiating the SDK make sure to retrieve your publicKey. This can be done by: Logging into the Merchant Panel, going into Settings > API Access, under your Read Only Credentials you will find your API Public key.

• npm

import SDK from '@d24/sdk';

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

• umd

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

How to use the constructor SDK(publicKey, options)

Required parameters

| Parameter | Type | Description | Required | Possible values | |---------------------| ------ |----------------------------| -------- |------------------------------| | publicKey | string | Public key provided by D24 | true | - | | options | object | Options | true | - | | options.environment | string | Environment | true | stg, prod | | options.locale | string | Locale | true | en, es, pt |

Possible errors

| Error | Explanation | |-----------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------| | SDK was already instantiate. | The SDK has already been instantiated and you are trying to instantiate it again | | The environment [config.environment] is not supported. | The environment you passed to the constructor is not valid, remember that it only accepts "stg" or "prod" | | You must instantiate D24CreditCardSDK before using SDK methods. | You attempted to use the SDK features without having previously instantiated it. |

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="PAYMENT_TOKEN"
        country="COUNTRY_ISO2"
        onTokenGenerationError={handleTokenErrorCallback}
        onBack={handleGoBack}
        onSuccess={handleSuccess}
        onError={handleError}
/>

Props

| Prop | Type | Description | Required | Example | |-------------------------| -------- |-------------------------------------------------------------------------------------| -------- |----------| | authToken | string | authToken of the merchant | true | | | country | string | Country code | true | CL | | onTokenGenerationError | function | Callback function that will be executed when an error occurs generating token | true | - | | onBack | function | Callback function that will be executed when the user clicks on the Go Back button | true | - | | onSuccess | function | Callback function that will be executed when the payment is successful | true | - | | onError | function | Callback function that will be executed when an error occurs during the payment | true | - |

Callbacks

tokenCallBack

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

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

onTokenGenerationError

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

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

onBack

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

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

onSuccess

This callback function will be executed when the payment is successful.

function handleSuccessCallback(successUrl: string) {
  console.log('Success:', successUrl);
}

onError

This callback function will be executed when an error occurs during the payment.

function handleErrorCallback(errorUrl: string) {
  console.log('Error:', errorUrl);
}

theme

This is a custom version of the theme to give a different style that fits with the client's UI. To customize the colors, you can add a colorSchema object as shown in the example. You don't need to pass the entire object; you can add only the parts you want to change. We created this 3 img to explain how tokens affect the json Payment part URL: https://resources.directa24.com/checkouts/themeExplaning/cc-checkout-payment.jpg

Payment with the select of installments URL: https://resources.directa24.com/checkouts/themeExplaning/cc-checkout-payment-select.jpg

Status view URL: https://resources.directa24.com/checkouts/themeExplaning/cc-checkout-status.jpg

const colorSchema = { //primary button is to complete the action like "Complete payment" and "Continue" { "button": { "primary": { "background": { "default": "#3C5BFC", "hover": "#7087FF", "active": "#2E47C9" }, "text": { "color": { "default": "#FFFFFF" } } }, //this is the link button like "go back" "tertiary": { "text": { "color": { "default": "#3C5BFC" } } } }, //This affect the inputs and select "input": { "background": { "default": "#FFFFFF", "locked": "#E6E7EB" }, "border": { "color": { "default": "#373840", "locked": "#D5D6DE", "active": "#3C5BFC", "error": "#CF3434" } }, "text": { "color": { "label": "#B0B3BF", "input": "#0B1130" "placeholderHint": "#B0B3BF" } } }, //This affects the text that is not related to the inputs. "text": { "color": "#373840" } //Thsi is the background color of the label on the input and select when add some value "label": { "background": "#FFFFFF", } }