Ionic
The Ionic SDK's methods and parameters.
Reference for Tonder's Ionic SDK methods for hybrid mobile apps: the InlineCheckout class
(Full, @tonder.io/ionic-full-sdk package) and the LiteCheckout class (Lite,
@tonder.io/ionic-lite-sdk package). Requires the Skyflow script tag.
InlineCheckout (Full)
InlineCheckout constructor
| Parameter | Type | Required | Description |
|---|---|---|---|
apiKey | String | Yes | Your Tonder API key for authentication. |
returnUrl | String | Yes | URL where the checkout is mounted (to complete the 3DS redirect). |
mode | String | No | Environment mode. Options: product or stage. |
renderPaymentButton | Boolean | No | If true, the SDK renders a default payment button (you must use setPaymentData()). |
const inlineCheckout = new InlineCheckout({
apiKey: "YOUR_API_KEY",
returnUrl: "YOUR_RETURN_URL",
mode: "stage",
renderPaymentButton: false
});Methods
| Method | Description |
|---|---|
configureCheckout(data) | Configures customer data (at least the email; include secureToken to save cards). |
injectCheckout() | Renders the checkout UI into your container. |
setPaymentData(data) | Sets the payment data (customer, cart, metadata); useful with the default payment button. |
payment(checkoutData) | Initiates a payment transaction securely using the provided data. |
verify3dsTransaction() | Verifies a 3D Secure transaction's status after redirection. |
saveCard() | Saves a new card. Useful when the SDK is configured as an enrollment card (isEnrollmentCard: true). |
removeCheckout() | Removes the checkout UI from the DOM and cleans up resources. |
inlineCheckout.configureCheckout({
customer: {
email: "example@email.com",
secureToken: "e89eb18.." // Required for saving cards
}
});LiteCheckout (Lite)
Build your own UI while Tonder tokenizes sensitive data. Exposes the LiteCheckout class from the
@tonder.io/ionic-lite-sdk package.
| Method | Description |
|---|---|
new LiteCheckout(config) | Creates and initializes the instance (apiKey, returnUrl, mode). |
configureCheckout(config) | Sets the customer email and the secureToken for card management. |
payment(checkoutData) | Processes a payment securely using data from your custom UI. |
getCustomerCards() | Retrieves the configured customer's saved cards. |
saveCustomerCard(cardData) | Securely tokenizes and saves a new card. |
removeCustomerCard(cardId) | Deletes a saved card using its unique ID. |
verify3dsTransaction() | Verifies a 3D Secure transaction's status after redirection. |
LiteCheckout constructor
| Parameter | Type | Required | Description |
|---|---|---|---|
apiKey | String | Yes | Your Tonder API key for authentication. |
returnUrl | String | No | URL where the checkout is mounted (to complete the 3DS redirect). |
mode | String | No | Environment mode. Options: product or stage. |
const liteCheckout = new LiteCheckout({
apiKey: "YOUR_API_KEY",
returnUrl: "YOUR_RETURN_URL",
mode: "stage"
});payment(checkoutData)
const response = await liteCheckout.payment({
customer: { firstName: "Juan", email: "juan.hernandez@mail.com" },
cart: { total: "399.00", items: [ /* ... */ ] },
currency: "MXN",
card: {
card_number: "4111111111111111",
cvv: "123",
expiration_month: "12",
expiration_year: "25",
cardholder_name: "John Doe"
}
});Next steps
Was this page helpful?