Integración de PayU y PayPal en Platzi Store

Curso de E-Commerce para Implementar Pagos Electrónicos

Clase 15 de 20

Clase 15 / 20

Recursos

Agregar opciones de cobro a una tienda en línea no requiere ser experto en programación. Con conocimientos básicos de HTML, CSS y JavaScript, puedes copiar y pegar el código que generan pasarelas como PayU y PayPal para empezar a recibir pagos de forma profesional. A continuación se explica paso a paso cómo configurar cada una de estas integraciones.

¿Cómo crear un botón de pago con PayU?

Dentro del panel de PayU existe una sección de herramientas donde se encuentra la opción de crear un botón de pago [01:00]. Este botón se genera directamente desde la plataforma y produce un fragmento de código HTML listo para insertar en cualquier página web.

El proceso de configuración incluye:

Seleccionar la cuenta y la moneda en la que se desea cobrar.
Asignar una referencia al producto, por ejemplo "002".
Definir el valor del artículo y el porcentaje de impuesto (como el 19 % de IVA en Colombia).
Decidir si se solicitan datos de envío o si el envío es gratuito.
Habilitar un campo de mensaje para que el cliente agregue indicaciones como "por favor, que sea talla mediana".

¿Qué métodos de pago se pueden habilitar?

PayU permite personalizar los métodos de pago que aparecerán en la pasarela [02:20]. Entre las opciones disponibles están tarjetas Visa, American Express, pagos en efectivo con Efecty y transferencias bancarias mediante PSE, un método muy popular en Colombia. También es posible configurar URLs de redirección para cuando la compra es exitosa, falla o queda pendiente, lo que mejora la experiencia del cliente.

Una vez configurado, PayU genera un código que se copia y se pega directamente en el HTML del sitio, justo debajo del precio del producto [03:20]. Al recargar la página, el botón "Paga con PayU" aparece funcional. Al hacer clic, el cliente llega a la pasarela de pago, donde ingresa sus datos personales, selecciona el método de pago y completa la transacción.

¿Cómo integrar botones inteligentes de PayPal?

PayPal ofrece dentro de su panel la sección de herramientas y luego botones de PayPal [05:05]. La opción recomendada son los botones inteligentes (smart buttons), que permiten una configuración más completa del proceso de checkout.

¿Qué opciones de personalización ofrece PayPal?

Con los botones inteligentes se puede configurar [05:30]:

El tipo de botón, incluyendo listas de selección para diferentes variantes del producto.
El porcentaje de impuesto aplicable, por ejemplo un 16 %.
Múltiples tallas con precios diferentes: talla chica a 20 dólares, mediana y grande a 25 dólares.
La cantidad máxima que un cliente puede adquirir, por ejemplo tres unidades.
Una vista previa de cómo se verá el botón tanto en escritorio como en dispositivos móviles.

Una vez generado, el código se copia y se inserta en el HTML del sitio junto al producto correspondiente [06:50]. Al recargar la tienda, aparecen el selector de talla y dos opciones de pago: tarjeta o cuenta de PayPal.

Si el cliente elige pagar con tarjeta, se despliega un formulario donde ingresa país, número de tarjeta, fecha de vencimiento, código de seguridad y la dirección asociada [07:30]. Si prefiere usar su cuenta de PayPal, simplemente inicia sesión en su billetera electrónica y confirma el pago con la tarjeta que ya tiene vinculada [08:00]. PayPal muestra un resumen con el monto total, la tarjeta asociada y la dirección, y con un clic se completa la compra.

¿Qué conocimientos necesitas para integrar pasarelas de pago?

La integración de estas pasarelas es accesible para cualquier persona con conocimientos básicos de HTML, CSS y JavaScript [08:40]. Tanto PayU como PayPal generan el código necesario; la tarea del desarrollador o emprendedor es copiarlo y pegarlo en el lugar correcto del sitio web.

El flujo general es siempre el mismo:

Configurar el producto y sus opciones en el panel de la pasarela.
Copiar el fragmento de código generado.
Insertarlo en el código fuente del sitio, junto al producto correspondiente.
Verificar que el botón funcione correctamente al recargar la página.

Estas herramientas simplifican enormemente el proceso de cobro en línea, permitiendo que una tienda reciba pagos con tarjeta, transferencias y efectivo sin necesidad de desarrollar una solución desde cero. ¿Ya decidiste qué pasarela vas a integrar primero en tu tienda? Comparte tu experiencia en los comentarios.