Skip to main content
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, 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: 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: