Cómo Aceptar Pagos con Stripe

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Procesar tarjetas de crédito es desafortunadamente mucho más difícil de lo que cabría esperar, desde el punto de vista de los desarrolladores. Pero como es una tarea muy común, ¿es realmente necesario que pasemos esas incontables pruebas de fuego con el único objetivo de procesar tarjetas de crédito? ¿Mercados? ¿Pasarelas? ¿SSL? ¿Seguridad? Rápidamente, una aparentemente simple operación se puede convertir en algo abrumador y confuso, más importante aún, en una labor peligrosa. Cualquier momento en el que te encuentres manejando datos sensibles de un usuario, será mejor que estés seguro de lo que estés haciendo.

*Stripe convierte una operación complicada, confusa, y peligrosa en una simple llamada a una API.*

¿No sería fantástico que existiese un servicio que hiciese que este proceso fuese lo más sencillo posible? Un servicio creado por desarrolladores para desarrolladores. ¡Qué idea! Accede a Stripe; sin cuenta de vendedor, sin pasarelas. Tan solo una llamada a una API, junto a algunas pautas de seguridad, es todo lo que necesitarás para aceptar hoy pagos con tarjeta de crédito.

Aunque Stripe no es gratuito, solo te cargarán un 2.9% por cada cobro (más 0.30 centimos). Eso es todo. Sin tasas de configuración, o de almacenamiento, ni costes ocultos - nada de eso. Solo un 2.9%. ¡No está mal!

5 Funciones Clave de Stripe

Sencillez: Procesar tarjetas de crédito manualmente es complicado y peligroso. Con Stripe, ¡conseguirlo es un paseo! ¡Puedes incluso procesar cargos desde la línea de comandos!
Barato: Muchos proveedores de sistemas de pago tienen fama de ocultar tasas. Stripe te informa desde un principio lo que vas a pagar con exactitud: 2.9% por cargo + 30 céntimos. Sin tasas de instalación. Sin costes ocultos. Sin coste por custodia.
API Intuitiva: La API de Stripe es clara, confiable y fácil de usar.
Usada Por Chicos Guays: Si su estado de adopción te preocupa, no deberías. Stripe ha sido impulsado por innumerables servicios, entre los que se incluyen Reddit, Grooveshark, y Shopify.
Creado Por Desarrolladores: Así de claro, Stripe ha sido creado con el objetivo de erradicar molestias a los desarrolladores. El equipo está lleno de desarrolladores y emprendedores, iguales a ti.

Hagámoslo

¿Convencido? Yo también lo fui. Procesemos nuestra primera prueba de pago. Por supuesto, antes de empezar, visita stripe.com, crea una nueva cuenta (gratuita), y cumplimenta los diferentes formularios, como tu descripción y tus datos bancarios.

*El cuidado a la elegancia de Stripe se extiende hasta el departamento de diseño.*

Cargar un pago a un usuario requiere de dos pasos principales.

Extrae la información de la tarjeta de crédito del usuario, y envía una solicitud AJAX al servidor de Stripe, el cual te devolverá un único token que representará a esta información segura.
Haciendo uso del lenguaje que prefieras del lado de tu servidor (en este artículo usaremos PHP), crear un nuevo cargo Stripe, que pasará a través de el token único.

Crea un Formulario de Pago

Obviamente, el primer paso es crear un formulario de pago para tu producto. Para hacerlo dispones de dos opciones: usar el script de pago de Stripe, que creará automáticamente un formulario, validará los datos introducidos por el usuario, y generará el token único para la información de la tarjeta de crédito del usuario. En las situaciones en las que la configuración y los estilos son flexibles, esta es una opción rápida y excelente. Inserta una etiqueta script, junto con un puñado de atributos HTML5 a medida, ¡y ya lo tienes!


<form action=" method="POST">
  <script
    src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
    data-key="pk_test_G5YhIkq2PEq84lwU064TZENT"
    data-amount="2000"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"
    data-image="/128x128.png">
  </script>
</form>

*Stripe ofrece un formulario que se puede integrar fácilmente y agilizar así el proceso para poder aceptar pagos.*

De todas formas, en la mayoría de las situaciones, necesitarás control total. Por tanto, y para cumplir el objetivo de este artículo, vamos a usar un formulario personalizado. En esta sección, conseguiremos tres cosas:

Crear un formulario para recoger los datos de la tarjeta de crédito del usuario.
Convertir esa información en un token de un único uso.
Enviar el formulario al servidor, junto con su token.

Un formulario básico de pago sería algo parecido a lo siguiente:


<form action=" method="POST" id="payment-form">
  <span class="payment-errors"></span>

  <div class="row">
    <label>
      <span>Card Number</span>
      <input type="text" data-stripe="number">
    </label>
  </div>

  <div class="row">
    <label>
      <span>CVC</span>
      <input type="text" data-stripe="cvc">
    </label>
  </div>

  <div class="row">
    <label>
      <span>Expiration (MM/YYYY)</span>
      <input type="text" data-stripe="exp-month">
    </label>
    <input type="text" data-stripe="exp-year">
  </div>

  <button type="submit">Buy Now</button>
</form>

Observa como no necesitamos mucha información para procesar la tarjeta de crédito. Técnicamente, la única información que solicita Stripe es un número de tarjeta de crédito y su fecha de expiración. De todas formas, por norma general, cuanta más información recojas del usuario, mejor. Si surgiese cualquier conflicto, esta información extra será de gran utilidad. En otras palabras, cuanta más información solicites, mayor es la posibilidad de que el propietario de la tarjeta de crédito ubique y reconozca la transacción a posteriori. La clave está en encontrar un equilibrio entre suficiente y demasiada para que el usuario no se canse al rellenar el formulario. Como mínimo, solicita el nombre del usuario, su dirección de correo electrónico, la fecha de caducidad de la tarjeta, y un número CVC.

Para continuar taladrando tu mente, nunca permitas que información sensible lleguen a tu servidor. Hacerlo tiene el potencial de crear daños, si se maneja incorrectamente. En su lugar, toma el camino más sencillo: asegúrate de que los inputs para los datos de la tarjeta de crédito del usuario no contienen atributos name. Omitiendo este atributo, la información no será enviada a tu servidor.

Presta especial atención a los atributos personalizados en los inputs, como data-stripe="number". Stripe ofrece un plugin, stripe.js, que asiste en el proceso de recopilar los datos proporcionados por el usuario, y en la generación del token. Stripe buscará esos atributos y localizará sus respectivos valores.

Para usar stripe.js, referencia el script desde tu proyecto, y establece tu clave publicable, la cual será proporcionada cuando accedas a Stripe. También usaremos jQuery en este artículo, aunque no es verdaderamente necesario.


<script src="//code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="//js.stripe.com/v2/"></script>
<script>
    (function() {
        Stripe.setPublishableKey('YOUR PUBLISHABLE KEY');
    })();
</script>

Piensa en setPublishableKey como en una forma de identificar tu sitio web en el momento en que esta deba comunicarse con Stripe. Durante el registro, se te presentarán dos versiones diferentes de esta clave, una para realizar pruebas y la otra para producción.

Seguimos, necesitamos crear un token único y de un solo uso para los datos de la tarjeta de crédito del usuario. Podemos usar el objeto Stripe, proporcionado por el script que hemos importado con este propósito. Incluso mejor, no necesitamos preocuparnos sobre la serialización de la información de los formularios de pago; simplemente tienes pásalos a través del objeto jQuery del formulario, y Stripe se ocupará del resto.


// Event Listeners
$('#payment-form').on('submit', generateToken);

var generateToken = function(e) {
    var form = $(this);

    // No pressing the buy now button more than once
    form.find('button').prop('disabled', true);

    // Create the token, based on the form object
    Stripe.create(form, stripeResponseHandler);

    // Prevent the form from submitting
    e.preventDefault();
};

var stripeResponseHandler = function(status, response) {};

Con este pedazo de JavaScript, cuando el formulario de pago sea enviado, Stripe intentará generar un token de un solo uso, mediante la información relacionada de los inputs que incluyen atributos stripe- específicos y personalizados. El segundo argumento del método create es una respuesta que recibirá el token (response.id) desde el servidor de Stripe, y que procederá en consecuencia.

Dentro de esta respuesta, es importante verificar los resultados (se ha proporcionado toda la información de manera correcta), inserta el token en un input oculto, y envía el formulario a tu servidor. Nuevamente, advierte que la información de la tarjeta de crédito no debería/no pasará por tu servidor - solo el token e información no sensible. Esto es importante, así que realiza pruebas de funcionamiento para verificar que sucede así.

Tu respuesta debería parecerse a esto:


