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:| 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 (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 |
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 using the JS Lite SDK with custom UI.
- Explore the available SDK methods for payment processing and card management.
- Learn how to enroll payment methods for returning customers.