Procesar Pagos con Stripe y PHP

Stripe es una empresa de procesamiento de pagos con tarjetas de débito/crédito por internet muy similar a paypal.

En el articulo de hoy veremos como procesar pagos usando stripe, stripe cuenta con muchas una API y diferentes opciones para lenguajes de programación, entre ellos PHP.

Crear una cuenta de Stripe

El primer paso obvio sera ir a Stripe.com y crear una cuenta de stripe, ya que se necesita una cuenta de stripe para enviar y para recibir pagos.

Una vez creada la cuenta de Stripe, iniciamos sesion y nos dirigimos a la seccion de desarrolladores y después en claves API.

Aquí vamos a ver las claves para acceder a la API, primero haremos pruebas con claves de prueba y una vez que tengamos las pruebas listas ya podremos usar claves de producción.

Hay 2 claves una clave publica y una clave privada o secreta, la clave publica se usa para las librerías javascript y la clave privada se usa para la programación del servidor o backend.

Obtener la libreria Stripe para PHP

Es necesario obtener la librería de stripe para php desde la pagina de github de Stripe.

Link: https://github.com/stripe/stripe-php

En la sección de Releases seleccionamos la versión mas reciente en mi caso la versión 7.14.

Empecemos la codificacion

Vamos a empezar a codificar, voy a explicar a grandes rasgos cada paso, es necesario contar con algunos conocimientos básicos para después juntar todos los elementos.

De todas maneras al final del articulo les dejo un link de descarga para que usen y prueben el ejemplo, también les prestare mis claves de API pero como siempre estas pueden dejar de funcionar en cualquier momento.

Formulario HTML

En el siguiente formulario incluimos un campo para el email, para el total a pagar y unas etiquetas de stripe, card-element y card-errors.

El elemento card-element va a cargar el formulario para introducir los datos de una tarjeta de débito o crédito y el elemento card-errors mostrara errores en caso de que la tarjeta sea incorrecta.

<form action="process.php" method="post"  id="payment-form">

<div class="form-group">
    <label for="exampleInputEmail1">Email de cliente</label>
    <input type="email" required name="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Total a pagar</label>
    <input type="text" name="total" required class="form-control" id="exampleInputPassword1" placeholder="Total a pagar">
  </div>

    <label for="card-element">Tarjeta de creito o debito</label>
    <div id="card-element">
      <!-- a Stripe Element will be inserted here. -->
    </div>
    <!-- Used to display form errors -->
    <div id="card-errors"></div>


<input type="hidden" class="form-control" required name="paymethod_id" value="stripe">
<br>
<button class="btn btn-primary btn-block">Proceder a Pagar</button>
</form>

<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript" src="charge.js"></script>

Script charge.js

El script charge.js se incluye en la descarga es un activador de Stripe, donde se crea el elemento de card-element y card-errors, solo hay que tomar en cuenta que en la linea 2 se agrega la clave publica o public key.

// Stripe API Key
var stripe = Stripe('pk_test_LS8RUHSSJo1gvPZ9A72oziyo');
var elements = stripe.elements();
// Custom Styling
var style = {
    base: {
        color: '#32325d',
        lineHeight: '24px',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
            color: '#aab7c4'
        }
    },
    invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
    }
};
// Create an instance of the card Element
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors');
if (event.error) {
        displayError.textContent = event.error.message;
    } else {
        displayError.textContent = '';
    }
});
// Handle form submission
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
    event.preventDefault();
stripe.createToken(card).then(function(result) {
        if (result.error) {
            // Inform the user if there was an error
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
        } else {
            stripeTokenHandler(result.token);
        }
    });
});
// Send Stripe Token to Server
function stripeTokenHandler(token) {
    // Insert the token ID into the form so it gets submitted to the server
    var form = document.getElementById('payment-form');
// Add Stripe Token to hidden input
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);
// Submit form
    form.submit();
}

Archivo process.php

El archivo process.php se llama en el formulario, despues de que el usuario ejecuta la opcion de Proceder a Pagar.

El siguiente script sirve para recibir los datos del formulario y enviar los datos a Stripe para crear un cargo o venta

En la linea 2 debemos agregar la libreria de stripe php y en la linea 3 vamos a agregar la clave API secreta que obtuvimos junto con la clave publica.

<?php
require_once('stripe-php/init.php');
\Stripe\Stripe::setApiKey('sk_test_E3OsHARx07saz9VYSqw6bn89');

$token = $_POST['stripeToken'];
$total  = $_POST["total"];

try {
	// Crear cargo de Stripe
$charge = \Stripe\Charge::create(
    array(
        'amount' => $total*100,
        'currency' => "USD", // Cambiar el tipo de moneda
        'source' => $token,
    )
);

if($charge->status=="succeeded"){
	echo "<script>alert('Pagado exitosamente!');</script>";
}else{
	echo "<script>alert('Error al pagar!');</script>";
	Core::alert("Error al procesar el pago!");	
}
}catch(Exception $e){
	echo "<script>alert('".$e->getMessage()."');</script>";
}
	echo "<script>window.location='index.html';</script>";
?>

Y listo ahora vamos a hacer pruebas.

Ejecutar el ejemplo

Una vez que ejecutamos el formulario, podemos introducir un $ total de prueba.

El numero de tarjeta podemos incluir un numero de tarjeta real o algun numero de prueba por ejemplo:

• Visa: 4242 4242 4242 4242
• Master card: 5555 5555 5555 4444

Procesamos el formulario y proseguimos.

Ahora vamos a ir al Dashboard de Stripe y podremos ver que ya recibimos un pago de prueba.

Si el pago se ejecuta correctamente se envía una alerta de éxito y si hay algún problema se notifica el error.

 stripe-php-ejemplo