Ionic SDK Full

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:

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" />

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>

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 successUrl = "http://my-website:8080/3ds-success"

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

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

Property	Type	Required	Description
`apiKey`	string	✅	The API key used for authentication and authorization.
`returnUrl`	string	✅	The URL to which the user is redirected after the checkout process, regardless of success or failure.
`successUrl`	string	❌	The URL to which the user is redirected after a successful checkout.
`style`	object	❌	The custom styles object to customize the checkout
`containerId`	string	❌	If a custom checkout container ID is required. Default value: `tonder-checkout`.
`collectorIds`	object	❌	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” }`
`callBack`	function	❌	Callback function to be invoked after the payment process ends successfully.
`isOpenpaySandbox`	boolean	❌	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.

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:

Field	Description
`firstName`	The first name of the customer.
`lastName`	The last name of the customer.
`country`	The customer’s country of residence.
`address`	The customer’s street address.
`city`	The city of residence of the customer.
`state`	The state or region within the country.
`postCode`	The postal code or ZIP code of the customer’s address.
`email`	The email address for communication with the customer.
`phone`	The contact phone number of the customer.

Field	Description
`currency`	The currency used by the customer.

Field	Description
`total`	The total amount for the customer’s purchase.
`items`	An array containing details of individual items in the purchase.
`items[n].description`	The description of the item.
`items[n].quantity`	The quantity of the item in the purchase.
`items[n].price_unit`	The unit price of the item.
`items[n].discount`	The discount applied to the item.
`items[n].taxes`	The taxes applied to the item.
`items[n].product_reference`	The reference number of the product for the item.
`items[n].name`	The name of the item (e.g., “T-Shirt”).
`items[n].amount_total`	The total amount for the item.

Checkout data example

Below you find an example of a checkout data object:

  const checkoutData = {
    customer: {
      firstName: "Juan",
      lastName: "Hernández",
      country: "Mexico",
      address: "Av. Revolución 356, Col. Roma",
      city: "Monterrey",
      state: "Nuevo León",
      postCode: "64700",
      email: "juan.hernandez@mail.com",
      phone: "8187654321",
    },
    currency: 'mxn',
    cart: {
      total: 399,
      items: [
        {
          description: "Black T-Shirt",
          quantity: 1,
          price_unit: 1,
          discount: 0,
          taxes: 0,
          product_reference: 1,
          name: "T-Shirt",
          amount_total: 399,
        },
      ]
    }
  };

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

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();

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,
    successUrl,
    styles: customStyles
  });

All available customizations are presented in the example below:

  const customStyles = {
    inputStyles: {
      base: {
        border: "1px solid #e0e0e0",
        padding: "10px 7px",
        borderRadius: "5px",
        color: "#1d1d1d",
        marginTop: "2px",
        backgroundColor: "white",
        fontFamily: '"Inter", sans-serif',
        fontSize: '16px',
        '&::placeholder': {
          color: "#ccc",
        },
      },
      cardIcon: {
        position: 'absolute',
        left: '6px',
        bottom: 'calc(50% - 12px)',
      },
      complete: {
        color: "#4caf50",
      },
      empty: {},
      focus: {},
      invalid: {
        border: "1px solid #f44336",
      },
      global: {
        '@import': 'url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap")',
      }
    },
    labelStyles: {
      base: {
        fontSize: '12px',
        fontWeight: '500',
        fontFamily: '"Inter", sans-serif'
      },
    },
    errorTextStyles: {
      base: {
        fontSize: '12px',
        fontWeight: '500',
        color: "#f44336",
        fontFamily: '"Inter", sans-serif'
      },
    },
    labels: {
      cardLabel: 'Número de Tarjeta Personalizado',
      cvvLabel: 'Código de Seguridad',
      expiryMonthLabel: 'Mes de Expiración',
      expiryYearLabel: 'Año de Expiración'
    },
    placeholders: {
      cardPlaceholder: '0000 0000 0000 0000',
      cvvPlaceholder: '123',
      expiryMonthPlaceholder: 'MM',
      expiryYearPlaceholder: 'AA'
    }
  }

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:

  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");

  .container-tonder {
    background-color: #F9F9F9;
    margin: 0 auto;
    padding: 30px 10px 30px 10px;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    max-width: 600px;
    border: solid 1px #e3e3e3;
  }

  .collect-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .collect-row > :first-child {
    min-width: 120px;
  }

  .expiration-year {
    padding-top: 25px;
  }

  .empty-div {
    height: 80px;
    margin-top: 2px;
    margin-bottom: 4px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .error-container{
    color: red;
    background-color: #FFDBDB;
    margin-bottom: 13px;
    font-size: 80%;
    padding: 8px 10px;
    border-radius: 10px;
    text-align: left;
  }

  .message-container{
    color: green;
    background-color: #90EE90;
    margin-bottom: 13px;
    font-size: 80%;
    padding: 8px 10px;
    border-radius: 10px;
    text-align: left;
  }

  .pay-button {
    font-size: 16px;
    font-weight: bold;
    min-height: 2.3rem;
    border-radius: 0.5rem;
    cursor: pointer;
    width: 100%;
    padding: 1rem;
    text-align: center;
    border: none;
    background-color: #000;
    color: #fff;
    margin-bottom: 10px;
    display: none;
  }

  .pay-button:disabled, pay-button[disabled] {
    background-color: #B9B9B9;
  }

  .lds-dual-ring {
    display: inline-block;
    width: 14px;
    height: 14px;
  };

  .lds-dual-ring:after {
    content: " ";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 6px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
  }

  @keyframes lds-dual-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @media screen and (max-width: 600px) {
    .payment_method_zplit {
      font-size: 16px;
      width: 100%;
    }

    .payment_method_zplit  label img {
      display: none;
    }
  }

  .cards-list-container {
    display: flex;
    flex-direction: column;
    padding: 0px 10px 0px 10px;
    gap: 33% 20px;
  }

  .checkbox label {
    margin-left: 10px;
    font-size: '12px';
    font-weight: '500';
    color: #1D1D1D;
    font-family: "Inter", sans-serif;
  }

  .checkbox {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    text-align: left;
  }

  .pay-new-card {
    display: flex;
    justify-content: start;
    align-items: center;
    color: #1D1D1D;
    gap: 33% 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: 90%;
  }

  .pay-new-card .card-number {
    font-size: 16px;
    font-family: "Inter", sans-serif;
  }

  .card-image {
    width: 27px;
    height: 20px;
    text-align: left;
  }

  .card-item-label {
    display: flex;
    justify-content: start;
    align-items: center;
    color: #1D1D1D;
    gap: 33% 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: 90%;
  }

  .card_selected {
    width: 10%;
  }

  .card-item {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 33% 20px;
  }

  .card-item .card-number {
    font-size: 16px;
    font-family: "Inter", sans-serif;
  }

  .card-item .card-expiration {
    font-size: 16px;
    font-family: "Inter", sans-serif;
  }

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

  <div class="container-tonder">
    <div class="cards-list-container"></div>
    <div class="pay-new-card">
      <input checked id="new" name="card_selected" type="radio"/>
      <label for="new">
        <img class="card-image"/>
        <div class="card-number"></div>
      </label>
    </div>
    <div class="container-form">
      <div class="empty-div"></div>
      <div class="empty-div"></div>
      <div class="collect-row">
        <div class="empty-div"></div>
        <div class="expiration-year"></div>
        <div class="empty-div"></div>
      </div>
      <div class="checkbox">
        <input id="save-checkout-card" type="checkbox">
        <label for="save-checkout-card"></label>
      </div>
      <div></div>
      <div></div>
    </div>
    <button class="pay-button"></button>
  </div>

  <div class="card-item">
    <input name="card_selected" type="radio"/>
    <label class="card-item-label">
      <img class="card-image"/>
      <div class="card-number"></div>
      <div class="card-expiration"></div>
    </label>
  </div>

Introduction

Core Concepts

SDKs

Plugins

Dashboard

Ionic SDK Full

Installation

Requirements

Configuration

Class Methods

Checkout data

Checkout data example

Set payment data

Set cart total

Set customer email

Inject Checkout

Styles

Include a style parameter

HTML and CSS

Introduction

Core Concepts

SDKs

Plugins

Dashboard

​Installation

​Requirements

​Configuration

​Class Methods

​Checkout data

​Checkout data example

​Set payment data

​Set cart total

​Set customer email

​Inject Checkout

​Styles

​Include a style parameter

​HTML and CSS

Installation

Requirements

Configuration

Class Methods

Checkout data

Checkout data example

Set payment data

Set cart total

Set customer email

Inject Checkout

Styles

Include a style parameter

HTML and CSS