Skip to Content
Tonder SDK Portal
Web SDK — LitePayment with ApmExamples

Examples

Example - Basic APM Payment

Minimal integration using getCustomerPaymentMethods() to display available APMs and trigger a payment.

// If you're loading the SDK via <script src="https://zplit-prod.s3.amazonaws.com/v1/bundle.min.js"></script>
// you can use `const inline = new TonderSdk.LiteInlineCheckout(...)` instead of importing from 'tonder-web-sdk'.
import { LiteInlineCheckout } from 'tonder-web-sdk'

async function run() {
  const liteCheckout = new LiteInlineCheckout({
    mode: 'stage',
    apiKey: '11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27', // YOUR API KEY
    returnUrl: window.location.href,
  })

  await liteCheckout.injectCheckout()
  
  liteCheckout.verify3dsTransaction().then(response => {
    console.log("Verify 3ds response", response);
  });
  
  let selectedMethod = null;
  const methods = await liteCheckout.getCustomerPaymentMethods()

  console.log('Available APMs:', methods)

  const payButton = document.getElementById("pay-button");
  
  // Process payment with APM
  payButton.addEventListener("click", async function () {
    try {
      payButton.textContent = "Processing...";
      // Pass the selected payment method or hardcode one from the available list.
      const response = await liteCheckout.payment({...checkoutData, payment_method: selectedMethod});
      console.log("Payment response:", response);
      alert("Payment successfully");
    } catch (error) {
      console.log("Payment error:", error);
      alert("Error while processing the payment");
    } finally {
      payButton.textContent = "Pay";
    }
  });


  // Just an example to showcase the APMs.
  // Show all APMs or only the ones you want.
  const container = document.getElementById('apm-list')

  methods.forEach((method) => {
    const card = document.createElement('div')
    card.className = 'apm-card'

    card.onclick = () => {
      document.querySelectorAll('.apm-card.selected').forEach((el) => {
        el.classList.remove('selected')
      })
      card.classList.add('selected')
      selectedMethod = method.payment_method;
    }

    const img = document.createElement('img')
    img.src = method.icon
    img.alt = method.label

    const label = document.createElement('div')
    label.className = 'label'
    label.textContent = method.label

    card.appendChild(img)
    card.appendChild(label)
    container.appendChild(card)
  })
  
  
}

run()

const checkoutData = {
  customer: {
    firstName: "Adrian",
    lastName: "Martinez",
    country: "Mexico",
    address: "Pinos 507, Col El Tecuan",
    city: "Durango",
    state: "Durango",
    postCode: "34105",
    email: "adrian@email.com",
    phone: "8161234567",
    identification:{
      type: "CPF",
      number: "19119119100"
    }
  },
  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,
      },
    ],
  },
  metadata: {
    order_id: "ORD-123456",
  },
  order_reference: "ORD-123456",
  // configs for apm 
  apm_config: {},
};
Open on CodeSandboxOpen Sandbox

Example - Custom APM UI with Amount Selector

Hardcoded APM list with a two-column layout and manual/quick amount input before calling payment().

// If you're loading the SDK via <script src="https://zplit-prod.s3.amazonaws.com/v1/bundle.min.js"></script>
// you can use `const inline = new TonderSdk.LiteInlineCheckout(...)` instead of importing from 'tonder-web-sdk'.
import { LiteInlineCheckout } from 'tonder-web-sdk'

let selectedMethod = null;

async function run() {
  const lite = new LiteInlineCheckout({
    mode: 'stage',
    apiKey: '11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27',
    returnUrl: window.location.href,
  });

  await lite.injectCheckout();
  lite.verify3dsTransaction().then(res => console.log("Verify 3DS:", res));

  // Select APM
  document.querySelectorAll('.apm-card').forEach(card => {
    card.addEventListener('click', () => {
      document.querySelectorAll('.apm-card.selected').forEach(el => el.classList.remove('selected'));
      card.classList.add('selected');
      selectedMethod = card.dataset.method;
    });
  });

  // Quick amount buttons
  const input = document.getElementById('amount-input');
  document.querySelectorAll('.preset-amount').forEach(btn => {
    btn.addEventListener('click', () => {
      input.value = btn.dataset.amount;
    });
  });

  // Pay
  const payBtn = document.getElementById('pay-button');
  payBtn.addEventListener('click', async () => {
    if (!selectedMethod || !input.value) return alert('Select APM and amount');

    const amount = parseFloat(input.value);
    const data = {
      ...checkoutData,
      cart: {
        ...checkoutData.cart,
        total: amount,
        items: [{ ...checkoutData.cart.items[0], amount_total: amount }]
      },
      payment_method: selectedMethod,
    };

    try {
      payBtn.textContent = "Processing...";
      const res = await lite.payment(data);
      console.log("Payment response:", res);
      alert("Payment successful");
    } catch (err) {
      console.error(err);
      alert("Payment failed");
    } finally {
      payBtn.textContent = "Deposit";
    }
  });
}

const checkoutData = {
  customer: {
    firstName: "Adrian",
    lastName: "Martinez",
    country: "Mexico",
    address: "Pinos 507, Col El Tecuan",
    city: "Durango",
    state: "Durango",
    postCode: "34105",
    email: "adrian@email.com",
    phone: "8161234567",
    identification: {
      type: "CPF",
      number: "19119119100"
    }
  },
  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
    }]
  },
  metadata: { order_id: "ORD-123456" },
  order_reference: "ORD-123456",
  apm_config: {}
};

run();
Open on CodeSandboxOpen Sandbox

Notes

  • You must call injectCheckout() before making a payment.
  • Always use a valid returnUrl to support 3DS and APM flows.
  • If using mercadopago or oxxopay APM, consider passing apm_config with extra info.
  • The method verify3dsTransaction() can be used to retrieve the latest status of the transaction after the payment is completed and the user returns to your site.

ℹ️ These examples assume that all required third-party scripts (Skyflow, Openpay, etc.) are already included. See Integration Requirements for details on loading the correct <script> tags.

Last updated on
Step by Step ImplementationWeb SDK — Inline Version