Skip to main content
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: