Skip to main content
This guide walks you through securely saving customer card details for future purchases using the JS Lite SDK (LiteCheckout). You’ll learn how to configure the SDK with secure tokens, tokenize card information, and manage saved payment methods for returning customers. You can securely save customer card details for future purchases using the Lite version of the Tonder JS SDK. This process tokenizes the card information, so you avoid the security risks and PCI compliance burden of storing sensitive data.

​
Prerequisites

Before you can enroll payment methods with the Tonder JS Lite SDK, ensure you have completed the necessary setup and have the required components in place.
  • You are using the Lite Checkout version of the JS SDK.
  • Your backend is set up to provide a Secure Token required for card management.
  • You have initialised the LiteCheckout SDK instance.
You must use a Secure Token to manage cards with the Tonder SDK. This token provides temporary, restricted access to card vaulting functions and should be generated on your server to protect your secret API key.

​
Payment Method Enrollment Steps

Follow these steps to securely enroll customer payment methods using the JS Lite SDK. This process involves configuring the SDK with secure tokens, tokenizing card information, and managing saved payment methods.

​
Step 1: Configure the SDK with a Secure Token

When you initialise the LiteCheckout instance, you must configure it with the customer’s email and the secure token you obtained from your backend. 
const liteCheckout = new LiteCheckout({ apiKey: "YOUR_PUBLIC_API_KEY" });

liteCheckout.configureCheckout({
  customer: { email: "customer@example.com" },
  secureToken: "SECURE_TOKEN_FROM_YOUR_BACKEND"
});

liteCheckout.injectCheckout();

​
Step 2: Save a Customer Card

Use the saveCustomerCard method to tokenize and save the card details. This method takes an object containing the raw card information collected from your custom UI. 

const handleSaveCard = async () => {
  try {
    const cardData = {
      card_number: "4111111111111111",
      cvv: "123",
      expiration_month: "12",
      expiration_year: "25",
      cardholder_name: "John Doe",
    };

    const response = await liteCheckout.saveCustomerCard(cardData);
    console.log("Card saved successfully:", response);
    // The response will contain a unique identifier (skyflow_id) for the saved card.
  } catch (error) {
    console.error("Error saving card:", error);
  }
};

​
Step 3: Retrieve and Manage Saved Cards

Once cards are saved, you can retrieve them using getCustomerCards() and delete them using removeCustomerCard(cardId).

​
Next Steps

Now that you’ve successfully implemented payment method enrollment with the JS Lite SDK, explore these advanced features to enhance your payment experience: