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. To do so, use the following command:

  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.

You can also install each one with their respective npm packages

Configuration

To properly initialize an instance of Tonder’s Ionic SDK, ensure that you have configured it properly. Follow the usage example below:

1

Import the Lite Checkout class

You need to start by adding the import statement for the LiteCheckout class in your file. This is how you it:

  import { LiteCheckout } from "@tonder/ionic-lite-sdk"
2

Initialize Tonder's SDK Instance

Initialize the Tonder’s Ionic SDK instance with the following parameters:

FieldDescription
signalSignal from AbortController instance if it needs cancel the request.
baseUrlTonderTonder’s API base URL.
-> Live server: http://stage.tonder.io
-> Mock Server: https://stoplight.io/mocks/tonder/tonder-api-v1-2/3152148
apiKeyTonderYour Tonder API key. You can find it in your Tonder Dashboard.
  const liteCheckout = new LiteCheckout({ 
    signal, 
    baseUrlTonder, 
    apiKeyTonder 
  });

Class Methods

After properly configuring your Lite Checkout instance, you have at your hand various methods to work with Tonder. Below you will find all the available methods, with an example of the data returned by each so you can understand how they work:

Get Business

This method retrieves all the information about your business. Get details on branding, providers public keys, vault information, and more. To call it, do the following:

const merchantData = await liteCheckout.getBusiness();

Device Session ID

Using the getOpenpayDeviceSessionID method, you can retrieve your device session id. This method requires you to add the following parameters recovered with the getBusiness method:

  • openpay_keys.merchant_id: The Merchant ID associated with your store.
  • openpay_keys.public_key: Your Public Key.
You can recover your openpay_keys data from your merchantData returned from the Get Business method.

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

  const { openpay_keys } = merchantData;

  const deviceSessionIdTonder = await liteCheckout.getOpenpayDeviceSessionID(
    openpay_keys.merchant_id,
    openpay_keys.public_key
  );

The returned data in deviceSessionIdTonder will be your device session id.

Customer

The customerRegister allows you to retrieve a customer’s authorization token by adding their email address as the only parameter to this method. To retrieve it, execute the following:

  const customerEmail = "john.c.calhoun@examplepetstore.com";

  const customerData = await liteCheckout.customerRegister(customerEmail);

Order

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

FieldDescription
businessYour business’s API key.
clientAuthentication token for the client recovered with the customerRegister method.
billing_address_idID of the billing address (null if not available).
shipping_address_idID of the shipping address (null if not available).
amountTotal amount of the order.
statusStatus of the order.
referenceReference information for the order. Recovered with the getBusiness method.
is_oneclickBoolean indicating one-click order (true/false).
itemsList of items in the shopping cart.

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

  const cartItems = [
    {
      description: "Test product description",
      quantity: 1,
      price_unit: 25,
      discount: 0,
      taxes: 12,
      product_reference: 65421,
      name: "Test product",
      amount_total: 25
    }
  ]

  const { reference } = merchantData;

  const orderData = {
    business: apiKeyTonder,
    client: customerData.auth_token,
    billing_address_id: null,
    shipping_address_id: null,
    amount: total,
    status: A,
    reference: reference,
    is_oneclick: true,
    items: cartItems,
  };

  const jsonResponseOrder = await liteCheckout.createOrder(
    orderData
  );

Payment

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

FieldDescription
business_pkPrimary key of the business for payment found in the getBusiness return object.
amountTotal amount for the payment.
dateDate of the payment (formatted as a string).
orderID of the associated order in the JSON response, returned from the createOrder method.

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

  const now = new Date();
  const dateString = now.toISOString();

  const paymentData = {
    business_pk: business.pk,
    amount: total,
    date: dateString,
    order: jsonResponseOrder.id,
  };

  const jsonResponsePayment = await liteCheckout.createPayment(
    paymentData
  );

Skyflow Tokens

To retrieve skyflow’s payment form tokenized values you need to call the getSkyflowTokens method.

This method requires an object as parameter with vault_id and vault_url recovered with the getBusiness method, and a data object with the following information:

FieldDescription
card_numberCard number entered in the payment form.
cvvCVV (Card Verification Value) from the payment form.
expiration_monthExpiration month of the card from the payment form.
expiration_yearExpiration year of the card from the payment form.
cardholder_nameCardholder’s name from the payment form.
These values above come from your html form.

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

  const skyflowFields = {
    card_number: this.paymentForm.value.cardNumber,
    cvv: this.paymentForm.value.cvv,
    expiration_month: this.paymentForm.value.month,
    expiration_year: this.paymentForm.value.expirationYear,
    cardholder_name: this.paymentForm.value.name
  }

  const { vault_id, vault_url } = merchantData;


  const skyflowTokens = await liteCheckout.getSkyflowTokens({
    vault_id: vault_id,
    vault_url: vault_url,
    data: skyflowFields
  })

Checkout Router

To retrieve the checkout router data you need to call the startCheckoutRouter method with an object as the only parameter. This object requires the following data:

FieldDescription
cardSkyflow tokens representing the card information.
nameCardholder’s name from Skyflow tokens.
last_nameCustomer’ last name.
email_clientCustomer’s email address.
phone_numberCustomer’s phone number.
return_urlURL to return after the transaction is completed.
id_productID of the product.
quantity_productQuantity of the product.
id_shipID of the shipping.
instance_id_shipInstance ID of the shipping.
amountTotal amount for the transaction.
title_shipTitle of the shipping.
descriptionDescription of the transaction.
device_session_idDevice session ID for tracking.
token_idToken ID.
order_idID of the associated order from JSON response.
business_idID of the business for the transaction.
payment_idID of the payment from JSON response.
sourceSource identifier.

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

  const customerPhone = "+11111111";
  const returnUrl = "http://localhost:8100/payment/success";

  const routerData = {
    card: skyflowTokens,
    name: skyflowTokens.cardholder_name,
    last_name: "",
    email_client: customerEmail,
    phone_number: customerPhone,
    return_url: returnUrl,
    id_product: "no_id",
    quantity_product: 1,
    id_ship: "0",
    instance_id_ship: "0",
    amount: total,
    title_ship: "shipping",
    description: "Transaction from the lite SDK",
    device_session_id: deviceSessionIdTonder,
    token_id: "",
    order_id: jsonResponseOrder.id,
    business_id: merchantData.business.pk,
    payment_id: jsonResponsePayment.pk,
    source: 'ionic-lite-sdk',
  };

  const jsonResponseRouter = await liteCheckout.startCheckoutRouter(
    routerData
  );
You need to take actions based on the checkout router response.