Suscribe una tarjeta

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

Web
iOS
Android

Recibir pagos recurrentes con tarjetas de débito y crédito en tu sitio consiste en capturar la informacion de tarjeta, generar un token y crear la suscripción en Kushki. Con esto, los cobros se harán automáticamente con la periodicidad que elijas.

Un ejemplo de lo que podrías integrar:

El flujo de pago que integrarás luce de la siguiente manera:

Flujo suscripción tarjeta

1. Configura tu front-end

La responsabilidad del front-end es recoger la información de tarjeta del usuario de una manera segura, tokenizar esa información 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. Cajita es una solución lista para usar y recopilar información de tarjeta de forma segura.

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 cumplir con el estándar PCI que ya se encuentra 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: "14.99",
currency: "USD",
payment_methods:["credit-card"],
is_subscription: true,
inTestEnvironment: true // Configurado en modo prueba
});
</script>

Esto creará un formulario 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

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:

<form id="payment-form">
<input placeholder="Card Number" type="text" name="number">
<input placeholder="Full Name" type="text" name="name">
<input placeholder="MM" type="text" name="expiry_month">
<input placeholder="YY" type="text" name="expiry_year">
<input placeholder="CVC" type="text" name="cvc">
<button id="submit">Pay $14.99</button>
</form>

Luego, cuando el usuario envía el formulario, solicita el token y llévalo a tu back-end.

kushki.requestSubscriptionToken({
currency: "USD",
card: {
name: form.name,
number: form.number,
cvc: form.cvv,
expiryMonth: form.expiry_month,
expiryYear: form.expiry_year,
},
}, (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 y crear la suscripción con Kushki.

Cuando el usuario envia 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 del API para crear la suscripción.

  • Javascript
  • Python
  • PHP
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', // Ambiente de prueba
headers: {'content-type': 'application/json'},
body: {
token: 'V0OzRB100000xhxQB8035251pHLBQsq5', // Reemplaza esto por el token que recibiste
amount: {subtotalIva: 0, subtotalIva0: 14.99, ice: 0, iva: 0, currency: 'USD'},
planName: 'Premium',
periodicity: 'monthly',
contactDetails: {firstName": 'Juan', lastName: 'Flores', email: '[email protected]', phoneNumber: '+593984775632'},
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);
});
import requests
url = "https://api-uat.kushkipagos.com/subscriptions/v1/card"
payload = "{\"token\":\"V0OzRB100000xhxQB8035251pHLBQsq5\",\"amount\":{\"subtotalIva\":0,\"subtotalIva0\":14.99,\"ice\":0,\"iva\":0,\"currency\":\"USD\"},\"planName\":\"Premium\",\"periodicity\":\"monthly\",\"contactDetails\":{\"firstName\":\"Juan\",\"lastName\":\"Flores\",\"email\":\"[email protected]\",\"phoneNumber\":\"0984775632\"},\"startDate\":\"2021-09-25\",\"metadata\":{\"contractID\":\"157AB\"}}"
headers = {'Content-Type': 'application/json',
'Private-Merchant-Id': '0c0b08cd92fc491fb37365170164f7e9' // Reemplaza esto por tu Private Key
}
response = requests.request("POST", url, data=payload, headers=headers)
print(response.text)
$client = new http\Client;
$request = new http\Client\Request;
$body = new http\Message\Body;
$body->append('{"token":"V0OzRB100000xhxQB8035251pHLBQsq5","amount":{"subtotalIva":0,"subtotalIva0":14.99,"ice":0,"iva":0,"currency":"USD"},"planName": "Premium","periodicity": "monthly","contactDetails": {"firstName":"Juan","lastName":"Flores","email":"[email protected]","phoneNumber":"0984775632"},"startDate":"2021-09-25","metadata":{"contractID":"157AB"}}');
$request->setRequestUrl('https://api-uat.kushkipagos.com/subscriptions/v1/card');
$request->setRequestMethod('POST');
$request->setBody($body);
$request->setHeaders(array(
'Private-Merchant-Id' => '0c0b08cd92fc491fb37365170164f7e9', // Reemplaza esto por tu Private Key
'Content-Type' => 'application/json'
));
$client->enqueue($request)->send();
$response = $client->getResponse();
echo $response->getBody();

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.

3. Prueba tu integración

Existen tarjetas que puedes utilizar en modo prueba para asegurarte de que tu integracón está lista. Úsalas con cualquier CVC y una 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 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 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 sólo 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 sólo 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 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.