SDK Methods

new InlineCheckout(config)

Creates and initialises a new SDK instance with your API credentials and configuration options.The constructor accepts the following configuration parameters:

Parameter	Type	Required	Description
mode	string	Yes	Environment mode for the SDK (e.g., `stage`, `production`, `sandbox`, or `development`).
apiKey	string	Yes	Your Tonder public API key.
returnUrl	string	Yes	URL where users are redirected after 3D Secure verification.
styles	object	No	Custom styling options for the checkout UI (e.g., `inputStyles`, `labelStyles`, `labels`, `placeholders`).
customization	object	No	UI customization options (for example: showing/hiding the save card option or payment button).
callbacks	object	No	Callback functions for user actions (for example: `onCancel`).
signatures	object	No	Optional 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....="
  }
);

injectCheckout()

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();

payment(paymentData)

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:

Parameter	Type	Required	Description
`paymentData`	object	Yes	Payment information including customer and cart details.
`paymentData.customer`	object	Yes	Customer personal information (e.g., `name`, `email`, `phone`, `billing_address`).
`paymentData.cart`	object	Yes	Cart details including `total` and an `items` array. Each item typically has `name`, `description`, `quantity`, `price_unit`, and `amount_total`.
`paymentData.currency`	string	Yes	Currency code (for example: `MXN`).
`paymentData.metadata`	object	No	Optional 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);
}

verify3dsTransaction()

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') { ... }
});

removeCheckout()

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();

configureCheckout(data)

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.

Parameter	Type	Required	Description
`data`	object	Yes	An 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
});

SDK Overview

Web SDKs

Mobile SDKs

Method Details

Next Steps

​Method Details

​Next Steps

Method Details

Next Steps