Customize the Inline Checkout UI

This page demonstrates how to show or hide sections of the Inline Checkout UI using the customization configuration.

You can:

Hide the saved cards list
Hide the Payment Methods list
Remove the payment or cancel buttons
Show a simplified form
Control behavior for saving cards

`customization` Configuration Reference

Each section of the checkout UI can be individually shown or hidden using the following options:


customization: {
  displayMode: "light" | "dark", // Theme appearance of the checkout
 
  saveCards: {
    showSaved: boolean,            // Show saved cards list if available
    showSaveCardOption: boolean,  // Show "Save Card" checkbox during checkout
    autoSave: boolean             // Automatically save card without showing checkbox
  },
 
  paymentMethods: {
    show: boolean                 // Show/hide the Alternative Payment Methods list
  },
 
  cardForm: {
    show: boolean                 // Show/hide the credit/debit card input form
  },
 
  paymentButton: {
    show: boolean,               // Show/hide the "Pay" button
    showAmount: boolean,         // Show amount inside the button label
    text: string                 // Custom text for the payment button (e.g. "Pay Now")
  },
 
  cancelButton: {
    show: boolean,               // Show/hide the cancel button
    text: string                 // Custom text for the cancel button (e.g. "Cancel")
  },
 
  showMessages: boolean           // Show system messages below buttons (errors, success)
}

Live Example

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.InlineCheckout(...)` instead of importing from 'tonder-web-sdk'.
import { InlineCheckout } from 'tonder-web-sdk'

async function run() {
  await loadScript("https://js.skyflow.com/v1/index.js");
  await loadScript("https://openpay.s3.amazonaws.com/openpay.v1.min.js");
  await loadScript("https://openpay.s3.amazonaws.com/openpay-data.v1.min.js");
  
  const inline = new InlineCheckout({
    mode: 'stage',
    apiKey: '11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27',
    returnUrl: window.location.href,
    customization: {
      displayMode: "light", // Use to toggle light/dark mode
      saveCards: {
        showSaveCardOption: true, // Show/hide the checkbox to save card for future payments
        autoSave: false, // Automatically save the card (without displaying checkbox)
        showSaved: true, // Show/hide the saved cards list
      },
      paymentButton: {
        show: false, // Show/hide the payment button
        showAmount: false, // Append amount to the button text
        text: "Pagar", // Custom text for the payment button
      },
      cancelButton: {
        show: false, // Show/hide the cancel button
        text: "Cancelar", // Custom text for the cancel button
      },
      paymentMethods: {
        show: true, // Show/hide the list of APMs
      },
      cardForm: {
        show: true, // Show/hide the card form
      },
    },
  });
  inline.configureCheckout({
  ...checkoutData, 
  secureToken: "eyJhbGc..." // Provide your secure token if using saved cards
  });
  await inline.injectCheckout();

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

  // Pay
  const payBtn = document.getElementById('pay-button');
  payBtn.addEventListener('click', async () => {
    try {
      payBtn.textContent = "Processing...";
      const res = await inline.payment();
      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: {}
};

function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = src;
    script.async = true;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

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.InlineCheckout(...)` instead of importing from 'tonder-web-sdk'.
import React, { useEffect, useState, useRef } from "react";
import { InlineCheckout } from "tonder-web-sdk";

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: {}
};

