> ## 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.

# Customize the SDK

This guide covers how to customise the Tonder JS Lite SDK to create a completely custom payment experience. Whether you're looking to integrate Tonder's payment processing into your existing design system or build a unique checkout flow, this documentation will help you understand your customisation options and implementation approaches.

The Tonder JS Lite SDK is designed for maximum customisation by allowing you to build your own user interface.

## UI and Styling

Unlike the [Full SDK](/sdk-integration/web/js-inline/customization), the Lite SDK does not render any visible UI components. This means you have complete control over the look and feel of your payment form.

You are responsible for:

* Creating all HTML input elements (`<input>`, `<select>`) for card details.
* Styling these elements using your own CSS or design system.
* Arranging the layout of the form on your page.

## Functional Customisation

While you build the UI, the Lite SDK provides essential backend functionality and helpers:

| Feature                | Description                                                                                                                                                                                                                                                                 |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Payment Processing     | The `payment()` method securely handles the transaction                                                                                                                                                                                                                     |
| Card Enrollment        | The `saveCustomerCard()` method tokenizes and saves card data                                                                                                                                                                                                               |
| Client-Side Validation | Use the exported [validation helper functions](/sdk-integration/web/js-lite/methods#validation-helper-functions) (e.g., `validateCardNumber`, `validateCVV`) to provide real-time feedback to your users, ensuring data is in the correct format before it's sent to Tonder |

By combining your custom-built UI with the SDK's core methods, you can create a fully branded and secure checkout experience.

## Next Steps

Now that you understand the customisation options available with the Tonder JS Lite SDK, you're ready to implement payment processing in your web application. Here are the recommended next steps to get you started:

* 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.
* Learn how to [enroll payment methods](/sdk-integration/web/js-lite/enroll-payment-method) for returning customers.