Crea un cargo recurrente

Registra los datos de tarjeta de tus clientes para cobrar con la recurrencia que definas

Web

iOS

Android

Esta funcionalidad se encuentra disponible para los siguientes modelos:

☑ Adquirente

☑ Agregador

Realizar cargos recurrentes con tarjetas de crédito y débito en tu sitio consiste en capturar la información de tarjeta, generar un token y crear el cargo calendarizado en Kushki. Con esto, los cobros se harán automáticamente con la periodicidad que elijas.

Al realizar una suscripción se hará un cargo a la tarjeta del cliente por un monto pequeño (50 CLP) que permitirá verificar si la tarjeta está activa y con saldo. Este cobro se reversará automáticamente.

Sin embargo es posible, previa solicitud al equipo de Kushki, omitir estos cobros de validación durante la tokenización de una tarjeta para la ejecución de cargos recurrentes o bajo demanda.

Un ejemplo de lo que podrías integrar:

El flujo de pago que integrarás es el siguiente:

1. Configura tu front-end

La responsabilidad del front-end es recoger la información de tarjeta del usuario de una manera segura, tokenizarla a través de los servidores de Kushki, y luego enviarla a tu back-end para crear el cargo calendarizado.

Tienes tres opciones para integrar Kushki en tu página web: Kajita, Kushki.js y Kushki.js Hosted Fields.

Kajita

Kushki cuenta con formularios de pago listos para recopilar información de tarjeta de forma segura. Podrás usar cualquiera de nuestras versiones:

Cajita: la primera versión del formulario de pagos. No es personalizable.

Kajita: la segunda versión. Te permite personalizar tus formularios de pago desde tu Consola de administración e incluso tener varias versiones de Kajita.

Crea y personaliza tus Kajitas

Con Kushki puedes crear tus Kajitas desde la Consola de administración. Haz clic aquí para aprender cómo hacerlo.

Configura Kajita

Incluye el script de kushki-checkout.js en tu página de pago añadiéndolo al <head> de tu archivo HTML. Siempre carga kushki-checkout directamente desde cdn.kushkipagos.com. No incluyas el script en un bundle o paquete ni hostees una copia de él.

Añade Kajita a tu sitio

Kajita necesita un espacio dentro de tu página. Ingresa el siguiente código en el <body> de tu sitio donde quieras que se despliegue el formulario de pago.

Para Kajita (v.2):

Para Cajita (v.1)

Recuerda configurar la acción del formulario action de acuerdo con el endpoint correspondiente en tu back-end, para obtener el token.

Luego, agrega el tag script.

Para la Kajita (v.2) Podrás obtener dicho script desde tu Consola de administración según lo explicado aquí.

Para la v.1 (Cajita), añade el siguiente script y asegúrate de que el formulario se haya cargado:

Esto creará un formulario predefinido en tu página para aceptar pagos.

Kushki.js

Usa Kushki.js si necesitas un mayor control sobre el "look & feel" o apariencia de tu formulario de pago.

Configura Kushki.js

Opción 1 - CDN

Usa el siguiente tag script al final del <body> en tu página de pagos.

Opción 2 - NPM

Instala el paquete desde npm.

Luego impórtalo en tu código utilizando el siguiente código.

Configura el objeto `Kushki`

Añade el siguiente código a tu aplicación

Recoge la información del usuario y envíala a tu back-end

Primero, añade el formulario a tu página de pagos con los campos requeridos. Puedes diseñarlo de la forma que mejor te parezca.

Por ejemplo:

Luego, cuando el usuario envía el formulario, deberás solicitar el token y enviarlo a tu back-end.

Para mayores detalles, revisa nuestra referencia completa de Kushki.js

Kushki.js Hosted Fields

Con Hosted Fields, incluido en Kushki.js, podrás recolectar de forma segura la información del pago del cliente a través de campos almacenados en infraestructura de Kushki. Devuelve un token el cual permite continuar con el flujo de pago desde el back-end.

