> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tonder.io/llms.txt
> Use this file to discover all available pages before exploring further.
# 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](/sdk-integration/mobile/ionic-full/requirements-and-installation) the Tonder Ionic Full SDK.
* You must add Openpay dependencies to your index.html file.
```html title="index.html" theme={null}
...
...
```
* 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:
```xml theme={null}
```
## HTML Structure
Ensure you have an entry point with the mandatory ID 'tonder-checkout':
```html theme={null}
```
## 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.
```javascript theme={null}
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.
```javascript theme={null}
// 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).
```javascript theme={null}
// 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
```javascript theme={null}
// 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](/sdk-integration/mobile/ionic-full/methods) for advanced payment operations.