Suscribe una tarjeta
Registra los datos de tarjeta de tus clientes para cobrar con la recurrencia que definas
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:
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 Keyamount: "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 KeyinTestEnvironment: 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 pruebaheaders: {'content-type': 'application/json'},body: {token: 'V0OzRB100000xhxQB8035251pHLBQsq5', // Reemplaza esto por el token que recibisteamount: {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 cobrometadata: {contractID: '157AB'}},json: true};request(options, function (error, response, body) {if (error) throw new Error(error);console.log(body);});
import requestsurl = "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.