With User Interface

Learn the technical aspects about our Cards SDK, in order to have the ultimate native checkout experience.

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.

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 top of your app HTML

<script
	type="module"
	src="https://d24sdk.s3.amazonaws.com/releases/d24-1.0.21.es.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' });

• es

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

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

<CreditCardForm
    authToken="2NROUtadDbLT67UFZlvTCO9QOJhSyHhF"
    country="CL"
    onTokenGenerationError={handleTokenErrorCallback}
    onBack={handleGoBack}
/>

Properties

Property	Type	Description	Required	Example
authToken	string	The checkout_token returned by the Deposit Creation Endpoint.	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
messages	object	Object for defining custom messages	false

messages[] Object

Property	Type	Description	Required
messages.paymentComplete.success.title	string	Title displayed in payment complete success screen.	false
messages.paymentComplete.success.description	string	Description displayed in payment complete success screen.	false
messages.paymentComplete.error.title	string	Title displayed in payment complete error screen.	false
messages.paymentComplete.error.description	string	Description displayed in payment complete error screen.	false

Callbacks

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');
}

Deposit Creation

To learn who to use the Cards SDK With User Interface within the Deposit Creation, please visit de page below of our Knowledge Base 😎

With User Interface