The Tonder Ionic SDK Full 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. To do so, use the following command:

  npm i @tonder.io/ionic-full-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.

You can also install each one with their respective npm packages

​
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:

1

Mobile settings

Follow the instructions below to configure your mobile application for Android and iOS devices.

To deploy your app on Android, you must add the Internet permission to your AndroidManifest.xml file. Add the following code to your XML:

  <!-- Required to fetch data from the internet. -->
  <uses-permission android:name="android.permission.INTERNET" />
2

Add the required ID to your HTML

Tonder’s Ionic SDK Full requires a tonder-checkout ID to function, which needs to be added to an empty div as shown below:

<div>
    <h1>Checkout</h1>
    <!-- You have to add an entry point with the ID 'tonder-checkout' -->
    <div id="tonder-checkout">
    </div>
</div>
3

Initialize Tonder's SDK Instance

Initialize Tonder’s Ionic SDK Full instance:

import { InlineCheckout } from "@tonder.io/ionic-full-sdk";

const apiKey = "You can find this in your Tonder Dashboard";
const returnUrl = "http://my-website:8080/checkout-success";

const inlineCheckout = new InlineCheckout({
  apiKey,
  returnUrl,
});

The InlineCheckout object includes all the functionalities of LiteCheckout and adds the capability to handle the rendering of the card payment form. InlineCheckout not only manages transactions but also facilitates the visual integration of the payment form in your application, providing a complete payment experience.

Below is a table of all parameters available, including the required ones for initialization:

PropertyTypeRequiredDescription
apiKeystring✔️The API key used for authentication and authorization.
returnUrlstring✔️The URL to which the user is redirected after the checkout process, regardless of success or failure.
styleobject➖The custom styles object to customize the checkout
containerIdstring➖If a custom checkout container ID is required. Default value: tonder-checkout.
collectorIdsobject➖

If you require custom div container IDs.
Default value:

{
cardsListContainer: “cardsListContainer”,
holderName: “collectCardholderName”,
cardNumber: “collectCardNumber”,
expirationMonth: “collectExpirationMonth”,
expirationYear: “collectExpirationYear”,
cvv: “collectCvv”,
tonderPayButton: “tonderPayButton”,
msgError: “msgError”,
msgNotification: “msgNotification”
}
callBackfunction➖Callback function to be invoked after the payment process ends successfully.
isOpenpaySandboxboolean➖Defines if Openpay works on the sandbox. Default value: true.

​
Class Methods

After properly configuring your Full SDK instance, you have at your hand various methods to work with Tonder. Below you will find a detailed information about the checkout data needed with an example, and all the available methods in the SDK.

Set Payment Data

Set Cart Total

Set Customer Email

Inject Checkout

3DS Verification

​
Set Payment Data

The setPaymentData method requires a checkoutData object as a parameter to pass checkout data to Tonder. Use the code example below to call it:

  inlineCheckout.setPaymentData(checkoutData);

​
Checkout Data

The payment function payload needs to be an object with detailed information about the customer, currency and cart. Below you find details abou each needed field:

​
Checkout Data Example

Below you find an example of a checkout data object:

​
Set Cart total

Once you have set the payment data, you will need to notify the cart of the total amount by calling the setCartTotal method. This method takes a single parameter, a number representing the total amount, which should match the value set in the checkoutData. Here is an example code to help you call it correctly:

  inlineCheckout.setCartTotal(checkoutData.cart.total);

​
Set Customer Email

You can use the setCustomerEmail method to register a customer’s email in Tonder. This method requires a string parameter and can be called using the following example:

  inlineCheckout.setCustomerEmail(checkoutData.cart.email);

​
Inject Checkout

The injectCheckout method is a function that allows you to incorporate Tonder’s Checkout feature into your application. This function leverages the element with the ID tonder-checkout that was added in Step 1 to display the checkout components on your page. To use this method, use the following code:

inlineCheckout.injectCheckout();

​
3DS Verification

You can use the verify3dsTransaction() method to validate if a 3DS challenge was successful or not. Use the example below to call the method and handle the response as needed:

  inlineCheckout.verify3dsTransaction().then(response => {
    console.log('Verify 3ds response', response);
    
    if (response.transaction_status === 'Success') {
      alert('3DS Transaction verified.');
      // Proceed with normal payment flow
    } else if (response.transaction_status === 'Failed') {
      alert('3DS Transaction Failed');
    }
  });

​
Styles

You can customize your checkout in two ways using Ionic SDK Full. You can either include a style parameter when creating the InlineCheckout instance or use HTML and CSS.

Below you will find more details about both options:

​
Include a Style Parameter

To include the checkout styles, add an object with the desired styles to the styles parameter when creating the instance, like presented below:

  const inlineCheckout = new InlineCheckout({
    apiKey,
    returnUrl,
    styles: customStyles
  });

All available customizations are presented in the example below:

​
HTML and CSS

To customize your checkout using HTML and CSS, you can use predefined classes in your HTML and customize them in the CSS.

The styles parameter is related to the style of the inputs inside the checkout form. To customize the checkout container and the cards list, you can use the global styles and classes presented below:

The classes presented above are included as example in the HTMLs presented below:

Ionic SDK LiteFlutter SDK Lite