> ## Documentation Index > Fetch the complete documentation index at: https://docs.tonder.io/llms.txt > Use this file to discover all available pages before exploring further. # SDK Methods 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: | 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: ```javascript theme={null} 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: `
`). 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: ```javascript theme={null} // 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: | 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: ```javascript theme={null} 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'. ```javascript theme={null} // 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: ```javascript theme={null} // 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. | Parameter | Type | Required | Description | | --------- | ------ | -------- | -------------------------------------------------------------------------------------------------- | | `data` | object | Yes | An object containing initial checkout information, such as customer , cart, currency, or metadata. | ```javascript theme={null} // 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: * Learn how to [make a payment](/sdk-integration/web/js-inline/make-a-payment) using these methods. * Customise the [SDK appearance and behavior](/sdk-integration/web/js-inline/customization) to match your website's design.