Recibir pagos en el sitio web con Paypal Express Checkout

Recibir pagos en el sitio web con Paypal Express Checkout

¿Tienes un sitio web? ¿Deseas que tus clientes te paguen fácilmente desde él? 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.

Ya hemos hablado sobre como vender tus servicios por Internet, 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.


¿Sabías que?

¿Necesitas aprender algo nuevo ? Ve a Udemy, busca el tema del que quieres aprender, selecciona el curso para ti y continua con tu aprendizaje.

Udemy

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:

<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:

<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:

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.

como recibir pagos en el sitio web con paypal express checkout demo

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.

Si te sirvio no olvides compartirlo en tus redes sociales y si tienes alguna duda dejamela en los comentarios de ésta página.

Hasta luego!

Clic para valorar esta información
[Total: 0 Promedio: 0]