Step by Step Implementation

This guide provides a complete step-by-step implementation for processing payments with Alternative Payment Methods using the Tonder Web SDK Lite.

1. Include the SDK

Option A – Using a `<script>` tag


<script src="https://zplit-prod.s3.amazonaws.com/v1/bundle.min.js"></script>
<script>
  const lite = new TonderSdk.LiteInlineCheckout({
    mode: 'stage',
    apiKey: 'YOUR_API_KEY',
    returnUrl: window.location.href
  });
</script>

Option B – Using a bundler


import { LiteInlineCheckout } from 'tonder-web-sdk';
 
const lite = new LiteInlineCheckout({
  mode: 'stage',
  apiKey: 'YOUR_API_KEY',
  returnUrl: window.location.href
});

2. Configure the checkout (Optional)

Required for saved cards: If you’re using saved cards, this step is mandatory to load them into the UI.


lite.configureCheckout({
  ...checkoutData,
  secureToken: "eyJhbGc..." // 🔐 Required if using saved cards
});

3. Inject the checkout UI


await lite.injectCheckout();

4. Define the checkout data


const checkoutData = {
  customer: {
    firstName: "Adrian",
    lastName: "Martinez",
    email: "adrian@email.com",
    phone: "8161234567",
    identification: {
      type: "CPF",
      number: "19119119100"
    },
    country: "Mexico",
    address: "Pinos 507, Col El Tecuan",
    city: "Durango",
    state: "Durango",
    postCode: "34105"
  },
  currency: "mxn",
  cart: {
    total: 399,
    items: [{
      name: "T-Shirt",
      description: "Black T-Shirt",
      quantity: 1,
      price_unit: 1,
      discount: 0,
      taxes: 0,
      product_reference: 1,
      amount_total: 399
    }]
  },
  metadata: {
    order_id: "ORD-123456"
  },
  order_reference: "ORD-123456",
  apm_config: {}
};

5. Set the payment method

Hardcode the payment method or Dynamically select via UI


const selectedMethod = "oxxopay"; // or "spei", "mercadopago", etc.

6. Process the payment


const amount = 399;
 
const paymentData = {
  ...checkoutData,
  cart: {
    ...checkoutData.cart,
    total: amount,
    items: [{
      ...checkoutData.cart.items[0],
      amount_total: amount
    }]
  },
  payment_method: selectedMethod // 🔥 Key: this defines the selected payment method
};
 
try {
  const response = await lite.payment(paymentData);
  console.log("Payment response:", response);
 
  // Handle successful payment
  handlePaymentSuccess(response);
} catch (error) {
  console.error("Payment failed:", error);
 
  // Handle payment error
  handlePaymentError(error);
}

Notes

⚠️

Critical: The payment method must be passed in the payment_method field:


payment_method: "spei" // or any other supported method

For saved cards, also include:


secureToken: "your_token" // required to load saved cards

Next Steps

Complete Examples - See all examples for different use cases with APMs
Payment Methods - See all supported APMs