Make a Payment

This guide walks you through processing a payment using the Lite SDK (LiteCheckout) for Ionic. The Lite SDK gives you complete control over your payment UI while handling all the secure payment processing logic.

Prerequisites

Before you can process payments with the Tonder Ionic Lite SDK, ensure you have completed the necessary setup and have the required components in place.

You have successfully installed and configured the Tonder Ionic Lite SDK.
You must add Openpay dependencies to your index.html file.

index.html

<head>
  ...
  <script src="[https://openpay.s3.amazonaws.com/openpay.v1.min.js](https://openpay.s3.amazonaws.com/openpay.v1.min.js)"></script>
  <script src="[https://openpay.s3.amazonaws.com/openpay-data.v1.min.js](https://openpay.s3.amazonaws.com/openpay-data.v1.min.js)"></script>
  ...
</head>

You have created your own custom payment form UI.

Before you can process payments, ensure all required dependencies are installed and configured

Mobile Network Permissions

If deploying to a mobile platform, you must configure network permissions:

Android: Edit AndroidManifest.xml to add the Internet permission:

<uses-permission android:name="android.permission.INTERNET" />

Payment Integration Steps

This process requires you to initialize the SDK with your custom UI, collect payment data from your form, and process the payment using the SDK’s secure methods.

Step 1: Initialize the SDK

Create an instance of LiteCheckout with your API configuration.

import { LiteCheckout } from "@tonder.io/ionic-lite-sdk";

const liteCheckout = new LiteCheckout({
  apiKey: "YOUR_API_KEY",
  returnUrl: "YOUR_RETURN_URL",
  mode: "stage", // 'stage' or 'production'
});

Step 2: Configure Customer Data

Set the initial customer information using the configureCheckout method.

liteCheckout.configureCheckout({
  customer: {
    email: "customer@example.com",
    // Optional: Use a SecureToken for implementing the SaveCard feature
    // secureToken: "e89eb18.."
  }
});

Step 3: Build Your Custom Payment Form

Create your own payment form using Ionic components. Here’s a simple example:

<ion-item>
  <ion-label position="floating">Card Number</ion-label>
  <ion-input id="cardNumber" type="text"></ion-input>
</ion-item>

<ion-item>
  <ion-label position="floating">Cardholder Name</ion-label>
  <ion-input id="cardholderName" type="text"></ion-input>
</ion-item>

<ion-item>
  <ion-label position="floating">Expiry Month</ion-label>
  <ion-input id="expiryMonth" type="text"></ion-input>
</ion-item>

<ion-item>
  <ion-label position="floating">Expiry Year</ion-label>
  <ion-input id="expiryYear" type="text"></ion-input>
</ion-item>

<ion-item>
  <ion-label position="floating">CVV</ion-label>
  <ion-input id="cvv" type="text"></ion-input>
</ion-item>

<ion-button id="pay-button">Pay Now</ion-button>

Step 4: Process the Payment

Collect the data from your custom form and process the payment using the Lite SDK methods.

document.getElementById('pay-button').addEventListener('click', async () => {
  // Collect data from your custom form
  const paymentData = {
    customer: {
      firstName: document.getElementById('firstName').value,
      email: document.getElementById('email').value,
      // ... other customer data
    },
    cart: {
      total: "399.00",
      items: [
        // ... cart items
      ]
    },
    currency: "MXN",
    card: {
      card_number: document.getElementById('cardNumber').value,
      cardholder_name: document.getElementById('cardholderName').value,
      expiration_month: document.getElementById('expiryMonth').value,
      expiration_year: document.getElementById('expiryYear').value,
      cvv: document.getElementById('cvv').value,
    }
  };

  try {
    // Process payment using Lite SDK methods
    const response = await liteCheckout.payment(paymentData);
    console.log('Payment successful:', response);
  } catch (error) {
    console.error('Payment failed:', error);
  }
});

Next Steps

Now that you’ve successfully integrated payment processing into your Ionic app with the Lite SDK, explore these features to enhance your payment experience:

Learn how to enroll payment methods for returning customers.
Explore the available SDK methods for advanced payment operations.
Learn more about customization options for building your perfect payment experience.

SDK Overview

Web SDKs

Mobile SDKs

Make a Payment

Prerequisites

Mobile Network Permissions

Payment Integration Steps

Step 1: Initialize the SDK

Step 2: Configure Customer Data

Step 3: Build Your Custom Payment Form

Step 4: Process the Payment

Next Steps

​Prerequisites

​Mobile Network Permissions

​Payment Integration Steps

​Step 1: Initialize the SDK

​Step 2: Configure Customer Data

​Step 3: Build Your Custom Payment Form

​Step 4: Process the Payment

​Next Steps

Prerequisites

Mobile Network Permissions

Payment Integration Steps

Step 1: Initialize the SDK

Step 2: Configure Customer Data

Step 3: Build Your Custom Payment Form

Step 4: Process the Payment

Next Steps