Make a Payment

This guide walks you through processing a payment using the Full SDK (InlineCheckout) for Ionic. This revised flow ensures proper initialization, payment data configuration, and immediate 3D Secure verification handling.

Prerequisites

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

You have successfully installed and configured the Tonder Ionic Full 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 a checkout page with an empty div element to contain the SDK’s 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" />

HTML Structure

Ensure you have an entry point with the mandatory ID ‘tonder-checkout’:

<div id="tonder-checkout"></div>
<button id="pay-button">Pay Now</button>

Payment Integration Steps

This process requires you to initialize the SDK, then configure initial data, inject the UI, handle 3DS verification, and finally process the payment.

Step 1: Initialize the SDK

Create an instance of InlineCheckout and define the required paymentData structure. The full payment data is defined when calling the payment() method.

import { InlineCheckout } from "@tonder.io/ionic-full-sdk";

const inlineCheckout = new InlineCheckout({
  apiKey: "YOUR_API_KEY", // Required 
  returnUrl: "YOUR_RETURN_URL", // Required 
  mode: "stage", // 'stage' or 'production' 
  // Optional: Set to true only if you want the SDK to render a default payment button
  // renderPaymentButton: false
});

Step 2: Inject the Checkout UI

You must call configureCheckout() after creating the instance. This function sets initial customer information (like email) used for features such as fetching saved cards.

// The configureCheckout function allows you to set initial information 
inlineCheckout.configureCheckout({
  customer: {
    email: "example@email.com",
    // Note: Use a SecureToken for implementing the SaveCard feature 
    // secureToken: "e89eb18.."
  }
});

// Inject the checkout interface into the DOM
inlineCheckout.injectCheckout();

Step 3: Handle 3DS Verification

This step must be called immediately after injectCheckout() to correctly verify transactions (like redirects from a 3DS challenge).

// It should be called after the injectCheckout method 
inlineCheckout.verify3dsTransaction().then((response) => {
  // The response status will be one of: ['Declined', 'Cancelled', 'Failed', 'Success', 'Pending', 'Authorized'] 
  console.log("Verify 3ds response", response);
});

Step 4: Process the Payment

Configure the payment processing by listening to your custom button click. The complete payment data structure (customer, cart, currency, metadata) must be passed to the payment() method

// On your return page
document.getElementById('pay-button').addEventListener('click', async () => {
  const paymentData = {
    // This data structure must conform to the API's requirements 
    customer: { firstName: "Juan", email: "juan.hernandez@mail.com" /* ... */ },
    cart: { total: "399.00", items: [ /* ... */ ] }, // Total should be a float string 
    currency: "MXN"
  };

  try {
    // Process a payment
    const response = await inlineCheckout.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, explore these advanced features to enhance your payment experience:

Explore the available SDK methods for advanced payment operations.

SDK Overview

Web SDKs

Mobile SDKs

Make a Payment

Prerequisites

Mobile Network Permissions

HTML Structure

Payment Integration Steps

Step 1: Initialize the SDK

Step 2: Inject the Checkout UI

Step 3: Handle 3DS Verification

Step 4: Process the Payment

Next Steps

​Prerequisites

​Mobile Network Permissions

​HTML Structure

​Payment Integration Steps

​Step 1: Initialize the SDK

​Step 2: Inject the Checkout UI

​Step 3: Handle 3DS Verification

​Step 4: Process the Payment

​Next Steps

Prerequisites

Mobile Network Permissions

HTML Structure

Payment Integration Steps

Step 1: Initialize the SDK

Step 2: Inject the Checkout UI

Step 3: Handle 3DS Verification

Step 4: Process the Payment

Next Steps