Hoy vamos a hablar sobre como implementar una herramienta para recibir pagos en el sitio web con Paypal, de esta forma podrás añadir el pago en linea como una de las funcionalidades de tu sitio web.
Uno de los puntos básicos para esto es ofrecer pagos en linea en tu sitio web, para programar o implementar esta herramienta vamos a hacer uso de Paypal Express Checkout.
Paypal Express Checkout nos va a permitir ofrecer a nuestros clientes una plataforma segura para el pago pues el proceso y la encriptación viene de parte de Paypal por lo que nosotros unicamente vamos a inicar una solititud de pago a nuestro favor y Paypal se encargará del resto.
Esta integración con Paypal le permitirá a nuestros clientes pagar mediante su saldo Paypal iniciando sesión o incluso unicamente pagar con tarjeta sin tener que hacer una cuenta en esta plataforma.
Para más información sobre Paypal Express Checkout puedes leer su documentación.
Pues manos a la obra entonces!
ESTRUCTURA HTML
Supongamos que vamos a solicitar a nuestros clientes un correo electrónico y la cantidad a pagarnos.
Para esto vamos a tener un codigo html básico que solicite ambos campos:
|
1
2
3
4
5
6
7
8
|
<div class=«form-group»><label for=«correo»>Correo electrónico</label>
<input id=«correo» class=«form-control» type=«text» placeholder=«Ej. jonathan@email.com» /></div>
<div class=«form-group»><label for=«cantidad»>Cantidad a pagar</label>
<input id=«cantidad» class=«form-control» type=«text» placeholder=«000.00» /></div>
<div class=«form-group»>
<div id=«paypal-button-container» style=«text-align: right;»></div>
</div>
|
Como puedes ver también hay un div con id “paypal-button-container” que servirá para el boton de pagar con paypal, aquí unicamente debes de notar el id para hacer referencia a él más tarde.
Y hemos terminado con el HTML!
INTEGRANDO PAYPAL EXPRESS CHECKOUT
Lo primero que tenemos que hacer es importar la librería necesaria:
|
1
|
<script src=«https://www.paypalobjects.com/api/checkout.js»></script>
|
Ahora toca implementar la función render del boton de paypal pasando como parametro el propio Id de nuestro contenedor paypal, posteriormente dentro de esta función vamos a definir nuestro boton asi como su funcionamiento.
El código viene comentado con puntos claves para que no te pierdas de nada:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
paypal.Button.render({
//ambiente de produccion o sandbox
env: ‘production’,
//Idioma
locale: ‘es_ES’,
//Estilo del boton
style: {
size: ‘medium’,
color: ‘blue’,
shape: ‘rect’,
label: ‘checkout’
},
//ids de cliente modo sandbox y produccion
client: {
sandbox: ‘<Tu clave>’,
production: ‘<Tu clave>’
},
commit: true,
payment: function(data, actions) {
//Obtenemos los valores de correo electronico y cantida a pagar
var correo_electronico = document.getElementById(‘correo’).value;
var cantidad_total = document.getElementById(‘cantidad’).value;
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: cantidad_total , currency: ‘MXN’},
custom: correo_electronico
}
]
},
experience: {
input_fields: {
//Para no mostrar direcciones de envio
no_shipping: 1
}
}
});
},
onAuthorize: function(data, actions) {
//Redireccionamos a otra pagina si todo va bien
return actions.payment.execute().then(function() {
window.location.href = «URL DE GRACIAS»;
});
},
onCancel: function(data, actions) {
//En caso de cancelacion
},
onError: function(err) {
//En caso de error
}
}, ‘#paypal-button-container’);
|
Cabe mencionar que obviamente faltan validaciones en los campos pero para modo ejemplo nos sirve bastante.
Para obtener tu clave de sandbox y/o producción crea una app en https://developer.paypal.com/developer/applications/.
También puedes notar que el campo correo electrónico lo mandamos como campo adicional, este campo se puede visualizar en la cuenta de Paypal que recibe los pagos al dar clic sobre un pago en campos adicionales, con esto puedes comprobar que correo electrónico realizo un pago.
Como extra podemos activar en envio de IPN de Paypal para establecer una ruta o archivo donde queremos que nos mande esta información para procesarlo o mandar un email por ejemplo, de esta forma cada que recibamos un pago podremos recibir un correo electrónico con la cantidad pagada y correo electrónico de la persona que realizo el pago.
Por último cada que se realice una transacción con éxito podemos redirigir al usuario a una página de agradecimiento o siguientes pasos a seguir para el proceso de pago, esto se haría en la función onAuthorize.
Eso es todo! Espero y te sirva de algo esta integración de Paypal Express Checkout para recibir pagos en el sitio web fácilmente.
