ChileColombiaEcuadorMexico
Inicia sesión
ChileColombiaEcuadorMexico
Referencia de API Soporte Estado del servicio Inicia sesión
Referencia de APISoporteEstado del servicio
s

Suscribe una tarjeta

clock 09 noviembre 2020

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.