Skip to main content
This guide provides the installation and configuration steps for Tonder’s JavaScript Inline SDK. Whether you’re building a new web application or integrating payments into an existing site, this documentation will help you get the Tonder JS SDK up and running quickly and securely.

​
Prerequisites

Before installing the Tonder JS SDK, you need to configure your project to support secure payment processing. This involves adding the required third-party scripts for PCI DSS compliance and ensuring proper HTML structure for the SDK integration. The Tonder JS SDK relies on third-party scripts for PCI DSS compliance and connecting to payment processors. You must include these scripts in your HTML file for the SDK to function correctly. Add the following script tags to the <head> of your HTML file:
index.html
<head>
  ...
  <script src="https://js.skyflow.com/v1/index.js"></script>
  <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>
  ...
</head>

​
Installation

To install the Tonder JS SDK, you can choose between two approaches depending on your project setup: using the npm package for modern web applications or including a script tag directly in your HTML file for simpler integrations.
For projects using a package manager like npm or yarn, run the following command:
npm i tonder-web-sdk
This is the recommended approach for modern web applications.
To use the SDK without a package manager, add the following script tag to your HTML file, preferably before the closing </body> tag.
<script src="[https://zplit-prod.s3.amazonaws.com/v1/bundle.min.js](https://zplit-prod.s3.amazonaws.com/v1/bundle.min.js)"></script>

​
Next Steps

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