> ## 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 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](/sdk-integration/mobile/ionic-lite/requirements-and-installation) the Tonder Ionic Lite SDK.
* You must add Openpay dependencies to your index.html file.
```html title="index.html" theme={null}
...
...
```
* 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:
```xml theme={null}
```
## 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.
```javascript theme={null}
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.
```javascript theme={null}
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:
```html theme={null}
Card Number
Cardholder Name
Expiry Month
Expiry Year
CVV
Pay Now
```
### Step 4: Process the Payment
Collect the data from your custom form and process the payment using the Lite SDK methods.
```javascript theme={null}
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](/sdk-integration/mobile/ionic-lite/enroll-payment-method) for returning customers.
* Explore the [available SDK methods](/sdk-integration/mobile/ionic-lite/methods) for advanced payment operations.
* Learn more about [customization options](/sdk-integration/mobile/ionic-lite/customization) for building your perfect payment experience.