Importa Kushki.js Hosted Fields en tu aplicación

Opción 1 - CDN

Importa la biblioteca de Kushki.js Hosted Fields en tu aplicación a través de una etiqueta <script> dentro de la etiqueta <body>. Una vez importada, podrás acceder a los recursos descritos a continuación para crear un flujo de pago con Kushki.

Es necesario importar tanto la biblioteca kushki.min.js (la cuál trae el código necesario para almacenar las credenciales de tu comercio) como la biblioteca card.min.js (módulo el cuál trae las funcionalidades necesarias para el flujo de pagos con tarjeta).

Opción 2 - NPM

Instala la biblioteca Kushki.js Hosted Fields como un paquete npm dentro de tu aplicación con el siguiente código:

Opción 3 - YARN

Instala la biblioteca Kushki.js Hosted Fields como un paquete yarn dentro de tu aplicación con el siguiente código:

Crea una instancia de `KushkiOptions`

Para hacer uso de la biblioteca Kushki.js Hosted Fields, es necesario primero crear una instancia de tipo KushkiOptions la cuál te permite declarar la clave pública del comercio así como poder seleccionar el ambiente (prueba o producción) mediante el método init().

Nota: Cuando estés listo para aceptar pagos reales, es necesario que reemplaces la clave de prueba con la clave de producción.

Añade el siguiente código a tu aplicación:

Revisa la referencia para más información sobre la instancia KushkiOptions.

Inicializa el formulario en el front-end

Sigue los pasos a continuación para poder renderizar los campos de lado del servidor en tu sitio y que tu cliente pueda ingresar los datos necesarios para realizar la transacción.

Paso 1. Definir los contenedores para los campos de lado del servidor.

Antes de llamar al método initCardToken(), es requerido que coloques los elementos necesarios para poder renderizar cada campo de lado del servidor.

Paso 2. Crear una instancia de CardOptions

Crea una instancia de CardOptions con la información de la transacción tal como el monto, moneda, entre otros parámetros.

Nota: Para crear una suscripción es necesario que envíes la propiedad isSubscription con el valor de true.

Paso 3. Renderizar campos de lado del servidor con el método initCardToken()

Después de crear una instancia de CardOptions, es necesario mandar a llamar a la función initCardToken() para inicializar una instancia de ICard.

Revisa la referencia para más información sobre la inicialización del formulario
.

Solicita un token para seguir con el flujo de pago

Solicita un token de pago con tarjeta que podrás usar posteriormente para realizar un cobro a un cliente con el endpoint para crear un cargo recurrente.

Para obtener un token de pago con tarjeta, es necesario llamar al método requestToken() en la instancia de card inicializada previamente. Este método realiza las validaciones de 3DS, OTP, Sift Science automáticamente. Te recomendamos validar que todos los campos sean correctos; de lo contrario, arrojará una excepción.

Una vez obtenido el token, envíalo a tu back-end para seguir con el flujo de pago.

Para realizar validaciones mediante OTP, revisa validación OTP.

Consulta la referencia para más información sobre la solicitud de token.

2. Configura tu back-end

La responsabilidad del back-end es recibir el token obtenido desde tu front-end y crear la suscripción con Kushki.

Cuando el usuario envía el formulario, tu front-end transfiere un token a un endpoint que hayas especificado. Con este token, deberás realizar una llamada a nuestro endpoint del API para crear la suscripción.

JavaScript

Python

PHP

Revisa nuestra Referencia de la API para mayor información.

De acuerdo a tu respuesta, redirecciona al usuario a una pantalla de éxito o fracaso para informar al cliente si la suscripción se creó correctamente o si hubo un error.

Al realizar la inscripción se realizará un cargo a la tarjeta del cliente por un monto pequeño que permite verificar que la tarjeta esté activa y con saldo. Este cobro se reversará automáticamente.

3. Prueba tu integración

