JS Inline Checkout

Tonder’s JS SDK needs an entry point to operate. This entry point is defined by adding a tonder-checkout ID to an empty div, like the example below:

<div>
    <h1>Checkout</h1>
    <!-- You have to add an entry point with the ID 'tonder-checkout' -->
    <div id="tonder-checkout">
    </div>
</div>

Initialize Tonder’s JS SDK instance with the following parameters:

You can use the configureCheckout method to set initial customer information, such as their email address, allowing to retrieve the respectives user’s saved cards.

inlineCheckout.configureCheckout({ customer: { email: "example@email.com" } });

Call the injectCheckout method with your inlineCheckout instance, with the code below:

inlineCheckout.injectCheckout();

This method will use the element with id tonder-checkout added in Step 1 to render the checkout elements, as exemplified by the image below:

With this, you can render the checkout to your customers.

Use Tonder’s SDK verify3dsTransaction() method to validate if the 3DS challenge was successful or not. Use the example below to call the method and handle the response as needed:

inlineCheckout.verify3dsTransaction().then(response => {
  console.log('Verify 3ds response', response);
  
  if (response.transaction_status === 'Success') {
    alert('3DS Transaction verified.');
    // Proceed with normal payment flow
  } else if (response.transaction_status === 'Failed') {
    alert('3DS Transaction Failed');
  }
});

Lastly, you need to create a button to submit the form. This button needs to have an event listener that calls the payment method from the inlineCheckout instance, sending the checkout data as payload, like presented below:

document.getElementById('your-pay-button').addEventListener('click', async () => {
  try {
    response = await inlineCheckout.payment(checkoutData);
    if (response.transaction_status === 'Success') {
      alert('Payment successful.');
    } else if (response.transaction_status === 'Pending') {
      alert('Payment pending. Redirecting to 3DS...');
      // The redirection to 3DS occurs automatically
    } else {
      alert('Payment declined.');
    }
  } catch (error) {
    alert('Error with payment.');
  }
});

Checkout data

The payment function payload needs to be an object with detailed information about the customer, currency and cart. Below you find details abou each needed field:

Checkout data example

Below you find an example of a checkout data object:

  const checkoutData = {
    customer: {
      firstName: "Juan",
      lastName: "Hernández",
      country: "Mexico",
      address: "Av. Revolución 356, Col. Roma",
      city: "Monterrey",
      state: "Nuevo León",
      postCode: "64700",
      email: "juan.hernandez@mail.com",
      phone: "8187654321",
    },
    currency: 'mxn',
    cart: {
      total: 399,
      items: [
        {
          description: "Black T-Shirt",
          quantity: 1,
          price_unit: 1,
          discount: 0,
          taxes: 0,
          product_reference: 1,
          name: "T-Shirt",
          amount_total: 399,
        },
      ]
    }
  };