Todo comenzó el mes pasado cuando recibí el siguiente correo electrónico:
Tienes razón, Devon, siempre es bueno escuchar nuevas ideas para tutoriales. Y un centro de donaciones es una gran oportunidad para experimentar con las API de PayPal y crear algo de lo que muchas personas puedan beneficiarse.
La idea
PayPal proporciona numerosas API y opciones de integración para desarrolladores externos. Uno de ellos es el botón Donación, que puede generar directamente desde el sitio de PayPal e incluirlo directamente en sus páginas. La tasa de conversión de estos botones suele ser mínima, pero el incentivo adecuado puede marcar una gran diferencia.
La idea es tener un Centro de Donación dedicado . Este es un lugar donde puedes ver la diferencia que haría tu donación y una lista de personas que ya han donado.
Después de elegir la cantidad que desea donar y hacer clic en el botón, será redirigido a paypal.com para completar la transacción. Una vez hecho esto, se le redirigirá de nuevo al centro de donación donde podrá completar un formulario y ser incluido en la Lista de donantes oficial. .
Paso 1 - Base de datos
El script usa dos tablas:dc_donations y dc_comentarios . El primero almacena los datos de donación que se pasan en una solicitud de PayPal (volveremos a esto en el paso de PHP del tutorial).
La segunda tabla contiene la información sobre los donantes, que ellos mismos completan en la página de agradecimiento.
Puede crear estas tablas en su base de datos ejecutando el código SQL desde tables.sql (que se encuentra en el archivo de descarga) desde la pestaña SQL de phpMyAdmin. También puede simplemente cargar el archivo a través de la función "Importar".
Después de esto, recuerde agregar sus datos de inicio de sesión de MySQL a connect.php .
Paso 2:XHTML
Pasando al marcado del propio centro de donación. Donar PHP es la única página que ven sus visitantes. La otra página es gracias.php , que se muestra solo a los donantes, una vez que han completado el proceso de donación.
donar.php
<div id="main">
<h1>Donation Center</h1>
<h2>Show Your Support for our Cause</h2>
<div class="lightSection">
<h3>Hello, dear visitor!</h3>
<p>This is Tutorialzine's Donation Center...</p>
<!-- The PayPal Donation Button -->
</div>
<div class="chart">
Our Goal
</div>
<div class="donations">
<?php echo $percent?>% done
</div>
<div class="clear"></div>
<div class="donors">
<h3>The Donor List</h3>
<h4>Folks Who Showed Their Support</h4>
<div class="comments">
<!-- PHP Code that generates the comments -->
</div> <!-- Closing the comments div -->
</div> <!-- Closing the donors div -->
</div> <!-- Closing the main div --> La .lightSection div contiene el mensaje que le mostramos al visitante de la página y el marcado del botón de donación de PayPal, que puede ver a continuación. Después de esto, está el gráfico circular que muestra cuánto se cumplió de nuestro objetivo inicial. El gráfico se genera con la API de gráficos de Google. Por último, están los .donantes div, que contiene una lista de donantes que ya han donado.
donar.php
<form action="<?php echo $payPalURL?>" method="post" class="payPalForm">
<div>
<input type="hidden" name="cmd" value="_donations" />
<input type="hidden" name="item_name" value="Donation" />
<!-- Your PayPal email: -->
<input type="hidden" name="business"
value="<?php echo $myPayPalEmail?>"/>
<!-- PayPal will send an IPN notification to this URL: -->
<input type="hidden" name="notify_url"
value="<?php echo $url.'/ipn.php'?>" />
<!-- The return page to which the user is
navigated after the donations is complete: -->
<input type="hidden" name="return"
value="<?php echo $url.'/thankyou.php'?>" />
<!-- Signifies that the transaction data will be
passed to the return page by POST: -->
<input type="hidden" name="rm" value="2" />
<!-- General configuration variables for the paypal landing page. -->
<input type="hidden" name="no_note" value="1" />
<input type="hidden" name="cbt" value="Go Back To The Site" />
<input type="hidden" name="no_shipping" value="1" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="currency_code" value="USD" />
<!-- The amount of the transaction: -->
<select name="amount">
<option value="50">$50</option>
<option value="20">$20</option>
<option value="10" selected="selected">$10</option>
<option value="5">$5</option>
<option value="2">$2</option>
<option value="1">$1</option>
</select>
<input type="hidden" name="bn" value="
PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest" />
<!-- You can change the image of the button: -->
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!" />
<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif"
width="1" height="1" />
</div>
</form>
El botón Donación de PayPal está estructurado como un formulario html regular. Cuando hace clic en el gráfico Donar, el formulario se envía a PayPal. Hay varias personalizaciones disponibles, como el monto de la donación, el correo electrónico del destinatario de la donación y muchas más (la lista completa de opciones se encuentra aquí). Cada una de estas opciones se agrega como un campo oculto al formulario.
Tenga en cuenta el retorno y el notify_url variables El primero toma la URL de la página a la que se redirige al usuario tras la realización del pago (en nuestro caso gracias.php ), y la otra es una página especial, que escucha las notificaciones de pago instantáneo de PayPal (IPN ).
Ahora pasemos a la parte de PHP del tutorial.
Paso 3 - PHP
Como se mencionó en el paso anterior, cuando se produce un pago, PayPal envía una notificación de IPN a su script, que contiene todo tipo de datos para la transacción. La implementación de esta página de escucha de IPN implica mucha codificación, ya que la secuencia de comandos debe validar que la notificación fue emitida por PayPal.
Por suerte para nosotros, hay buenas personas que ya implementaron estas validaciones y las empaquetaron en una clase PHP5 de PayPal fácil de usar. Ahora echemos un vistazo a cómo se usa esto:
ipn.php
require "paypal_integration_class/paypal.class.php";
require "config.php";
require "connect.php";
$p = new paypal_class;
$p->paypal_url = $payPalURL; // $payPalURL is defined in config.php
if ($p->validate_ipn()) {
if($p->ipn_data['payment_status']=='Completed')
{
$amount = $p->ipn_data['mc_gross'] - $p->ipn_data['mc_fee'];
mysql_query(" INSERT INTO dc_donations (transaction_id,donor_email,amount,original_request)
VALUES (
'".esc($p->ipn_data['txn_id'])."',
'".esc($p->ipn_data['payer_email'])."',
".(float)$amount.",
'".esc(http_build_query($_POST))."'
)");
}
}
function esc($str)
{
global $link;
return mysql_real_escape_string($str,$link);
} Primero creamos una nueva paypal_class y asígnele la URL de PayPal. El resto es solo cuestión de llamar a $p->validate_ipn() método y hará todo el trabajo duro por nosotros. Si todo salió bien, insertamos el monto de la transacción, el correo electrónico del beneficiario y la identificación de la transacción en dc_donations mesa. Probablemente sea un buen lugar para tener en cuenta que esta página no es visible para el usuario final, solo existe para escuchar las notificaciones de IPN de PayPal que ocurren en el backend.
gracias.php
require "config.php";
require "connect.php";
if(isset($_POST['submitform']) && isset($_POST['txn_id']))
{
$_POST['nameField'] = esc($_POST['nameField']);
$_POST['websiteField'] = esc($_POST['websiteField']);
$_POST['messageField'] = esc($_POST['messageField']);
$error = array();
if(mb_strlen($_POST['nameField'],"utf-8")<2)
{
$error[] = 'Please fill in a valid name.';
}
if(mb_strlen($_POST['messageField'],"utf-8")<2)
{
$error[] = 'Please fill in a longer message.';
}
if(!validateURL($_POST['websiteField']))
{
$error[] = 'The URL you entered is invalid.';
}
$errorString = '';
if(count($error))
{
$errorString = join('<br />',$error);
}
else
{
mysql_query(" INSERT INTO dc_comments (transaction_id, name, url, message)
VALUES (
'".esc($_POST['txn_id'])."',
'".$_POST['nameField']."',
'".$_POST['websiteField']."',
'".$_POST['messageField']."'
)");
if(mysql_affected_rows($link)==1)
{
$messageString = '<a href="donate.php">You were added to our donor section!</a>';
}
}
} Una vez que el uso ha donado, PayPal lo redirige a nuestra página de agradecimiento. Aquí puede agregarse a la lista de donantes completando un formulario. Al redireccionar, PayPal coloca los datos de la transacción en el $_POST matriz, que está disponible para thankyou.php . Podemos usar estos datos para confirmar que el usuario realmente ha donado, y no solo navegó manualmente a thankyou.php , sin pasar por PayPal. Después de enviar el formulario, el usuario se agrega a dc_comments mesa.
donar.php
require "config.php";
require "connect.php";
// Determining the URL of the page:
$url = 'http://'.$_SERVER['SERVER_NAME'].dirname($_SERVER["REQUEST_URI"]);
// Fetching the number and the sum of the donations:
list($number,$sum) = mysql_fetch_array(mysql_query("SELECT COUNT(*),SUM(amount) FROM dc_donations"));
// Calculating how many percent of the goal are met:
$percent = round(min(100*($sum/$goal),100));
// Building a URL with Google's Chart API:
$chartURL = 'http://chart.apis.google.com/chart?chf=bg,s,f9faf7&cht=p&chd=t:'.$percent.',-'.(100-$percent).'&chs=200x200&chco=639600&chp=1.57';
Chart Api de Google es una manera fácil de generar cualquier tipo de gráfico. Para usarlo, solo tiene que crear una URL a http://chart.apis.google.com/ que contiene configuraciones como el color de fondo, el tipo de gráfico (en nuestro caso, un gráfico circular) y una lista de valores separados por comas. que sirven como datos. Puede incluir esta URL como lo haría con una imagen normal y se generará un gráfico dinámicamente para usted.
donar.php
<?php
$comments = mysql_query("SELECT * FROM dc_comments ORDER BY id DESC");
// Building the Donor List:
if(mysql_num_rows($comments))
{
while($row = mysql_fetch_assoc($comments))
{
?>
<div class="entry">
<p class="comment">
<?php
echo nl2br($row['message']); // Converting the newlines of the comment to <br /> tags
?>
<span class="tip"></span>
</p>
<div class="name">
<?php echo $row['name']?> <a class="url" href="<?php echo $row['url']?>"><?php echo $row['url']?></a>
</div>
</div>
<?php
}
}
?> Más tarde en donar.php , estamos creando la lista de donantes después de ejecutar una consulta en dc_comments mesa.
Paso 4 - CSS
Habiendo generado e incluido todo el marcado en la página, es hora de diseñarla. Puede que le resulte sorprendente, pero todo el diseño está completamente basado en CSS y no utiliza una sola imagen (aparte de la imagen del botón Donar de PayPal).
estilos.css - Parte 1
*{
/* Universal page reset */
margin:0;
padding:0;
}
body{
/* Setting default text color, background and a font stack */
font-size:13px;
color:#9bb370;
background-color:#f9faf7;
font-family:Rockwell, 'Courier New', Courier, Georgia, serif;
}
p{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
}
h1{
/* The Donation Center text */
border-bottom:1px solid #E3EBD2;
color:#639600;
font-size:70px;
line-height:1;
margin-left:-20px;
padding:0 0 0 30px;
}
h2{
/* The subtitle, notice the line-height property */
border-left:1px solid #E3EBD2;
color:#ABC084;
font-size:35px;
height:35px;
line-height:75px;
margin:-70px 0 0;
padding:55px 0 0 10px;
}
h3{
color:#639600;
font-size:38px;
}
#main{
/* The main container div */
margin:40px auto;
padding:0 0 0 20px;
position:relative;
width:860px;
} Puede notar en la página de demostración, cómo el encabezado y el subtítulo del Centro de donaciones forman un interesante conjunto de líneas. De hecho, estos son los bordes inferior e izquierdo de h1 y h2 respectivamente.
estilos.css - Parte 2
.chart{
/* The Google Chart is set as this div's background via the style attribute.
The negative text-indent moves the text outside the box */
margin:0 0 0 300px;
text-indent:-300px;
width:200px;
}
.donations,.chart{
color:#ABC084;
font-size:50px;
font-weight:bold;
float:left;
height:200px;
line-height:200px;
}
.donations{ text-align:right; width:340px;}
.comments{ margin-top:60px;}
.entry{ margin-bottom:50px;}
.comment{
background-color:#edf2e4;
padding:20px;
position:relative;
margin-bottom:20px;
}
.name{
color:#639600;
font-size:24px;
font-style:italic;
font-weight:bold;
position:relative;
}
.name a.url{
color:#C0D39C;
font-weight:normal;
padding-left:10px;
}
.tip{
width:0;
height:0;
bottom:-40px;
left:20px;
/* A neat CSS trick which creates a triangle shape*/
/* from the div's top border */
border:20px solid #f9faf7;
border-width:20px 15px;
border-top-color:#edf2e4;
position:absolute;
} También es posible crear una forma de triángulo con CSS estableciendo el ancho y el alto del div en cero y especificando un valor grande para el ancho de los bordes.
¡Con esto nuestro Centro de Donaciones de PHP y MySQL está completo!
Conclusión
Puede utilizar este centro de donación para convertir el acto generalmente anónimo de donar fondos en un proceso más social y abierto. Posiblemente puede modificar el código para incluir la integración de Twitter y Facebook o mejorarlo de cualquier otra forma que considere adecuada.
¿Qué opinas? ¿Cómo mejorarías este código?