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

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:

  1. Retrieve available payment methods from the SDK (see the Payment Methods page), or use the known list of supported APMs
  2. Render the list in your UI for user selection
  3. Pass the payment method (e.g., 'spei') into the payment() 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 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.

Next Steps

Last updated on