Skip to main content
This page provides a comprehensive reference for the core methods available in the InlineCheckout class. Whether you’re implementing basic payment processing or advanced checkout functionality, this documentation will help you understand the available methods and their usage.

​
Method Details

Each method in the Tonder JS Inline SDK serves a specific purpose in the payment integration workflow. Below you’ll find detailed information about each method, including their parameters, usage examples, and practical implementation guidance.
Creates and initialises a new SDK instance with your API credentials and configuration options.The constructor accepts the following configuration parameters:
ParameterTypeRequiredDescription
modestringYesEnvironment mode for the SDK (e.g., stage, production, sandbox, or development).
apiKeystringYesYour Tonder public API key.
returnUrlstringYesURL where users are redirected after 3D Secure verification.
stylesobjectNoCustom styling options for the checkout UI (e.g., inputStyles, labelStyles, labels, placeholders).
customizationobjectNoUI customization options (for example: showing/hiding the save card option or payment button).
callbacksobjectNoCallback functions for user actions (for example: onCancel).
signaturesobjectNoOptional HMAC signatures for transaction and customer data.
Here’s how to initialise the SDK with basic configuration:
import { InlineCheckout } from "tonder-web-sdk";

const inlineCheckout = new InlineCheckout({
  apiKey: 'your-api-key',
  returnUrl: 'https://your-website.com/checkout',
  mode: 'development', 
  styles: 
    inputStyles: {
      base: { border: "1px solid #E0E0E0", padding: "12px 10px" }
    }
  },
  signatures: { // Optional HMAC signatures
    transaction: "nA6nQXxQ....=",
    customer: "2EVYDIOH515v4....="
  }
);
Renders the pre-built, customizable checkout interface into the designated DOM element (for example: <div id="tonder-checkout"></div>).This method injects the checkout into the DOM. Ensure the target element exists (call after DOMContentLoaded or place the script after the target element) before calling injectCheckout().This method doesn’t require any parameters. Simply call it to render the checkout interface:
// Inject the checkout into the DOM
inlineCheckout.injectCheckout();
Initiates a payment transaction using the provided customer and cart data. This method processes the payment and handles the secure transaction flow.The payment method expects a data object with the following structure:
ParameterTypeRequiredDescription
paymentDataobjectYesPayment information including customer and cart details.
paymentData.customerobjectYesCustomer personal information (e.g., name, email, phone, billing_address).
paymentData.cartobjectYesCart details including total and an items array. Each item typically has name, description, quantity, price_unit, and amount_total.
paymentData.currencystringYesCurrency code (for example: MXN).
paymentData.metadataobjectNoOptional additional data for the transaction (e.g., orderId, notes, custom fields).
Here’s a complete example of processing a payment:
const checkoutData = {
  customer: { 
    email: "example@email.com" 
  }, [cite: 223]
  currency: 'mxn', 
  cart: { 
    total: 399, 
    items: [{ 
      name: "T-Shirt", 
      amount_total: 399,
      description: "Black T-Shirt",
      quantity: 1,
      price_unit: 1
    }] 
  },
  metadata: { order_id: "ORDER123" } // Optional additional data
};

try {
  const response = await inlineCheckout.payment(checkoutData);
  console.log('Payment successful:', response);
} catch (error) {
  console.error('Payment failed:', error);
}
Verifies the status of a 3D Secure transaction. This method should be called after injectCheckout() to handle 3DS verification if required. It returns a promise that resolves with the transaction response.The response status will be one of the following: ‘Declined’, ‘Cancelled’, ‘Failed’, ‘Success’, ‘Pending’, or ‘Authorized’.

// On your return page or after injectCheckout()
inlineCheckout.verify3dsTransaction().then(response => { 
  console.log("Verify 3ds response", response); 
  // e.g., if (response.status === 'Success') { ... }
});
Cleans up the SDK instance and removes UI components from the DOM. Use this method when you need to destroy the checkout interface.This method doesn’t require any parameters and can be called whenever you need to clean up the checkout interface:
// Example in a React component's cleanup
useEffect(() => {
  return () => {
    if (tonder.removeCheckout) {
      tonder.removeCheckout(); 
    }
  };
}, [tonder]);

// Or call it directly
inlineCheckout.removeCheckout();
Sets initial checkout data. This function allows you to set information, such as the customer’s email, which can be used to retrieve a list of saved cards.This method must be used to send all payment data (customer, cart, metadata, etc.) when you are using Tonder’s default payment button.
ParameterTypeRequiredDescription
dataobjectYesAn object containing initial checkout information, such as customer , cart, currency, or metadata.
 
// Set customer email to retrieve saved cards
inlineCheckout.configureCheckout({ 
  customer: { email: "example@email.com" } 
}); 

// Set all data when using the default Tonder payment button
inlineCheckout.configureCheckout({ 
  customer: { email: "example@email.com" }, 
  currency: "mxn", [cite: 223]
  cart: { [cite: 223]
    total: 399,
    items: [
      { 
        name: "T-Shirt", 
        amount_total: 399, 
        description: "Black T-Shirt",
        quantity: 1,
        price_unit: 1
      }
    ]
  },
  metadata: {} // Optional additional data
});

​
Next Steps

Now that you understand the available methods in the Tonder JS Inline SDK, you’re ready to implement payment processing in your web application. Here are the recommended next steps: