Recurrencias con Webpay OneClick

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

Kushki te permite ofrecer pagos recurrentes a través Webpay OneClick de Transbank brindando confianza al proceso. Tus clientes podrán suscribir tarjetas de crédito y débito RedCompra para realizar sus pagos periódicos.

Actualmente es la única forma de aceptar pagos recurrentes con tarjetas de débito en Chile.

Además, a diferencia de otras formas de integración, en esta el cliente será redirigido a un portal de pagos de Transbank y a su banco para completar el proceso de inscripción.

¿Cómo funciona?

Un flujo de inscripción de tarjetas en Webpay OneClick generalmente cuenta con los siguientes pasos:

Diagrama Flujo Usuario Webpay Oneclick

  1. El usuario inicia el proceso de inscripción en tu sitio o app.
  2. Se redirige al usuario al portal de Webpay OneClick para realizar el registro, donde ingresa sus datos de tarjeta.
  3. Luego, pasa al portal del emisor de la tarjeta (el banco u otra entidad fincanciera) donde se autentica utilizando sus credenciales.
  4. Una vez resuelta la autenticación, se autoriza la inscripción y el usuario vuelve a tu sitio.
  5. Se despliega un mensaje de éxito o fracaso dependiendo del resultado del inscripción al usuario.
  6. Kushki, automáticamente, cursa el cobro recurrente a la tarjeta registrada.

El flujo que integrarás es el siguiente:

Flujo Webpay oneclick (suscripción)

1. Configura tu front-end

La responsabilidad del front-end es recoger y tokenizar la información del usuario a través de los servidores de Kushki, y luego enviar esa información al back-end para crear la suscripción.

Tienes dos opciones para integrar Kushki en tu página web: Cajita y Kushki.js.

Cajita

Usa Cajita para simplicar tu integración y proporcionar una solución lista para usar.

Configura Cajita

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 para tener todas las validaciones que ya se encuentran en el contenido del cdn. No incluyas el script en un bundle o paquete, o hostees una copia de él.

<head>
<title>Checkout</title>
<script src="https://cdn.kushkipagos.com/kushki-checkout.js"> </script>
</head>

Añade Cajita a tu sitio web

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

<form id="payment-form" action="/confirm" method="post">
<input type="hidden" name="cart_id" value="123">
</form>

Recuerda configurar la acción del formulario action de acuerdo al endpoint correspondiente en tu back-end. Esto te permitirá obtener el token.

Luego, añade el siguiente tag script. Asegúrate de que el formulario se haya cargado.

<script type="text/javascript">
var kushki = new KushkiCheckout({
form: "payment-form",
merchant_id: "88ba4bff110548d09acde8d326c71253", // Reemplaza esto por tu Public Key
amount: "20000",
currency: "CLP",
payment_methods:["card_async"],
is_subscription: true,
inTestEnvironment: true, // Configurado en modo prueba
callback_url: "https://my-ecommerce.com/return" // URL a la cual retornará el usuario completado el proceso de inscripción
});
</script>

Esto creará un formlario pre-definido 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.

<script src="https://cdn.kushkipagos.com/kushki.min.js"></script>
Option 2 - NPM

Instala el paquete desde npm.

npm install --save @kushki/js

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

import { Kushki } from “@kushki/js”;
Configura el objeto Kushki

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

var kushki = new Kushki({
merchantId: '88ba4bff110548d09acde8d326c71253', // Reemplaza esto por tu Public Key
inTestEnvironment: true, // Configurado en modo prueba
});

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

Puedes recoger la información del usuario como tú desees. En este caso solo necesitamos el email, por lo que puedes proveerlo de manera directa si ya tienes ese dato, o desplegar un campo de email para que el usuario lo ingrese.

Una vez obtenido el email, solicita el token a Kushki para enviarlo a tu back-end de la siguiente manera:

kushki.requestSubscriptionCardAsyncToken({
currency: 'CLP',
email: your_users_email,
callbackUrl: 'https://my-ecommerce.com/return' // URL a la cual retornará el usuario completado el proceso de inscripción
}, (response) => {
if(!response.code){
console.log(response.token);
// Submit your code to your back-end
} else {
console.error('Error: ',response.error, 'Code: ', response.code, 'Message: ',response.message);
}
});

2. Configura tu back-end

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

Cuando el usuario envía el formulario, tu front-end envía un token a un endpoint que hayas especificado. Con este token, deberás realizar una llamada a nuestro endpoint de suscripciones Webpay OneClick para iniciar el registro y redirigir al usuario.

  • Javascript
var request = require("request");
var options = {
method: 'POST',
headers: [
'Private-Merchant-Id': '0c0b08cd92fc491fb37365170164f7e9', // Reemplaza esto por tu Private Key
'Content-Type': 'application/json'
]
url: 'https://api-uat.kushkipagos.com/subscriptions/v1/card-async/init', // Ambiente de prueba
headers: {'content-type': 'application/json'},
body: {
token: 'V0OzRB100000xhxQB8035251pHLBQsq5', // Reemplaza esto por el token que recibiste
amount: {subtotalIva: 0, subtotalIva0: 20000, ice: 0, iva: 0, currency: 'CLP'},
planName: 'Premium',
periodicity: 'monthly',
contactDetails: {firstName": 'Juan', lastName: 'Flores', email: '[email protected]', phoneNumber: '0984775632'},
startDate: '2021-09-25', // Fecha del primer cobro
metadata: {contractID: '157AB'}
},
json: true
};
request(options, function (error, response, body) {
if (error) throw new Error(error);
console.log(body);
// Redirect your user to redirectUrl
});

Como respuesta a la llamada, obtendrás la variable redirectUrl que deberás utilizar para redirigir al usuario al portal de pagos de Webpay OneClick. Aquí tu cliente finalizará el proceso de inscripción.

3. Captura la respuesta

Una vez terminado el registro, se retornará el cliente con una llamada GET al callbackUrl proporcionado como parámetro en el paso 1. Esta llamada, irá acompañada de un parámetro llamado subscriptionId ubicado en la ruta, que representa el identificador único de la suscripción.

Por ejemplo, para callbackUrl = "http://www.example.com/return se retornará el cliente a GET http://www.example.com/return?subscriptionId=1591842658589000 donde subscriptionId es igual a 1591842658589000.

Si hubo un error en el registro, se retornará el cliente a GET http://www.example.com/return?code=E1&message=Rechazo donde code y message te indican que la inscripción de la tarjeta no finalizó correctamente.

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

4. Prueba tu integración

Existen tarjetas que puedes utilizar en modo prueba para asegurarte de que tu integracón está lista. Úsalas con cualquier fecha de expiración futura.

Tarjetas de Crédito:

  • Transacción aprobada: 4051885600446623, CVV: 123
  • Transacción declinada: 5186059559590568, CVV: 123

Tarjetas de Dédito:

  • Transacción aprobada: 4051884239937763
  • Transacción declinada: 5186008541233829

Para el modo prueba existe una interfaz que simula el paso por el portal bancario del usuario. Utiliza las siguientes credenciales para proceder con la inscripción:

  • RUT: 11.111.111-1
  • Clave: 123

5. 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.
  • Los mensajes que muestras en pantalla van de acuerdo a 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.
  • 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 botón de pago se deshabilita luego de hacer el primer click.
  • El logo de Kushki es 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.