Introduction
This guide shows how to perform payments using the Tonder Web SDK Lite with Alternative Payment Methods like oxxopay, mercadopago, spei, and others.
Payment Flow Overview
To process a payment using an APM, follow these steps:
- Retrieve available payment methods from the SDK (see the Payment Methods page), or use the known list of supported APMs
- Render the list in your UI for user selection
- Pass the payment method (e.g.,
'spei') into thepayment()method
You can hardcode the method, or dynamically let the user choose one. It is not required to use getCustomerPaymentMethods — you may render your own list as long as you pass a valid payment_method value.
Available Payment Methods
For the full list of supported APMs, visit the Payment Methods page.
Pass one of these as the payment_method value:
await liteCheckout.payment({
...checkoutData,
payment_method: 'spei'
})Quick Example
Here’s a simple example of how to process an APM payment:
// After initializing the SDK and injecting the checkout
const paymentData = {
...checkoutData,
payment_method: 'oxxopay' // Selected APM
};
try {
const response = await lite.payment(paymentData);
console.log('Payment successful:', response);
} catch (error) {
console.error('Payment failed:', error);
}Important Notes
- You must call
injectCheckout()before making a payment - Always use a valid
returnUrlto support 3DS and APM flows - If using
mercadopagooroxxopayAPM, consider passingapm_configwith 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.
Next Steps
- Complete Step-by-Step Implementation - Detailed implementation guide
- Complete Examples - See all examples for different use cases with APMs
- Payment Methods - Full list of supported APMs