Cómo implementar una pasarela de pago con Stripe

Stripe es un modo de pago muy popular en la industria web. Te proporciona una pasarela de pago que puedes integrar en tu sitio web de forma sencilla. Con Stripe puedes pagar tanto con tarjetas de crédito, como con tarjetas de débito. Así que, si lo que quieres es implementar una pasarela de pago en tu sitio web, Stripe puede ser la mejor opción.

Stripe es rápido y muy seguro, y lo que principalmente lo diferencia de las demás plataformas de pago es Stripe.js. Al utilizar Stripe.js en tu sitio web, los datos de la tarjeta de crédito o débito ingresados a través del formulario de pago nunca se envían a tu servidor. Solamente se enviarán a los servidores de Stripe. Esto hace que todo el proceso de pago sea más seguro ya que no hay necesidad de guardar datos sensibles en tu base de datos. Además, con Stripe no hace falta salir de la web para realizar un pago.

En este tutorial te explicaremos en sencillos pasos cómo implementar una pasarela de pago con Stripe. No te preocupes, es la mar de sencillo.

Cómo se lleva a cabo la integración de la pasarela de pago con Stripe

Estos son los pasos que se llevan a cabo cuando un usuario realiza un pago con Stripe:

  • Un formulario HTML recaba toda la información del pago del usuario

  • Se envía dicha información a Stripe para crear el Token y gestionar el pago de forma segura

  • Se envia la información del pago a nuestro servidor con el Token

  • Nuestro servidor usa dicho Token para cobrar al usuario

Una vez visto todo esto, vamos a empezar a programar. Esta será la estructura de ficheros que utilizaremos en este tutorial:

  • index.php

  • payment.js

  • process.php

Obtener las API keys de Stripe

Para integrar una pasarela de pago con Stripe en nuestro sitio web, primero tenemos que crearnos una cuenta en Stripe y entrar dentro de la plataforma para obtener dichas claves. Para ello:

  • Loguéate en Stripe y ve a la sección API

  • Debajo de la sección TEST DATA, verás las API keys que necesitamos. Para que se vea la secret key haz clic en el botón Reveal

  • Copia la Publishable key y la Secret Key que son las dos claves que necesitaremos en nuestra integración

Incluye los archivos de jQuery y de Stripe

Ahora tendremos que incluir el fichero Stripe.js en el fichero index.php y nuestro payment.js para obtener el Token de Stripe. También incluiremos jQuery y Bootstrap.

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

Formulario de pago HTML

En el fichero index.php, crearemos el formulario HTML para obtener la información del pago del usuario como el nombre, su email y el número de tarjeta de crédito. También enviaremos el action del formulario al fichero process.php para procesar toda la información del usuario.

<div class="col-xs-12 col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<span class="paymentErrors alert-danger"></span>
<form action="process.php" method="POST" id="paymentForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="custName" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="custEmail" class="form-control">
</div>
<div class="form-group">
<label>Card Number</label>
<input type="text" name="cardNumber" size="20" autocomplete="off" id="cardNumber" class="form-control" />
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label>CVC</label>
<input type="text" name="cardCVC" size="4" autocomplete="off" id="cardCVC" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-10">
<div class="form-group">
<label>Expiration (MM/YYYY)</label>
<div class="col-xs-5">
<input type="text" name="cardExpMonth" placeholder="MM" size="2" id="cardExpMonth" class="form-control" />
</div>
<div class="col-xs-5">
<input type="text" name="cardExpYear" placeholder="YY" size="4" id="cardExpYear" class="form-control" />
</div>
</div>
</div>
</div>
<br>
<div class="form-group">
<input type="submit" id="makePayment" class="btn btn-success" value="Make Payment">
</div>
</form>
</div>
</div>
</div>

Obtener el Token con Stripe.js

Crearemos nuestro fichero payment.js y definiremos dentro la publishable key. Después, obtendremos el Token mediante Stripe.js y la información de la tarjeta del usuario que efectuado el pago. Una vez hecho esto, ponemos el valor del token en un campo hidden de nuestro formulario y enviamos toda esa información a process.php para cobrar al cliente.

