Skip to main content
This guide provides the installation and configuration steps for Tonder’s Ionic Lite SDK.

​
Prerequisites

Before installing the Tonder Ionic Lite SDK, you need to configure your project to support secure payment processing. This involves adding the Openpay script tags for PCI DSS compliance. Add the required Openpay script tags to your main index.html file. These scripts are essential for PCI DSS compliance and enable the SDK to securely connect to the payment processor.
index.html
<head>
  ...
  <script src="[https://openpay.s3.amazonaws.com/openpay.v1.min.js](https://openpay.s3.amazonaws.com/openpay.v1.min.js)"></script>
  <script src="[https://openpay.s3.amazonaws.com/openpay-data.v1.min.js](https://openpay.s3.amazonaws.com/openpay-data.v1.min.js)"></script>
  ...
</head>

​
Installation

To install the Tonder Ionic Lite SDK, you need to add the Lite SDK package to your project. The Lite SDK is designed for maximum flexibility and complete UI control, allowing you to build a completely custom payment experience.

​
Step 1: Install the SDK Package

Install the Lite SDK package using your preferred package manager: 
npm i @tonder.io/ionic-lite-sdk
Tonder recommends reviewing the important npm security changes taking effect October 13, 2025, regarding new token lifetime limits (90-day max) and TOTP 2FA restrictions, as classic tokens will be revoked in November 2025. Update your workflows as needed.

​
Step 2: Build Your Custom UI

Unlike the Full SDK, the Lite SDK does not render any UI components. You’ll need to create your own payment form using standard Ionic components. The SDK provides the secure payment processing logic while you maintain complete control over the user interface.

​
Next Steps

Now that you’ve successfully installed the Tonder Ionic Lite SDK, you’re ready to start integrating payments into your application with your custom UI. Follow these guides to complete your Ionic payment integration: