Si estás desarrollando una tienda online y quieres implementar un método de pago que acepte tarjetas de crédito pero sin tener que tratarlo con un banco (a través de TPVs y demás), PayPal Pro podría ser tu mejor carta. Las principales ventajas de PayPal Pro es que los clientes no tienen que salir de tu sitio web para realizar el pago. El cliente puede hacer el cargo con su tarjeta de crédito en tu sitio web sin necesitar siquiera tener una cuenta de PayPal.
Este tutorial te mostrará cómo puedes integrar la pasarela de pago de PayPal Pro en PHP con la API de PayPal. Así tus clientes podrán pagar con tarjeta de crédito en tu sitio web.
Antes de comenzar el tutorial, vamos a echar un vistazo a la estructura de carpetas y archivos del proyecto que vamos a llevar a cabo, es decir, la integración de la pasarela de pago Paypal Pro.
Imagen
Lo primero que necesitas es una cuenta sandbox de Paypal para realizar la distintas pruebas de pagos ficticios. Crea tu cuenta sandbox de Paypal y obtén las credencionales de prueba de la API para testear una cuenta Business. La integración de Paypal Pro requiere cuentas Pro para web. Si quieres utilizar una tarjeta de crédito como modo de pago en tus transacciones de prueba, debes configurar una cuenta Business de prueba como una cuenta pro para web.
HTML
El siguiente código HTML crea el formulario de pago para obtener toda la información de la tarjeta:
<div id="paymentSection">
<form method="post" id="paymentForm">
<h4>Payable amount: $10 USD</h4>
<ul>
<input type="hidden" name="card_type" id="card_type" value=""/>
<li>
<label for="card_number">Card number (<a href="javascript:void(0);" id="sample-numbers-trigger">try one of these</a>)</label>
<div class="numbers" style="display: none;">
<p>Try some of these numbers:</p>
<ul class="list">
<li><a href="javascript:void(0);">4000 0000 0000 0002</a></li>
<li><a href="javascript:void(0);">5018 0000 0009</a></li>
<li><a href="javascript:void(0);">5100 0000 0000 0008</a></li>
<li><a href="javascript:void(0);">6011 0000 0000 0004</a></li>
</ul>
</div>
<input type="text" placeholder="1234 5678 9012 3456" id="card_number" name="card_number" class="">
<small class="help">This demo supports Visa, American Express, Maestro, MasterCard and Discover.</small>
</li>
<li class="vertical">
<ul>
<li>
<label for="expiry_month">Expiry month</label>
<input type="text" placeholder="MM" maxlength="5" id="expiry_month" name="expiry_month">
</li>
<li>
<label for="expiry_year">Expiry year</label>
<input type="text" placeholder="YYYY" maxlength="5" id="expiry_year" name="expiry_year">
</li>
<li>
<label for="cvv">CVV</label>
<input type="text" placeholder="123" maxlength="3" id="cvv" name="cvv">
</li>
</ul>
</li>
<li>
<label for="name_on_card">Name on card</label>
<input type="text" placeholder="Codex World" id="name_on_card" name="name_on_card">
</li>
<li><input type="button" name="card_submit" id="cardSubmitBtn" value="Proceed" class="payment-btn" disabled="true" ></li>
<p style="color:#EA0075;">Note that: This demo will working with PayPal sandbox accounts.</p>
</ul>
</form>
</div>
<div id="orderInfo" style="display: none;"></div>
Javascript
Librerías jQuery
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.creditCardValidator.js"></script>
Validación del formulario de la tarjeta
El siguiente código Javascript se utiliza para validar los campos del formulario en el que recogemos los datos de la tarjeta. La librería jquery.creditCardValidator.js se utiliza siempre para esos menesteres.
function cardFormValidate(){
var cardValid = 0;
//Card validation
$('#card_number').validateCreditCard(function(result) {
var cardType = (result.card_type == null)?'':result.card_type.name;
if(cardType == 'Visa'){
var backPosition = result.valid?'2px -163px, 260px -87px':'2px -163px, 260px -61px';
}else if(cardType == 'MasterCard'){
var backPosition = result.valid?'2px -247px, 260px -87px':'2px -247px, 260px -61px';
}else if(cardType == 'Maestro'){
var backPosition = result.valid?'2px -289px, 260px -87px':'2px -289px, 260px -61px';
}else if(cardType == 'Discover'){
var backPosition = result.valid?'2px -331px, 260px -87px':'2px -331px, 260px -61px';
}else if(cardType == 'Amex'){
var backPosition = result.valid?'2px -121px, 260px -87px':'2px -121px, 260px -61px';
}else{
var backPosition = result.valid?'2px -121px, 260px -87px':'2px -121px, 260px -61px';
}
$('#card_number').css("background-position", backPosition);
if(result.valid){
$("#card_type").val(cardType);
$("#card_number").removeClass('required');
cardValid = 1;
}else{
$("#card_type").val('');
$("#card_number").addClass('required');
cardValid = 0;
}
});
//Form validation
var cardName = $("#name_on_card").val();
var expMonth = $("#expiry_month").val();
var expYear = $("#expiry_year").val();
var cvv = $("#cvv").val();
var regName = /^[a-z ,.'-]+$/i;
var regMonth = /^01|02|03|04|05|06|07|08|09|10|11|12$/;
var regYear = /^2016|2017|2018|2019|2020|2021|2022|2023|2024|2025|2026|2027|2028|2029|2030|2031$/;
var regCVV = /^[0-9]{3,3}$/;
if (cardValid == 0) {
$("#card_number").addClass('required');
$("#card_number").focus();
return false;
}else if (!regMonth.test(expMonth)) {
$("#card_number").removeClass('required');
$("#expiry_month").addClass('required');
$("#expiry_month").focus();
return false;
}else if (!regYear.test(expYear)) {
$("#card_number").removeClass('required');
$("#expiry_month").removeClass('required');
$("#expiry_year").addClass('required');
$("#expiry_year").focus();
return false;
}else if (!regCVV.test(cvv)) {
$("#card_number").removeClass('required');
$("#expiry_month").removeClass('required');
$("#expiry_year").removeClass('required');
$("#cvv").addClass('required');
$("#cvv").focus();
return false;
}else if (!regName.test(cardName)) {
$("#card_number").removeClass('required');
$("#expiry_month").removeClass('required');
$("#expiry_year").removeClass('required');
$("#cvv").removeClass('required');
$("#name_on_card").addClass('required');
$("#name_on_card").focus();
return false;
}else{
$("#card_number").removeClass('required');
$("#expiry_month").removeClass('required');
$("#expiry_year").removeClass('required');
$("#cvv").removeClass('required');
$("#name_on_card").removeClass('required');
$('#cardSubmitBtn').prop('disabled', false);
return true;
}
}
Comprobando los números de la tarjeta
$(document).ready(function() {
//Demo card numbers
$('.card-payment .numbers li').wrapInner('<a href="javascript:void(0);"></a>').click(function(e) {
e.preventDefault();
$('.card-payment .numbers').slideUp(100);
cardFormValidate()
return $('#card_number').val($(this).text()).trigger('input');
});
$('body').click(function() {
return $('.card-payment .numbers').slideUp(100);
});
$('#sample-numbers-trigger').click(function(e) {
e.preventDefault();
e.stopPropagation();
return $('.card-payment .numbers').slideDown(100);
});
//Card form validation on input fields
$('#paymentForm input[type=text]').on('keyup',function(){
cardFormValidate();
});
});
Proceso de pago via AJAX
La información de la tarjeta de crédito se enviará al archivo payment_process.php para procesar el pago utilizando AJAX. Se mostrará un mensaje basándonos en el estado del pago.
$(document).ready(function() {
//Submit card form
$("#cardSubmitBtn").on('click',function(){
if (cardFormValidate()) {
var formData = $('#paymentForm').serialize();
$.ajax({
type:'POST',
url:'payment_process.php',
dataType: "json",
data:formData,
beforeSend: function(){
$("#cardSubmitBtn").val('Processing....');
},
success:function(data){
if (data.status == 1) {
$('#paymentSection').slideUp('slow');
$('#orderInfo').slideDown('slow');
$('#orderInfo').html('<p>Order <span>#'+data.orderID+'</span> has been submitted successfully.</p>');
}else{
$('#paymentSection').slideUp('slow');
$('#orderInfo').slideDown('slow');
$('#orderInfo').html('<p>Wrong card details given, please try again.</p>');
}
}
});
}
});
});
payment_process.php
En este archivo, se llama a la función paypalCall() de la clase Paypalpro y la información del pago ($paypalParams) se pasa como primer parámetro. Si la transacción de Paypal ha sido satisfactoria, puedes modificar la tabla de pedidos con los detalles de la transacción.
<?php
require('paypal/PaypalPro.php');
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$payableAmount = 10;
$nameArray = explode(' ',$_POST['name_on_card']);
//Buyer information
$firstName = $nameArray[0];
$lastName = $nameArray[1];
$city = 'Kolkata';
$zipcode = '700091';
$countryCode = 'IN';
//Create an instance of PaypalPro class
$paypal = new PaypalPro;
//Payment details
$paypalParams = array(
'paymentAction' => 'Sale',
'amount' => $payableAmount,
'currencyCode' => 'USD',
'creditCardType' => $_POST['card_type'],
'creditCardNumber' => trim(str_replace(" ","",$_POST['card_number'])),
'expMonth' => $_POST['expiry_month'],
'expYear' => $_POST['expiry_year'],
'cvv' => $_POST['cvv'],
'firstName' => $firstName,
'lastName' => $lastName,
'city' => $city,
'zip' => $zipcode,
'countryCode' => $countryCode,
);
$response = $paypal->paypalCall($paypalParams);
$paymentStatus = strtoupper($response["ACK"]);
if ($paymentStatus == "SUCCESS"){
$data['status'] = 1;
$transactionID = $response['TRANSACTIONID'];
//Update order table with tansaction data & return the OrderID
//SQL query goes here..........
$data['orderID'] = $OrderID;
}else{
$data['status'] = 0;
}
echo json_encode($data);
}
?>
Si quieres recurrir la transacción, inserta la clave recurring dentro del array $paypalParams.
$paypalParams['recurring'] = 'Y';
Paypalpro.php
La clase Paypalpro contiene variables y funciones para ayudarte a llamar a la API de Paypal utilizando tus credenciales. Recuerda que debes modificar las variables $apiUsername, $apiPassword y $apiSignature con las credenciales de tu cuenta Business. Si quieres descargarla, puedes hacerlo desde aquí, junto a los demás archivos de este tutorial.
Fuente: codexworld.com