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 work, 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
modestring➖Environment mode. Options: stage, production, sandbox. Default: stage
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.
renderPaymentButtonboolean➖Use this flag if you need render Tonder’s default payment button. Default: false
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.
isEnrollmentCardboolean➖Use the SDK as an enrollment card.
customizationobject➖

Object to customize the checkout behavior and UI. Default value:

{
  saveCards: {
    showSaved: true,
    showSaveCardOption: true,
    autoSave: false
  }
}
4

Inject checkout method

Call the injectCheckout method with your inlineCheckout instance, with the code below:

inlineCheckout.injectCheckout();

This method will use the element with id tonder-checkout added in Step 2 to render the checkout elements, as exemplified by the image below:

With this, you can render the checkout to your customers.

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

Configure Checkout

Inject Checkout

Payment

3DS Verification

Save Card

Remove Checkout

Set Payment Data

​
Configure Checkout

You can use the configureCheckout method to set initial customer information, such as their email address, allowing to retrieve the respectives user’s saved cards.

inlineCheckout.configureCheckout(data);

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

​
Payment

To create a new payment with the Lite SDK, use the payment method. This method requires an object as parameter with the following data:

KeyDescription
customerAn object containing customer information
cartAn object containing cart and item details
currencyThe currency code for the transaction (e.g., “MXN”)
metadataAn object for additional metadata (e.g., order ID)
cardAn object containing card details for a new card
payment_methodThe selected payment method (optional)

With the required parameter in hand, call the method as presented below:

const paymentData = {
    customer: {
      firstName: "John",
      lastName: "Doe",
      country: "USA",
      address: "123 Main St",
      city: "Anytown",
      state: "CA",
      postCode: "12345",
      email: "john.doe@example.com",
      phone: "1234567890",
    },
    cart: {
      total: "100.00",
      items: [
        {
          description: "Product description",
          quantity: 1,
          price_unit: "100.00",
          discount: "0.00",
          taxes: "0.00",
          product_reference: "PROD123",
          name: "Product Name",
          amount_total: "100.00",
        },
      ],
    },
    currency: "MXN",
    metadata: {
      order_id: "ORDER123",
    },
    // For a new card:
    card: {
      card_number: "4111111111111111",
      cvv: "123",
      expiration_month: "12",
      expiration_year: "25",
      cardholder_name: "John Doe",
    },
    // card: "skyflow_id" // for a selected saved card.
    // payment_method: "Spei", // For the selected payment method.
  };

  const responsePayment = await inlineCheckout.payment(paymentData);

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

​
Save Card

You can use this method when using the SDK instance as an enrollment card feature with isEnrollmentCard.

inlineCheckout.saveCard();

​
Remove Checkout

Removes the checkout from the DOM and cleans up associated resources.

inlineCheckout.removeCheckout();

​
Set Payment Data

The setPaymentData method requires a checkoutData object as a parameter to pass checkout data to Tonder. This is useful when using the default Tonder payment button renderPaymentButton. 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:

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

​
Full Integration Example

Below you find full example codes to integrate the Ionic SDK Full: