Payment Methods

This example shows how to retrieve the list of active payment methods using the Tonder Web SDK Lite.

You can use this data to render a custom UI and let the user select their preferred payment method (e.g., cards, bank transfers, wallets, etc).

Expected Output

The SDK returns an array of payment methods with the following structure:


export interface PaymentMethod {
  id: string;
  payment_method: string;
  priority: number;
  category: string;
  icon: string;
  label: string;
}

Use this list to display icons and labels in your UI. You are free to use your own icons or the ones provided.

Available Payment Methods

You may either retrieve available methods from the SDK or hardcode one of the following supported APMs:

oxxopaymercadopagospeiWaldosTelecommElasturianoBancomerCirculokPaycashCashmxWalmartAlsuperKiosko7elevenCalimaxPaynetComercialmexicanaSorianaBodegaExtraSuperamaBenavidesDelahorroLamasbarataStamariaSamsclubBanorteFarmromaCodi

Example Code

JavaScript

// 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: 'https://your-site.com/callback',
  })

  await liteCheckout.injectCheckout()
  const methods = await liteCheckout.getCustomerPaymentMethods()

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

  // Just an example to showcase the APMs.
  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')
    }

    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()

Open Sandbox

React

// 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 React, { useEffect, useState } from "react";
import { LiteInlineCheckout } from "tonder-web-sdk";

export default function App() {
  const [methods, setMethods] = useState([]);
  const [selected, setSelected] = useState(null);

  useEffect(() => {
    const run = async () => {
      const lite = new LiteInlineCheckout({
        mode: "stage",
        apiKey: "11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27",
        returnUrl: "https://your-site.com/callback"
      });

      await lite.injectCheckout();
      const methods = await lite.getCustomerPaymentMethods();
      setMethods(methods);
    };

    run();
  }, []);

  return (
    <div style={{ padding: 16, fontFamily: "sans-serif" }}>
      <h3>Select a Payment Method</h3>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
        {methods.map((method) => (
          <div
            key={method.id}
            onClick={() => setSelected(method.id)}
            style={{
              border: selected === method.id ? "2px solid #0070f3" : "1px solid #ccc",
              borderRadius: 8,
              padding: 8,
              width: 95,
              textAlign: "center",
              cursor: "pointer",
              background: selected === method.id ? "#eef6ff" : "white"
            }}
          >
            <img src={method.icon} alt={method.label} style={{ width: 32, height: 32 }} />
            <div style={{ marginTop: 8 }}>{method.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Open Sandbox

Angular

// 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 { Component, OnInit } from '@angular/core'
import { LiteInlineCheckout } from 'tonder-web-sdk'

@Component({
  selector: 'app-root',
  template: `
    <h3>Select a Payment Method</h3>
    <div id="apm-list">
      <div
        *ngFor="let method of methods"
        (click)="selectMethod(method)"
        [class.selected]="method.id === selectedId"
        class="apm-card"
      >
        <img [src]="method.icon" [alt]="method.label" />
        <div class="label">{{ method.label }}</div>
      </div>
    </div>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  methods: any[] = [];
  selectedId: string | null = null;

  async ngOnInit() {
    const lite = new LiteInlineCheckout({
      mode: 'stage',
      apiKey: '11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27',
      returnUrl: 'https://your-site.com/callback',
    });

    await lite.injectCheckout();
    this.methods = await lite.getCustomerPaymentMethods();
  }

  selectMethod(method: any) {
    this.selectedId = method.id;
  }
}

Open Sandbox

Notes

You must call injectCheckout() before retrieving payment methods.

Ready to build your own UI? You can now render these methods and pass the payment_method key into the payment flow.