Stripe.setPublishableKey('Your_Stripe_API_Publishable_Key');
$(document).ready(function() {
$("#paymentForm").submit(function(event) {
$('#makePayment').attr("disabled", "disabled");
// create stripe token to make payment
Stripe.createToken({
number: $('#cardNumber').val(),
cvc: $('#cardCVC').val(),
exp_month: $('#cardExpMonth').val(),
exp_year: $('#cardExpYear').val()
}, handleStripeResponse);
return false;
});
});
// handle the response from stripe
function handleStripeResponse(status, response) {
console.log(JSON.stringify(response));
if (response.error) {
$('#makePayment').removeAttr("disabled");
$(".paymentErrors").html(response.error.message);
} else {
var payForm = $("#paymentForm");
//get stripe token id from response
var stripeToken = response['id'];
//set the token into the form hidden input to make payment
payForm.append("<input type='hidden' name='stripeToken' value='" + stripeToken + "' />");
payForm.get(0).submit();
}
}

Proceso de pago en PHP

Finalmente, en el fichero process.php, obtendremos la información del pago de nuestro usuario y el Token de Stripe para cobrar al usuario. Para ello, utilizaremos la librería PHP de Stripe. Puedes descargar todos los ficheros de desarrollo de Stripe a través de su repositorio de GitHub.

Insertaremos la información del cobro en una tabla a la cual hemos llamado como transaction.

<?php
//check if stripe token exist to proceed with payment
if(!empty($_POST['stripeToken'])){
// get token and user details
$stripeToken = $_POST['stripeToken'];
$custName = $_POST['custName'];
$custEmail = $_POST['custEmail'];
$cardNumber = $_POST['cardNumber'];
$cardCVC = $_POST['cardCVC'];
$cardExpMonth = $_POST['cardExpMonth'];
$cardExpYear = $_POST['cardExpYear'];
//include Stripe PHP library
require_once('stripe-php/init.php');
//set stripe secret key and publishable key
$stripe = array(
"secret_key" => "Your_Stripe_Secret_Key",
"publishable_key" => "Your_Stripe_API_Publishable_Key"
);
StripeStripe::setApiKey($stripe['secret_key']);
//add customer to stripe
$customer = StripeCustomer::create(array(
'email' => $custEmail,
'source' => $stripeToken
));
// item details for which payment made
$itemName = "phpzag test item";
$itemNumber = "PHPZAG987654321";
$itemPrice = 50;
$currency = "usd";
$orderID = "SKA987654321";
// details for which payment performed
$payDetails = StripeCharge::create(array(
'customer' => $customer->id,
'amount' => $itemPrice,
'currency' => $currency,
'description' => $itemName,
'metadata' => array(
'order_id' => $orderID
)
));
// get payment details
$paymenyResponse = $payDetails->jsonSerialize();
// check whether the payment is successful
if($paymenyResponse['amount_refunded'] == 0 && empty($paymenyResponse['failure_code']) && $paymenyResponse['paid'] == 1 && $paymenyResponse['captured'] == 1){
// transaction details
$amountPaid = $paymenyResponse['amount'];
$balanceTransaction = $paymenyResponse['balance_transaction'];
$paidCurrency = $paymenyResponse['currency'];
$paymentStatus = $paymenyResponse['status'];
$paymentDate = date("Y-m-d H:i:s");
//insert tansaction details into database
include_once("../db_connect.php");
$insertTransactionSQL = "INSERT INTO transaction(cust_name, cust_email, card_number, card_cvc,
card_exp_month, card_exp_year,item_name, item_number, item_price, item_price_currency,
paid_amount, paid_amount_currency, txn_id, payment_status, created, modified)
VALUES('".$custName."','".$custEmail."','".$cardNumber."','".$cardCVC."','".$cardExpMonth."',
'".$cardExpYear."','".$itemName."','".$itemNumber."','".$itemPrice."','".$paidCurrency."',
'".$amountPaid."','".$paidCurrency."','".$balanceTransaction."','".$paymentStatus."',
'".$paymentDate."','".$paymentDate."')";
mysqli_query($conn, $insertTransactionSQL) or die("database error: ".
mysqli_error($conn));
$lastInsertId = mysqli_insert_id($conn);
//if order inserted successfully
if($lastInsertId && $paymentStatus == 'succeeded'){
$paymentMessage = "The payment was successful. Order ID: {$lastInsertId}";
} else{
$paymentMessage = "Payment failed!";
}
} else{
$paymentMessage = "Payment failed!";
}
} else{
$paymentMessage = "Payment failed!";
}
echo $paymentMessage;
?>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP