> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tonder.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Requirements and Installation

This guide provides the installation and configuration steps for Tonder's JavaScript Lite SDK. Whether you're building a custom payment interface or integrating payments into an existing design system, this documentation will help you get the Tonder JS Lite SDK up and running quickly and securely.

## Prerequisites

Before installing the Tonder JS Lite 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:

```html title="index.html" theme={null}
<head>
  ...
  <script src="https://js.skyflow.com/v1/index.js"></script>
  ...
</head>
```

## Installation

To install the Tonder JS Lite 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.

<AccordionGroup>
  <Accordion title="NPM Package">
    For projects using a package manager like npm or yarn, run the following command:

    ```bash theme={null}
    npm i tonder-web-sdk
    ```

    This is the recommended approach for modern web applications.
  </Accordion>

  <Accordion title="Script Tag">
    To use the SDK without a package manager, add the following script tag to your HTML file, preferably before the closing `<body>` tag.

    ```html theme={null}
    <script src="[https://zplit-prod.s3.amazonaws.com/v1/bundle.min.js](https://zplit-prod.s3.amazonaws.com/v1/bundle.min.js)"></script>
    ```
  </Accordion>
</AccordionGroup>

## Next Steps

Now that you've successfully installed the Tonder JS Lite SDK, you're ready to start building your custom payment interface. Follow these guides to complete your payment integration:

* Learn how to [make a payment](/sdk-integration/web/js-lite/make-a-payment) using the JS Lite SDK with custom UI.
* Explore the [available SDK methods](/sdk-integration/web/js-lite/methods) for payment processing and card management.
* Understand [customisation options](/sdk-integration/web/js-lite/customization) for building your own payment interface.
* Learn how to [enroll payment methods](/sdk-integration/web/js-lite/enroll-payment-method) for returning customers.