var stripeResponseHandler = function(status, response) {
    var form = $('#payment-form');

    // Any validation errors?
    if (response.error) {
        // Show the user what they did wrong
        form.find('.payment-errors').text(response.error.message);

        // Make the submit clickable again
        form.find('button').prop('disabled', false);
    } else {
        // Otherwise, we're good to go! Submit the form.

        // Insert the unique token into the form
        $('<input>', {
            'type': 'hidden',
            'name': 'stripeToken',
            'value': response.id
        }).appendTo(form);

        // Call the native submit method on the form
        // to keep the submission from being canceled
        form.get(0).submit();
    }
};

¡Realmente es muy sencillo! Envía una solicitud AJAX a la API de Stripe (mediante su útil plugin JavaScript), recoge el token generado, insértalo en el formulario, y envíalo a tu servidor.

Cargar

Continuamos, en este punto ya has generado con éxito un token de un solo uso y lo has enviado al formulario de pago. Ya es hora de que el lenguaje que hayas escogido del lado de tu servidor cree un cargo físico. Recuerda, en la sección anterior, no se realizó ningún cargo. Solo generamos un token que representaba la información de la tarjeta de crédito.

Stripe ofrece varias librerías del lado del servidor para comprobar nuevos cargos, e incluso gestionar suscripciones. Es muy posible que tu lenguaje preferido este representado en ellas (PHP, Ruby, Python, etc.).

Al igual que en la sección anterior, el envío de un nuevo cargo se realiza en pocos pasos:

Declara tu clave API
Empleando la librería de Stripe, realiza una llamada a la API, enviando los detalles de la transacción.
Valida el cargo, y continúa.

Consulta la página de la Librería de Stripe para ver las instrucciones de instalación. Si estás usando PHP, tal y como haremos en este artículo, es recomendable que te sirvas de Composer para descargar el paquete de Stripe.


{
    "require": {
        "stripe/stripe-php": "dev-master"
    }
}

Composer es el futuro para gestionar las dependencias, así que súbete abordo ahora, si es que aún no lo has hecho. Un cargo básico en Stripe tendría la siguiente forma:


// Set your API key
Stripe::setApiKey("YOUR API KEY");

try {
    Stripe_Charge::create([
        'amount' => 2000, // this is in cents: $20
        'currency' => 'usd',
        'card' => $_POST['stripeToken'],
        'description' => 'Describe your product'
    ]);
} catch (Stripe_CardError $e) {
    // Declined. Don't process their purchase.
    // Go back, and tell the user to try a new card
}

¡Eso es todo! La clave de la API te autentificará como usuario válido de Stripe. Al igual que la clave publica, Stripe te proporcionará dos versiones diferentes de esta clave: una para realizar pruebas y otra para producción.

Por favor, no olvides que todos los cargos en Stripe deben declararse en céntimos (basados en la moneda, por supuesto). Si los precios están almacenado en tu base de datos como dólares, euros, o libras, entonces tendrás que traspolar adecuadamente, en el momento de realizar el pago.

Si no hay ninguna excepción a estas normas, puedes descansar seguro de que los cargos habrán sido procesados con éxito. Empieza ofreciendo al usuario una descarga digital, o registrando su adquisición en tu sistema.

Lo creas o no, el trabajo de Stripe ha finalizdo. Si bien es cierto que puedes hacer más cosas, como crear clientes y gestionar suscripciones, pero, en lo que se refiere a a simplemente procesar pagos únicos, ¡lo tienes resuelto!. …solo queda una excepción.

SSL

Aunque, realmente el trabajo de Stripe ha terminado, el tuyo, por el contrario, no lo ha hecho. Con independencia del proveedor para los pagos, siempre que trabajes con información de tarjetas de crédito, la seguridad será lo más importante. Ya hemos dado los primeros pasos, asegurándonos de que la información de la tarjeta de crédito nunca tocará nuestro servidor, pero aún quedan más cosas por solucionar. Lo próximo que tenemos que hacer es securizar la conexión del usuario con tu servidor. En otras palabras, necesitas un certificado SSL. ¡Bajo ninguna circunstancia debes olvidar este paso!

"SSL (Secure Sockets layer) es la tecnología estándar en seguridad para establecer enlaces encriptados entre un servidor web y el navegador. Este enlace asegura que toda la información enviada a través del servidor web y los navegadores permanece privada e íntegra". - info.ssl.com

