Ionic
Los métodos y parámetros del SDK de Ionic.
Referencia de los métodos del SDK de Ionic de Tonder para apps móviles híbridas: la clase
InlineCheckout (Full, paquete @tonder.io/ionic-full-sdk) y la clase LiteCheckout (Lite,
paquete @tonder.io/ionic-lite-sdk). Requiere el script tag de Skyflow.
InlineCheckout (Full)
Constructor InlineCheckout
| Parámetro | Tipo | Requerido | Descripción |
|---|---|---|---|
apiKey | String | Sí | Tu llave API de Tonder para autenticación. |
returnUrl | String | Sí | URL donde se monta el checkout (para completar la redirección 3DS). |
mode | String | No | Modo de entorno. Opciones: product o stage. |
renderPaymentButton | Boolean | No | Si es true, el SDK renderiza un botón de pago por defecto (debes usar setPaymentData()). |
const inlineCheckout = new InlineCheckout({
apiKey: "YOUR_API_KEY",
returnUrl: "YOUR_RETURN_URL",
mode: "stage",
renderPaymentButton: false
});Métodos
| Método | Descripción |
|---|---|
configureCheckout(data) | Configura los datos del cliente (al menos el email; incluye secureToken para guardar tarjetas). |
injectCheckout() | Renderiza la UI de checkout en tu contenedor. |
setPaymentData(data) | Establece los datos de pago (cliente, carrito, metadata); útil con el botón de pago por defecto. |
payment(checkoutData) | Inicia una transacción de pago de forma segura usando los datos proporcionados. |
verify3dsTransaction() | Verifica el estado de una transacción 3D Secure tras la redirección. |
saveCard() | Guarda una nueva tarjeta. Útil cuando el SDK está configurado como tarjeta de enrolamiento (isEnrollmentCard: true). |
removeCheckout() | Elimina la UI de checkout del DOM y libera recursos. |
inlineCheckout.configureCheckout({
customer: {
email: "example@email.com",
secureToken: "e89eb18.." // Requerido para guardar tarjetas
}
});LiteCheckout (Lite)
Construye tu propia UI mientras Tonder tokeniza los datos sensibles. Expone la clase LiteCheckout
del paquete @tonder.io/ionic-lite-sdk.
| Método | Descripción |
|---|---|
new LiteCheckout(config) | Crea e inicializa la instancia (apiKey, returnUrl, mode). |
configureCheckout(config) | Establece el email del cliente y el secureToken para la gestión de tarjetas. |
payment(checkoutData) | Procesa un pago de forma segura usando los datos de tu UI personalizada. |
getCustomerCards() | Recupera las tarjetas guardadas del cliente configurado. |
saveCustomerCard(cardData) | Tokeniza y guarda de forma segura una nueva tarjeta. |
removeCustomerCard(cardId) | Elimina una tarjeta guardada usando su ID único. |
verify3dsTransaction() | Verifica el estado de una transacción 3D Secure tras la redirección. |
Constructor LiteCheckout
| Parámetro | Tipo | Requerido | Descripción |
|---|---|---|---|
apiKey | String | Sí | Tu llave API de Tonder para autenticación. |
returnUrl | String | No | URL donde se monta el checkout (para completar la redirección 3DS). |
mode | String | No | Modo de entorno. Opciones: product o 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"
}
});Siguientes pasos
¿Te resultó útil esta página?