PayPal es una empresa de confianza líder en pagos en Internet que permite a compradores y empresas enviar y recibir dinero en línea de forma rápida y segura.
A través de PayPal, podemos hacer que un sitio web reciba pedidos de pizza por un usuario en donde el usuario puede pagar el monto total a través de PayPal. Para este tutorial hemos realizado un formulario simple en donde el usuario puede seleccionar el tamaño de la pizza, lo cual puede ser pequeña, mediana o grande y también puede añadir ingredientes a su pizza, y de esa manera pagar el costo total de la pizza a través de PayPal.
[caption id="attachment_854" align="aligncenter" width="736"]
Sistema de pedidos de Pizza con PayPal usando PHP[/caption]
Nota: PayPal Ofrece una cuenta de prueba (Sandox) para el desarrollo de aplicaciones. En este ejemplo usaremos el entorno de prueba que Paypal ofrece, Si tu deseas probar la funcionalidad del código de esta demostración, deberás usar tus credenciales de prueba de Paypal.
Si deseas ejecutar el código para tus proyectos en vivo debes cambiar el valor de la variable $paypal_url en la página process.php
//Paypal url modo produccion $paypal_url = 'https://www.paypal.com/cgi-bin/webscr'; //PayPal url para modo de pruebas $paypal_url = 'https://www.sandbox.paypal.com/cgi-bin/webscr';
Detalles del script:
A continuación se presentan los detalles del código utilizado en este tutorial con la explicación más detallada.
index.php
Este archivo contiene el código para los detalles de la pizza, en donde los compradores pueden seleccionar el tamaño de la pizza y añadir sus ingredientes favoritos.
<html>
<head>
<meta charset="utf-8">
<title>Sistema de pedidos de Pizza con PayPal usando PHP</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="js/jquery.min.js"></script>
<!-- jQuery code for implement logic for select pizza size and add toppings checkbox -->
<script type="text/javascript">
$(document).ready(function () {
var size = 0;
$('select').change(function () {
size = ($(this).val());
addValue(size);
});
addValue(size);
function addValue(size) {
var total = 0;
function updateTextArea() {
var allVals = [];
$('#checkbox_container :checked').each(function () {
allVals.push($(this).val());
});
if (size === 0) {
size = 10;
}
total = parseFloat(size) + parseFloat(eval(allVals.join("+")));
if (isNaN(total)) {
if (size === 0) {
total = 10;
}
else {
total = size;
}
}
$('p#total span').html(" $ " + total);
}
$(function () {
$('#checkbox_container input').click(updateTextArea);
updateTextArea();
});
}
});
</script>
</head>
<body>
<div id="main">
<div class="row">
<center><h1 class='text-info'> Sistema de pedidos de Pizza con PayPal usando PHP</h1></center>
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading"><h3 class='text-center'>Ordenar una Pizza con PayPal</h3></div>
<div class="panel-body">
<img id="spizza" src="images/pizza_PNG7135.png" class='img-responsive'/>
<form action="process.php" method="post">
<label>Seleccion el tamaño de la Pizza :</label>
<select name="pizza_type" >
<option value="10">Pizza pequeña - $10.00</option>
<option value="15">Pizza mediana - $15.00</option>
<option value="20">Pizza gigante - $20.00</option>
</select>
<br><br>
<center><h3>Agrega los ingredientes que desees. </h3></center>
<div id="checkbox_container">
<div id="chk">
<p>Jamón</p>
<input class ="chk1" type='checkbox' name='topping1' value='2.00' id="topping1"/><label class ="chk1" for="topping1"></label>
<p>$2.00</p>
</div>
<div id="chk">
<p>Pepperoni</p>
<input class ="chk2" type='checkbox' name='topping2' value='3.00' id="topping2"/><label class ="chk2" for="topping2"></label>
<p>$3.00</p>
</div>
<div id="chk">
<p>Queso</p>
<input class ="chk4" type='checkbox' name='topping4' value='3.50' id="topping4"/><label class ="chk4" for="topping4"></label>
<p>$3.50</p>
</div>
<div id="chk">
<p>Salami</p>
<input class ="chk5" type='checkbox' name='topping5' value='1.25' id="topping5"/><label class ="chk5" for="topping5"></label>
<p>$1.25</p>
</div>
<div id="chk">
<p>Tocino</p>
<input class ="chk3" type='checkbox' name='topping3' value='2.25' id="topping3"/><label class ="chk3" for="topping3"></label>
<p>$2.25</p>
</div>
</div>
<center><p id="total" >Monto total a pagar : <span>$ 20 </span></p></center>
<input type="submit" value=" Ordenar ahora " name="submit">
</form>
</div>
</div>
<div class='text-center'>
<img src="images/secure-paypal-logo.jpg" class='text'>
</div>
</div>
</div>
</div>
</body>
</html>
process.php
Este archivo contiene código para procesar el pago mediante PayPal.
<?php
if (isset($_POST['submit'])) {
// Inicializo las variables para los valores
$topping1 = 0;
$topping2 = 0;
$topping3 = 0;
$topping4 = 0;
$topping5 = 0;
// Inicializo las variables para los nombres
$topping_name1='';
$topping_name2='';
$topping_name3='';
$topping_name4='';
$topping_name5='';
// Agregar URL de paypal ya sea de prueba o modo de produccion
$paypal_url = 'https://www.sandbox.paypal.com/cgi-bin/webscr';
// Añadir correo electrónico del ID del comerciante en PayPal
$merchant_email = 'joaquinobed123456@gmail.com';
// Añadir URL de retorno para tu sitio web
$cancel_return = "http://obedalvarado.pw/demo/pizza-paypal/index.php";
// Añadir URL de la página de éxito para tu sitio web, esto va a llamar cuando el cliente realiza el proceso de pago en PayPal
$success_return = "http://obedalvarado.pw/demo/pizza-paypal/success.php";
$pizza_type = $_POST['pizza_type'];
if ($pizza_type == 10) {
$pizza_name = 'Pizza 1';
$pizza_code="PIZZA001";
} else if ($pizza_type == 15) {
$pizza_name = 'Pizza mediana';
$pizza_code="PIZZA002";
} else if ($pizza_type == 20) {
$pizza_name = 'Pizza gigante';
$pizza_code="PIZZA003";
}
if (isset($_POST['topping1'])) {
$topping1 = 2.00;
$topping_name1 = ', Jamon';
}
if (isset($_POST['topping2'])) {
$topping2 = 3.00;
$topping_name2 = ', Pepperoni';
}
if (isset($_POST['topping3'])) {
$topping3 = 2.25;
$topping_name3 = ', Queso';
}
if (isset($_POST['topping4'])) {
$topping4 = 3.50;
$topping_name4 = ', Salami';
}
if (isset($_POST['topping5'])) {
$topping5 = 1.25;
$topping_name5 = ',Tocino';
}
$currency = 'USD';//Moneda
//Monto total
$pizza_price = $pizza_type + $topping1 + $topping2 + $topping3 + $topping4 + $topping5;
$pizza_topping_details = "Pizza con ".$topping_name1.$topping_name2.$topping_name3.$topping_name4.$topping_name5;
?>
<html>
<head>
<meta charset="utf-8">
<title>Procesando con PayPal</title>
</head>
<body>
<div style="margin-left: 38%"><img src="images/ajax-loader.gif"/><img src="images/processing_animation.gif"/></div>
<form name="myform" action="<?php echo $paypal_url; ?>" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="<?php echo $merchant_email; ?>">
<input type="hidden" name="lc" value="C2">
<input type="hidden" name="item_number" value="<?php echo $pizza_code;?>">
<input type="hidden" name="item_name" value="<?php echo $pizza_name; ?>">
<input type="hidden" name="amount" value="<?php echo $pizza_price; ?>">
<input type="hidden" name="currency_code" value="<?php echo $currency; ?>">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="on0" value="Ingredientes">
<input type="hidden" name="os0" value="<?php echo $pizza_topping_details; ?>">
<input type="hidden" name="cancel_return" value="<?php echo $cancel_return ?>">
<input type="hidden" name="return" value="<?php echo $success_return; ?>">
</form>
<!--Enviando datos a paypal -->
<script type="text/javascript">
document.myform.submit();
</script>
</body></html>
<?php } ?>
success.php
PayPal llama a este archivo cuando el pago se ha completado con éxito y proporciona un arreglo que contiene la Identificación del producto, el ID de la transacción de Paypal, el monto recibido por PayPal, el tipo de moneda que recibió PayPal y el estado del producto.
<html>
<head>
<meta charset="utf-8">
<title>Sistema de pedidos de Pizza con PayPal usando PHP</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="main">
<div class="row">
<center><h1 class='text-info'> Sistema de pedidos de Pizza con PayPal usando PHP</h1></center>
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading"><h4 class='text-center'>Estado de la orden</h4></div>
<div class="panel-body">
<img id="pizza-success" src="images/pizza-success.jpg" >
<center> <h3>Transacción ID = <?php
if (isset($_REQUEST['st'])) {
echo $_REQUEST['tx'];
}
?> </h3></center>
<?php if (isset($_REQUEST['st']) == 'completed') { ?>
<center><h3 style="color:green;">Orden completada satisfactoriamente</h3></center>
<?php } else { ?>
<center><h3 style="color:red;">Lo sentimos, intenta nuevamente</h3></center>
<?php } ?>
<br><br>
<center><a id="backTopizza" href="index.php" ><< Ordenar una nueva Pizza</a></center>
<br><br>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
Incluye un estilo básico de los elementos HTML.
@import url(http://fonts.googleapis.com/css?family=Raleway);
#main{
width:960px;
margin:10px auto;
font-family:raleway;
}
span{
color:red;
}
hr{
border:0;
border-bottom:1px solid #ccc;
margin: 10px -40px;
margin-bottom: 30px;
}
select{
width:99.5%;
padding: 10px;
margin-top: 8px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
#container{
width: 40%;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
margin-top: 20px;
margin-left: 25%;
}
input[type=submit]{
width: 100%;
background-color:#FFBC00;
color: white;
border: 2px solid #FFCB00;
padding: 10px;
font-size:20px;
cursor:pointer;
border-radius: 5px;
}
#pizza{
width: 378px;
height: 125px;
margin-left: 46px;
margin-top: -29px;
}
input[type=checkbox] {
display:none;
}
#chk{
float: left;
margin-right: 10px;
}
input.chk1 + label.chk1{
background: url(../images/jamon.png) no-repeat;
box-shadow: rgb(153, 163, 173) 0px 5px 17px 1px, rgb(238, 238, 238) 0px 0px 40px;
background-size: 60px 60px;
height: 60px;
width: 60px;
display:inline-block;
padding: 0 0 0 0px;
cursor:pointer;
transition: all .2s ease-in-out;
}
input.chk1 + label.chk1:hover{
transform: scale(1.1);
}
input.chk1:checked + label.chk1{
background: url(../images/right.png) no-repeat;
background-size: 60px 60px;
height: 60px;
width: 60px;
display:inline-block;
padding: 0 0 0 0px;
}
input.chk2 + label.chk2{
background: url(../images/pepperoni.png) no-repeat;
box-shadow: rgb(153, 163, 173) 0px 5px 17px 1px, rgb(238, 238, 238) 0px 0px 40px;
background-size: 60px 60px;
height: 60px;
width: 60px;
display:inline-block;
padding: 0 0 0 0px;
cursor:pointer;
transition: all .2s ease-in-out;
}
input.chk2 + label.chk2:hover{
transform: scale(1.1);
}
input.chk2:checked + label.chk2{
background: url(../images/right.png) no-repeat;
background-size: 60px 60px;
height: 60px;
width: 60px;
display:inline-block;
padding: 0 0 0 0px;
}
input.chk3 + label.chk3{
background: url(../images/tocino_picado.png) no-repeat;
box-shadow: rgb(153, 163, 173) 0px 5px 17px 1px, rgb(238, 238, 238) 0px 0px 40px;
background-size: 60px 60px;
height: 60px;
width: 60px;
display:inline-block;
padding: 0 0 0 0px;
cursor:pointer;
transition: all .2s ease-in-out;
}
input.chk3 + label.chk3:hover{
transform: scale(1.1);
}
input.chk3:checked + label.chk3{
background: url(../images/right.png) no-repeat;
background-size: 60px 60px;
height: 60px;
width: 60px;
display:inline-block;
padding: 0 0 0 0px;
}
input.chk4 + label.chk4{
background: url(../images/cheese.jpg) no-repeat;
box-shadow: rgb(153, 163, 173) 0px 5px 17px 1px, rgb(238, 238, 238) 0px 0px 40px;
background-size: 60px 60px;
height: 60px;
width: 60px;
display:inline-block;
padding: 0 0 0 0px;
cursor:pointer;
transition: all .2s ease-in-out;
}
input.chk4 + label.chk4:hover{
transform: scale(1.1);
}
input.chk4:checked + label.chk4{
background: url(../images/right.png) no-repeat;
background-size: 60px 60px;
height: 60px;
width: 60px;
display:inline-block;
padding: 0 0 0 0px;
}
input.chk5 + label.chk5{
background: url(../images/salami.png) no-repeat;
box-shadow: rgb(153, 163, 173) 0px 5px 17px 1px, rgb(238, 238, 238) 0px 0px 40px;
background-size: 60px 60px;
height: 60px;
width: 60px;
display:inline-block;
padding: 0 0 0 0px;
cursor:pointer;
transition: all .2s ease-in-out;
}
input.chk5 + label.chk5:hover
{
transform: scale(1.1);
}
input.chk5:checked + label.chk5{
background: url(../images/right.png) no-repeat;
background-size: 60px 60px;
height: 60px;
width: 60px;
display:inline-block;
padding: 0 0 0 0px;
}
p#total{
margin-top: 195px;
margin-bottom: 23px;
font-size: 18px;
font-weight: 600;
color: rgb(18, 136, 46);
}
img#pizza-success{
margin-left: 75px;
}
a#backTopizza{
width: 100%;
background-color: #FFBC00;
color: white;
border: 2px solid #FFCB00;
padding: 10px 46px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
text-decoration: none;
}
Conclusión:
Luego de haber leído el post anterior, estoy seguro de que será de mucha utilidad a tus proyectos a la hora de querer procesar pagos usando como pasarela de pagos Paypal, eres libre de usar el código tanto para fines educativos como para fines comerciales. Te invito a que dejes un comentario describiendo que tal te pareció este post, te lo agradeceré.
Comentarios