Cuando un usuario indica la información de su tarjeta de crédito en un sitio web, esperan ver en la barra de direcciones https. Afortunadamente, adquirir un certificado SSL ahora es mucho más fácil de lo que solía ser. De hecho, la mayoría de servicios de alojamiento ofrecen un add-on SSL, que consigue que el proceso se concluya con un solo clic. Lo mismo es igualmente válido en varias opciones SaaS, como Pagoda Box o Heroku.

Truco: Una vez hayas habilitado SSL, si cabe la posibilidad de que las imágenes y algunos otros elementos se rompan. Para solucionarlo, asegúrate de que todas las URLs emplean https, en lugar de http. O, una mejor solución, emplea el protocolo de URLs relativas.


<!-- Not good for SSL -->
<img src="http://domain.com/images/foo.jpg" alt="Foo Bar">

<!-- Better -->
<img src="//domain.com/images/foo.jpg" alt="Foo Bar">

Con esta técnica, popularizada por Paul Irish, si la página actual está usando HTTPS, los elementos serán solicitados también a través de HTTPS.

Asumiendo que tu proveedor de alojamiento te ofrece un add-on para instalar SSL con un clic, simplemente dirige a tu usuario a la versión https:// de la página solicitada, ¡y ya puedes hacer marcha!

Consejos y Trucos

Los ejemplos incluidos en este artículo son sencillos y la mayoría consisten en procedimientos. Pero es muy probable que te encuentres trabajando con un framework que admite múltiples entornos, enrutados, y herramientas auxiliares para realizar comprobaciones. Usa los siguientes consejos como punto de partida para integrar Stripe con el framework de tu elección.

1. Números de Tarjetas de Crédito Especiales

Claramente, ¡no querrás usar números de tarjeta de crédito reales para realizar las pruebas con tus formularios de pago! Por suerte, Stripe ya se ha ocupado de esto; ha incluido una conjunto de números de tarjeta de crédito que simulan respuestas concretas, como sería por ejemplo un cargo efectuado con éxito, la introducción de un número no válido, un código CVC incorrecto, y mucho más.

Aquí tienes como referencia algunos números de tarjeta a los que recurrirás con frecuencia.

Visa Aprovada: 4242424242424242
Mastercard Aprovada: 5555555555554444
Tarjeta Rechazada: 4000000000000002
Número Incorrecto: 4242424242424241

2. Haz Un Uso Inteligente de los Entornos

Cuando trabajes con Stripe, tendrás dos claves únicas, las cuales representan a la API y las claves públicas. Más aún, existen variaciones de cada una de ellas para usarlas en pruebas y durante el proceso de producción. La mayoría de los frameworks ofrecen algún medio para gestionar múltiples entornos de trabajo. De esta forma, para el desarrollo, tu aplicación usará como corresponde las claves para realizar pruebas, mientras que, una vez implementado, serán usadas las versiones de producción.

Aquí abajo tenemos un proyecto en exclusiva de Laravel. Laravel proporciona un sistema de entorno sencillo. Añade un archivo de configuración en el interior de la carpeta correspondiente al nombre del entorno, y estos valores se convertirán en preferentes sobre los predeterminados.

Primero, indicamos las claves de producción:


<?php // app/config/stripe.php

return [
    'apiKey' => 'PRODUCTION API KEY',
    'publishableKey' => 'PRODUCTION PUBLISHABLE KEY'
];

Y para el desarrollo, sobreescribimos las claves de producción con sus equivalentes para realizar pruebas.


<?php // app/config/development/stripe.php

return [
    'apiKey' => 'TEST API KEY',
    'publishableKey' => 'TEST PUBLISHABLE KEY'
];

Ahora, cuando la aplicación requiera la clave de la API, empleando Config::get('stripe.apiKey'), el valor que nos es devuelto determinará el entorno. ¡Conseguido!

3. No Cablees Tu APP a Stripe

Un fallo común que cometen los desarrolladores que empiezan viene originado por la vinculación de sus aplicaciones con varios proveedores, como Stripe. Tu aplicación no debería preocuparse sobre cuál es el proveedor de facturación empleado. Solo le debe preocupar el hecho de que exista una disponible. Mediante la programación manual de referencias a Stripe en tus clases, estás creando una conexión directa entre los dos - uno de los cuales será difícil de modificar.

Pregúntate, "si en el futuro necesitase cambiar de Stripe a otro proveedor, ¿sería muy complicado?" Una pista: cualquier cosa superior a "un momento" huele a tener que programar.

En su lugar, introduce el código en una interfaz - quizá BillingProvider o BillingGateway. De esta manera, podrías crear varias implementaciones de la interfaz: una para Stripe, o otra para otro proveedor completamente distinto, por si fuese necesario. Estas diferentes implementaciones alojarán la funcionalidad específica de cada proveedor. Y si, en algún momento, encontrases un proveedor de facturación más barato que Stripe, cambiar la implementación de Stripe de BillingProvider por una versión ServiceX solo te llevará un momento - es decir, una vez hayas creado la nueva implementación que consulta a la API de facturación ServiceX.

Aquí tienes una estructura de como se vería:


// Define the interface
interface BillingProvider {
    public function charge($creditInfo);
}

// Create a Stripe implementation
class StripeBilling {
    public function charge($creditInfo)
    {
        // Stripe_Charge::charge(...);
    }
}

// Create a ServiceX implementation
class ServiceXBilling {
    public function charge($creditInfo)
    {
        // charge user with ServiceX
    }
}

Ahora que disponemos de dos implementaciones, deberíamos indicar cual es nuestro servicio preferido de cobro, empleando para la inyección de dependencias.


class PaymentController {
    protected $billing;

    public function __construct(BillingProvider $billing)
    {
        $this->billing = $billing;
    }
}

Con este estilo de desarrollo, si terminas necesitando desechar Stripe, no tendrás que tocar el controlador. Como Stripe no está programado manualmente,¡no notará la diferencia!

4. No Hagas Esperar al Comprador

Cuando vendas productos digitales, pregúntate, "¿Qué debería hacer el cliente si algo no funciona en mi web?". Proporciona siempre al cliente de algún medio de contacto con tu compañía. ¿Qué sucedería si el email de confirmación que incluye el enlace para descargar el archivo digital nunca llega al buzón del comprador? ¿Qué deberían hacer?

Una web de soporte, o incluso una sencilla dirección de correo electrónico en la página de inicio será de incalculable ayuda en estas situaciones.

5. Certificados SSL

*DigiCert es el proveedor de certificados recomendado por Stripe.*

Si tienes que adquirir manualmente un certificado SSL, existen varios proveedores entre los que elegir. Según mi experiencia, te puede llevar desde media hasta una hora configurarlo. No olvides que la mayoría de certificados no son gratuitos, y su precio puede oscilar de entre los 10 a los 500$, dependiendo del proveedor.

El equipo de Stripe recomienda DigiCert y Namecheap, aunque, si lo prefieres, podrías considerar también una solución gratuita como StartSSL.

6. No Te Fíes de Los Precios de los Formularios

Una error habitual viene dado por el uso de la información sobre los precios de los productos a adquiridos contenida en formularios, posiblemente indicado mediante campos ocultos. Como un usuario podría editar este valor, no es muy inteligente depender del mismo. Extrae siempre el precio del producto contenido en el servidor. Nunca confíes en las indicaciones del formulario en este sentido. Una sencilla consulta a la base de datos sería la mejor opción.

7. El Archivo Digital No Debería Ser Accesible Públicamente

Los artículos que estás vendiendo nunca deberían ser accesibles para el público, ni siquiera aunque la URL lo sea, según tu opinión, suficientemente largo y confuso hasta el punto de que muchos nunca los aprenden. Esta es una mala práctica por varios motivos.

En su lugar, crear una tabla downloads que acoja un único código de adquisición, junto a los ids asociados a sus productos. De esta manera, cuando un URI, como /downloads/23gsfga831g, es solicitado, tu aplicación hará lo siguiente:

Verifica el token del proveedor cotejándolo con lo almacenado en la base de datos.
Contesta ofreciendo una descarga para el archivo asociado al token de la adquisición.

Para ir más allá aún, podrías imponer un límite de descargas. Habilitar esto simplemente requerriría que añadir un campo download_count a la tabla purchases. Con cada solicitud, este número debería incrementarse en una unidad. Una ves esta cifra alcance el límite que has designado, la descarga no debería ser ya proporcionada. Esto podría ser útil en situaciones en las que quieras asegurarte que los enlaces no sean compartidos

Conclusión

Lo maravilloso de Stripe es que convierte una operación complicada, confusa y peligrosa en una única y simple llamada a la API. Sin cuentas de comercio, sin pasarelas, sin tasas ocultas. Ese es el motivo por el que se dice que Stripe es irrisoriamente fácil de usar. ¡Lo es!