export default function App() {
  const [inlineCheckout, setInlineCheckout] = useState(null);
  const hasInitialized = useRef(false);
  useEffect(() => {
    if (hasInitialized.current) return;
    hasInitialized.current = true;
    const loadScript = src => new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = src;
      script.async = true;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });

    const run = async () => {
      await loadScript("https://js.skyflow.com/v1/index.js");
      await loadScript("https://openpay.s3.amazonaws.com/openpay.v1.min.js");
      await loadScript("https://openpay.s3.amazonaws.com/openpay-data.v1.min.js");

      const inline = new InlineCheckout({
        mode: "stage",
        apiKey: "11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27",
        returnUrl: window.location.href,
        customization: {
          displayMode: "light", // Use to toggle light/dark mode
          saveCards: {
            showSaveCardOption: true, // Show/hide the checkbox to save card for future payments
            autoSave: false, // Automatically save the card (without displaying checkbox)
            showSaved: true  // Show/hide the saved cards list
          },
          paymentButton: {
            show: false, // Show/hide the payment button
            showAmount: false, // Append amount to the button text
            text: "Pagar" // Custom text for the payment button
          },
          cancelButton: {
            show: false, // Show/hide the cancel button
            text: "Cancelar" // Custom text for the cancel button
          },
          paymentMethods: {
            show: true // Show/hide the list of APMs
          },
          cardForm: {
            show: true // Show/hide the card form
          }
        }
      });

      inline.configureCheckout({
        ...checkoutData,
        secureToken: "eyJhbGc..."
      });

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

      setInlineCheckout(inline);
    };

    run();
  }, []);

  const handlePayment = async () => {
    try {
      const response = await inlineCheckout.payment();
      console.log("Payment response:", response);
      alert("Payment successful");
    } catch (error) {
      console.error("Payment failed:", error);
      alert("Payment failed");
    }
  };

  return (
    <div style={{ fontFamily: "sans-serif", maxWidth: 600, margin: "0 auto" }}>
      <div id="tonder-checkout"></div>
      <button id="pay-button" onClick={handlePayment} style={{ marginTop: 20 }}>
        Depositar
      </button>
    </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.InlineCheckout(...)` instead of importing from 'tonder-web-sdk'.
import { Component, OnInit } from '@angular/core';
import { InlineCheckout } from 'tonder-web-sdk';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  loading = false;
  inlineCheckout: any;

  async ngOnInit() {
    await this.loadScript('https://js.skyflow.com/v1/index.js');
    await this.loadScript('https://openpay.s3.amazonaws.com/openpay.v1.min.js');
    await this.loadScript('https://openpay.s3.amazonaws.com/openpay-data.v1.min.js');
    this.inlineCheckout = new InlineCheckout({
      mode: 'stage',
      apiKey: '11e3d3c3e95e0eaabbcae61ebad34ee5f93c3d27',
      returnUrl: window.location.href,
      customization: {
        displayMode: 'light', // Use to toggle light/dark mode
        saveCards: {
          showSaveCardOption: true, // Show/hide the checkbox to save card for future payments
          autoSave: false, // Automatically save the card (without displaying checkbox)
          showSaved: true // Show/hide the saved cards list
        },
        paymentButton: {
          show: false, // Show/hide the payment button
          showAmount: false, // Append amount to the button text
          text: 'Pagar' // Custom text for the payment button
        },
        cancelButton: {
          show: false, // Show/hide the cancel button
          text: 'Cancelar' // Custom text for the cancel button
        },
        paymentMethods: {
          show: true // Show/hide the list of APMs
        },
        cardForm: {
          show: true // Show/hide the card form
        }
      }
    });

    await this.inlineCheckout.configureCheckout({
      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: {},
      secureToken: 'eyJhbGc...'
    });

    await this.inlineCheckout.injectCheckout();
    this.inlineCheckout.verify3dsTransaction().then(res => {
      console.log('Verify 3DS:', res);
    });
  }

  async handlePayment() {
    this.loading = true;

    try {
      const response = await this.inlineCheckout.payment();
      console.log('Payment response:', response);
      alert('Payment successful');
    } catch (error) {
      console.error('Payment failed:', error);
      alert('Payment failed');
    } finally {
      this.loading = false;
    }
  }

  private loadScript(src: string): Promise<void> {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = src;
      script.async = true;
      script.onload = () => resolve();
      script.onerror = () => reject();
      document.head.appendChild(script);
    });
  }
}

Open Sandbox

More Examples

Show only card form (no saved cards, no APMs)


customization: {
  cardForm: { show: true },        // ✅ Show credit/debit card inputs form
  saveCards: {
    showSaved: false,             // ❌ Hide saved cards list
    showSaveCardOption: false,     // ❌ Hide "Save Card" checkbox
    autoSave: false               // ❌ Let user choose to save or not
  },
  paymentMethods: { show: false }, // ❌ Hide APM buttons
}

Show only Payment Methods


customization: {
  paymentMethods: { show: true },  // ✅ Show APM buttons (oxxopay, spei, etc.)
  saveCards: {
    showSaved: false,             // ❌ Hide saved cards list
    showSaveCardOption: false,    // ❌ Hide "Save Card" checkbox
    autoSave: false               // ❌ Don't auto-save cards
  },
  cardForm: { show: false },      // ❌ Hide credit/debit card form
}

Show only saved cards list


customization: {
  saveCards: {
    showSaved: true,              // ✅ Show saved cards
    showSaveCardOption: false,    // ❌ Hide "Save Card" checkbox
    autoSave: false               // ❌ Don't auto-save new cards
  },
  cardForm: { show: false },      // ❌ Hide card inputs form
  paymentMethods: { show: false }, // ❌ Hide APM buttons (oxxopay, spei, etc.)
}

Hide buttons


customization: {
  paymentButton: { show: false }, ❌ Hide "Pay" button (trigger programmatically)
  cancelButton: { show: false }, // ❌ Hide cancel button
}

You can freely combine any of these options to match your checkout use case.

Notes

You can selectively show/hide any part of the checkout using customization.
To trigger a payment programmatically, use inlineCheckout.payment({...}).
Always call configureCheckout() and injectCheckout() before triggering payment.

ℹ️ 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.

Customize the Inline Checkout UI

customization Configuration Reference

Live Example

JavaScript

React

Angular

More Examples

Show only card form (no saved cards, no APMs)

Show only Payment Methods

Show only saved cards list

Hide buttons

Notes

`customization` Configuration Reference