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

​
Prerequisites

Before installing the Tonder Ionic Full SDK, you need to configure your project to support secure payment processing. This involves adding the Openpay script tags for PCI DSS compliance and ensuring proper HTML structure for the SDK integration. 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 Full SDK, you need to add the Full SDK package to your project. The Full SDK provides a pre-built, inline checkout experience with ready-to-use UI components.

​
Step 1: Install the SDK Package

Install the Full SDK package using your preferred package manager: 
npm i @tonder.io/ionic-full-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: Configure HTML Structure

Ensure your Ionic app has the proper HTML structure for the SDK to render the payment interface. 
<div id="tonder-checkout"></div>
<button id="pay-button">Pay Now</button>

​
Next Steps

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