Ionic SDK Lite
The Tonder Ionic SDK Lite is a solution for integrating our system into your mobile application. This solution ensures PCI DSS (Payment Card Industry Data Security Standard) by securely collecting and tokenizing sensitive data in the browser, without exposing your front-end infrastructure to any sensitive data.
This guide will walk you through all the steps, from installation and configuring our SDK to fit your application.
Installation
Tonder’s Ionic SDK can be installed using our npm package. Use the following command to install it:
npm i @tonder/ionic-lite-sdk
Requirements
To configure our SDK you need to add the following script tags to your HTML:
<script src=https://openpay.s3.amazonaws.com/openpay.v1.min.js></script>
<script src=https://openpay.s3.amazonaws.com/openpay-data.v1.min.js></script>
The code above is necessary to ensure a reliable connection to the payment processor.
Configuration
With Tonder’s SDK installed, and requirements met, you are ready to configure and use the SDK. The following step-by-step process takes you through everything, from starting a new instance, to performing a new transaction using the needed methods:
Import the Lite Checkout class
Start by adding the import statement for the LiteCheckout class in your file. Following you find an example of how to import the LiteCheckout:
import { LiteCheckout } from "@tonder/ionic-lite-sdk"
Initialize Tonder's SDK Instance
Initialize Tonder’s Ionic SDK instance adding the following parameters:
| Field | Description |
|---|---|
signal | Signal from AbortController instance if it needs cancel the request. |
baseUrlTonder | Tonder’s API base URL. -> Live server: http://stage.tonder.io-> Mock Server: https://stoplight.io/mocks/tonder/tonder-api-v1-2/3152148 |
apiKeyTonder | Your Tonder API key. You can find it in your Tonder dashboard. |
const liteCheckout = new LiteCheckout({
signal,
baseUrlTonder,
apiKeyTonder
});
Start Checkout Router Full method
Once you have initialized your liteCheckout instance, you need to call the startCheckoutRouterFull method and provide all the necessary data as an object. This method handles the entire checkout process, executing the transaction and returning the payment response. To start, call the startCheckoutRouterFullmethod providing the necessary information found below:
| Parameter | Type | Description |
|---|---|---|
order | object | Represents the details of each item in the order. |
total | number | The total amount for the order. This should match the sum of the costs of items in the order. |
customer | object | Information about the customer. |
skyflowTokens | object | The details of the card to be used on the transaction. |
return_url | string | URL to which the customer will be redirected after the checkout process is completed. |
isSandbox | boolean | A boolean indicating if the transaction is being processed in a sandbox environment for testing purposes. |
metadata | object | Optional additional data about the order that might be used for processing or tracking. |
currency | string | The currency in which the transaction is conducted. Refer to the Currencies Reference page for details. |
const checkoutResponse = liteCheckout.startCheckoutRouterFull({
order,
total,
customer,
skyflowTokens,
return_url,
isSandbox,
metadata,
currency
});
Below you find the types for each startCheckoutRouterFull parameter, followed by an example code:
type StartCheckoutFullRequest = {
order: {
items: Array<{
description: string;
quantity: number;
price_unit: number;
discount: number;
taxes: number;
product_reference: number;
name: string;
amount_total: number;
}>;
};
total: number;
customer: {
name: string;
lastname: string;
email: string;
phone: string;
};
skyflowTokens: {
cardholder_name: string;
card_number: string;
cvv: string;
expiration_year: string;
expiration_month: string;
skyflow_id: string;
};
return_url: string;
isSandbox: boolean;
metadata: any;
currency: string;
};
Checkout Router Full response
As the startCheckoutRouterFull takes care of the full transaction process, it will return with the status of the transaction, along with all information regarding the process. The main information returned are as follows:
| Field | Type | Description |
|---|---|---|
status | number | The HTTP status code reflecting the outcome of the checkout process. |
message | string | A message providing additional information about the response. |
psp_response | object | An object containing detailed information from the payment service provider. |
transaction_status | string | Status of the transaction as reported by the system. |
transaction_id | number | A unique identifier for the transaction. |
payment_id | number | A unique identifier for the payment linked to the transaction. |
provider | string | The payment service provider(PSP) that is handling the transaction. |
next_action | object | URLs to redirect the user for each possible situation. |
actions | Array<object> | A list of possible actions related to the transaction. |
Below you find the types of all parameters in the response:
type StartCheckoutResponse = {
status: number;
message: string;
psp_response: {
id: string;
authorization: number;
operation_type: string;
transaction_type: string;
status: string;
conciliated: boolean;
creation_date: string;
operation_date: string;
description: string;
error_message?: string;
order_id?: string;
card: {
type: string;
brand: string;
address?: string;
card_number: string;
holder_name: string;
expiration_year: string;
expiration_month: string;
allows_charges: boolean;
allows_payouts: boolean;
bank_name: string;
points_type: string;
points_card: boolean;
bank_code: number;
};
customer_id: string;
gateway_card_present: string;
amount: number;
fee: {
amount: number;
tax: number;
currency: string;
};
payment_method: {
type: string;
url: string;
};
currency: string;
method: string;
object: string;
};
transaction_status: string;
transaction_id: number;
payment_id: number;
provider: string;
next_action: {
redirect_to_url: {
url: string;
return_url: string;
verify_transaction_status_url: string;
};
iframe_resources?: {
iframe: string;
};
};
actions: Array<{
name: string;
url: string;
method: string;
}>;
};