Los datos especificados a continuación servirán para probar la correcta creación de la inscripción en ambiente de pruebas UAT, sin embargo los cargos calendarizados no se ejecutarán en dicho ambiente.

Existen tarjetas de prueba que puedes utilizar en el ambiente UAT para asegurarte de que tu integración está lista. Úsalas con cualquier CVV, código postal y fecha de expiración futura.

Transacción aprobada: 5451951574925480

Transacción declinada en solicitud de token (front-end): 4574441215190335

4. Prepara tu certificación

Toma en consideración las siguientes pautas para aprobar la certificación técnica (requerida para obtener credenciales productivas):

Los cálculos de los impuestos están correctos.

No almacenas datos sensibles de tarjeta en tu base de datos (número completo de tarjeta, CVV, etc.).

Los mensajes que muestras en pantalla van de acuerdo con las respuestas de Kushki.

Guardas todas las respuestas de Kushki (requeridas en caso de necesitar soporte).

La fecha del primer cobro (startDate) es una fecha futura.

La suscripción se cancela con Kushki cuando tu cliente decide cancelar sus cobros recurrentes.

El logo de Kushki debe ser visible para el cliente. Puedes encontrar nuestro logo en varios formatos aquí.

Asegúrate de enviar todos los datos requeridos que se especifican en la Referencia de la API.

Si estás utilizando Kushki.js, considera también lo siguiente:

El nombre del titular de la tarjeta es requerido.

El campo de número de tarjeta es requerido.

El campo de número de tarjeta acepta solo números.

El campo de número de tarjeta permite un máximo de 16 dígitos (pueden ser menos).

El campo de CVV es requerido.

El campo de CVV acepta solo números.

El campo de CVV permite un máximo de 4 dígitos y un mínimo de 3.

La fecha de expiración es requerida.

El botón de pago se deshabilita luego de hacer el primer clic.

El logo de Kushki debe ser visible para el cliente. Puedes encontrar nuestro logo en varios formatos aquí.

Maneja tus suscripciones

Edita los datos o cancela los cobros automáticos.

Acepta webhooks

Maneja eventos post-pago de la manera correcta.

Crea un cargo recurrente

1. Configura tu front-end#

Kajita#

Crea y personaliza tus Kajitas#

Configura Kajita#

Añade Kajita a tu sitio#

Kushki.js#

Configura Kushki.js#

Opción 1 - CDN#

Opción 2 - NPM#

Configura el objeto Kushki#

Recoge la información del usuario y envíala a tu back-end#

Kushki.js Hosted Fields#

Importa Kushki.js Hosted Fields en tu aplicación#

Opción 1 - CDN#

Opción 2 - NPM#

Opción 3 - YARN#

Crea una instancia de KushkiOptions#

Inicializa el formulario en el front-end#

Paso 1. Definir los contenedores para los campos de lado del servidor.#

Paso 2. Crear una instancia de CardOptions#

Paso 3. Renderizar campos de lado del servidor con el método initCardToken()#

Solicita un token para seguir con el flujo de pago#

2. Configura tu back-end#

3. Prueba tu integración#

4. Prepara tu certificación#

1. Configura tu front-end

Kajita

Crea y personaliza tus Kajitas

Configura Kajita

Añade Kajita a tu sitio

Kushki.js

Configura Kushki.js

Opción 1 - CDN

Opción 2 - NPM

Configura el objeto `Kushki`

Recoge la información del usuario y envíala a tu back-end

Kushki.js Hosted Fields

Importa Kushki.js Hosted Fields en tu aplicación

Opción 1 - CDN

Opción 2 - NPM

Opción 3 - YARN

Crea una instancia de `KushkiOptions`

Inicializa el formulario en el front-end

Paso 1. Definir los contenedores para los campos de lado del servidor.

Paso 2. Crear una instancia de CardOptions

Paso 3. Renderizar campos de lado del servidor con el método initCardToken()

Solicita un token para seguir con el flujo de pago

2. Configura tu back-end

3. Prueba tu integración

4. Prepara tu certificación