Imagina que tuvieras una página de aterrizaje de producto (landing page) increíble, con clientes haciendo cola para realizar una compra. Pero tu procesamiento manual de pagos en JavaScript con scripts del lado del servidor, Authorize.net o 2Checkout te fallara.
Frustrado por no poder realizar la compra, tu cliente se marcha a la competencia.
Imagino que sería una sensación terrible. Seguro que hay una forma mejor de hacerlo con pasarelas de pago modernas y ampliamente aceptadas. Al final de este tutorial, me aseguraré de que no te encuentres en esa situación.
Cuando se trata de aceptar pagos en Internet, PayPal es una de las opciones más utilizadas y fiables que existen. Cada día aparecen muchas nuevas empresas de software que utilizan PayPal para gestionar sus transacciones y los pagos de sus clientes.
Integrar PayPal en tus propias páginas de producto HTML/CSS/JS puede mejorar enormemente la experiencia del usuario y agilizar el proceso de pago para tus clientes.
PayPal también tiene una gran documentación para programadores que hace que esta integración sea aún más fácil de usar.
En este tutorial, veremos los pasos necesarios para integrar PayPal en tus páginas de producto. Aprenderás cómo configurar tu PayPal para la integración e implementar el código en tus páginas HTML/CSS/JS. A continuación, veremos cómo puede utilizar en el futuro los nuevos conocimientos adquiridos.
¿Cómo Puedes Utilizar este Tutorial?
Ahora, déjame usar un ejemplo para darte una mejor idea de cómo puedes usar este tutorial. (Alerta de historia ficticia)
Hace poco, decidí crear una nueva empresa en línea. Después de deliberar a través de innumerables ideas para startups de software, decidí iniciar una tienda en línea de libros electrónicos.
Como primer producto, publiqué un Pack de eBooks que cubría los mejores libros tanto para principiantes como avanzados. Emocionado, creé una página de aterrizaje del producto con los mejores materiales de HTML, CSS y JavaScript.
Presentando “Mi Pack HTML“, un glorioso pack de programación web de $2.99 que contiene todo lo que necesitas saber, incluyendo bonos adicionales y actualizaciones gratuitas a medida que se publiquen nuevas ediciones de los libros. Esto es lo que parece:
Pack a pedido
Esta página de destino del producto ha sido creada en una hora usando algunos simples HTML y CSS. Aquí están los archivos utilizados:
Código de index.html
<html lang="es">
<!DOCTYPE html>
<html lang="es">
<head>
<title>HTML Pack Libros</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="product-container">
<div class="product-image-container">
<img src="Mi_Pack_HTML.png" alt="Mi Pack HTML">
</div>
<div class="product-info-container">
<h1>Mi Pack HTML</h1>
<p class="price">$2.99</p>
<p class="product-description">
¿Estás listo para adentrarte en el fascinante mundo del desarrollo web y dominar el lenguaje HTML? Te presentamos nuestro exclusivo Pack de Libros HTML, una colección completa diseñada para llevar tus habilidades de programación al siguiente nivel. Este paquete único incluye una selección de libros cuidadosamente seleccionados, escritos por expertos en el campo del desarrollo web. Cada libro ha sido creado con el objetivo de proporcionarte conocimientos prácticos, ejemplos claros y guías detalladas que te ayudarán a comprender y dominar HTML.
</p>
<p>*Se aplican Términos y Condiciones</p>
</div>
<form>
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" required>
<label for="address">Dirección:</label>
<input type="text" id="address" name="address" required>
<div class="card-info">
<label for="card-number">Tarjeta de Crédito:</label>
<input type="text" id="card-number" name="card-number" required>
</div>
<div class="card-info">
<label for="expiry-date">Fecha Exp.:</label>
<input type="text" id="expiry-date" name="expiry-date" required>
<label for="cvv">CVV:</label>
<input type="text" id="cvv" name="cvv" required>
</div>
<input type="button" value="Comprar Ahora" onclick="submitForm()">
</form>
</div>
<script src="script.js"></script>
</body>
</html>Código style.css
* {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.product-container {
text-align: justify;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
display: flex;
flex-wrap: wrap;
}
.product-image-container {
padding-top: 50px;
width: 40%;
}
.product-info-container {
width: 60%;
padding-left: 20px;
}
img {
width: 100%;
height: auto;
}
form {
display: flex;
flex-wrap: wrap;
}
label, input[type="text"] {
width: 100%;
padding: 12px;
margin-top: 8px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
}
label {
width: 30%;
padding-right: 10px;
}
input[type="text"] {
width: 70%;
}
input[type="button"] {
background-color: #ff5722;
color: #fff;
padding: 12px 24px;
border: none;
cursor: pointer;
margin-top: 20px;
width: 100%;
}
input[type="text"][name="card-number"], input[type="text"][name="expiry-date"], input[type="text"][name="cvv"] {
width: 30%;
}
h1 {
margin-top: 0;
}
.price {
color: #ff5722;
font-size: 1.5em;
font-weight: bold;
}Código script.js
Con conocimientos anticuados, uno aceptaría el pago a través de un formulario para recoger los datos de pago antes de procesarlo manualmente con un proveedor de pagos. Un archivo JavaScript de ejemplo podría tener este aspecto:
// Obtener referencias a los elementos del formulario
const form = document.getElementById("payment-form");
const cardNumber = document.getElementById("card-number");
const expiryDate = document.getElementById("expiry-date");
const cvv = document.getElementById("cvv");
const submitButton = document.getElementById("submit-button");
// Manejar el envío de formularios
form.addEventListener("submit", (event) => {
event.preventDefault();
// Desactivar el botón submit para evitar envíos múltiples
submitButton.disabled = true;
// Crear un objeto que contenga los datos del formulario
const formData = {
cardNumber: cardNumber.value,
expiryDate: expiryDate.value,
cvv: cvv.value,
};
// Realizar la validación del lado del cliente en los datos del formulario
if (!validateFormData(formData)) {
// Si los datos no son válidos, vuelve a activar el botón submit y retorna
submitButton.disabled = false;
return;
}
// Enviar los datos del formulario al servidor
// Lo siguiente es sólo un ejemplo y no debe utilizarse en un escenario real
// ya que carece de medidas de seguridad y de una integración adecuada de la pasarela de pago
fetch("/charge", {
method: "POST",
body: JSON.stringify(formData),
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((data) => {
// Manejar la respuesta del servidor
if (data.success) {
// El pago se ha realizado correctamente
alert("¡Pago efectuado!");
} else {
// Pago fallido
alert("Pago fallido. Por favor, inténtelo de nuevo.");
submitButton.disabled = false;
}
})
.catch((error) => {
console.error(error);
alert("Se ha producido un error. Por favor, inténtelo de nuevo.");
submitButton.disabled = false;
});
});
function validateFormData(data) {
// Example validation checks
if (!data.cardNumber || data.cardNumber.length !== 16) {
alert("Por favor, introduce un número de tarjeta válido.");
return false;
}
if (!data.expiryDate || data.expiryDate.length !== 5) {
alert("Por favor, introduce una fecha de caducidad válida en el formato MM/AA.");
return false;
}
if (!data.cvv || data.cvv.length !== 3) {
alert("Por favor, introduce un CVV válido.");
return false;
}
return true;
}Sin embargo, esta forma anticuada de cobrar plantea varios problemas:
- La seguridad: Sin las medidas de seguridad adecuadas, la información sensible, como números de tarjetas de crédito e información personal, puede ser vulnerable a la piratería y el fraude.
- Cumplimiento: Una empresa puede enfrentarse a sanciones y problemas legales si no cumple normativas como la PCI-DSS.
- Escalabilidad: El procesamiento de pagos utilizando sólo HTML, CSS y JavaScript puede no ser capaz de manejar un alto volumen de transacciones, especialmente durante los períodos pico.
- Mantenimiento: Mantener y actualizar un sistema de pago personalizado puede llevar mucho tiempo y ser costoso.
- Funciones limitadas: El cobro de pagos utilizando sólo HTML, CSS y JavaScript puede carecer de características tales como pagos recurrentes, suscripciones, reembolsos y detección de fraude.
- Falta de integración con otras herramientas: HTML, CSS y JavaScript no tienen integraciones incorporadas con otras herramientas como software de contabilidad, software de gestión de inventario y proveedores de envío.
Así que una forma mucho más sencilla, por no hablar de más fluida y funcional, sería abstraer todas las gestiones de pago a un tercero. Sobre todo porque los clientes suelen estar más familiarizados con el uso de estas pasarelas de pago de terceros.
Incluso si no vendes un producto, esto puede ser ideal para sitios web que venden algún tipo de servicio o consulta independiente, una tendencia que hemos estado viendo en los últimos tiempos. Permitir que el cliente realice el pago con una pasarela de pago de terceros conocida directamente desde tu sitio web mejorará enormemente la experiencia de usuario de tu servicio.
Tanto tú como el cliente salen ganando. Tú programas menos y ellos reciben más. Así que vamos a sumergirnos para averiguar cómo podemos implementar esto en tus propios sitios Web.
Cómo Integrar PayPal en tus Páginas de Producto
Ahora que sabemos lo que queremos conseguir, pasemos a la acción. He dividido el proceso en 6 pasos fáciles de seguir. Son los siguientes:
- Accede a las herramientas de programador de PayPal para obtener tus API.
- Configura un entorno de pruebas de PayPal.
- Crea y personaliza tu botón de PayPal.
- Integra tu botón en tus archivos actuales.
- Prueba la integración utilizando el entorno de pruebas de PayPal.
- Ponte en marcha y empieza a aceptar pagos reales.
Tenemos mucho que ver, ¡así que vamos a ponernos manos a la obra!
Cómo acceder a las herramientas de programador de PayPal para obtener tus API
El paso 1 para integrar PayPal en tus páginas de producto HTML/CSS/JS es crear una cuenta PayPal. Este paso es crucial, ya que te dará acceso a las herramientas de programador de PayPal y a las API, que son necesarias para integrar PayPal en tus páginas de producto.
Si ya tienes una, accede directamente a las herramientas para desarrolladores de PayPal.
Para crear una cuenta PayPal, tendrás que visitar el sitio web de PayPal y seguir las instrucciones en pantalla para registrarte. Se te pedirá que proporciones algunos datos personales y financieros, como tu nombre, dirección de correo electrónico y los datos de tu tarjeta de crédito.
Una vez completado el proceso de registro, podrás iniciar sesión en tu cuenta PayPal y acceder a las herramientas para programadores y a las API necesarias para la integración. Es importante que utilices una dirección de correo electrónico válida, ya que recibirás información importante y actualizaciones de PayPal.
A continuación, encontrarás las herramientas para integradores en la parte superior derecha de tu panel de PayPal.
Cómo Configurar un Entorno Sandbox de PayPal
El siguiente paso es crear un entorno Sandbox de PayPal.
¿Qué es eso?
Un entorno Sandbox es un entorno de pruebas que imita el entorno real de PayPal. Te permite probar tu integración antes de ponerla en marcha, lo que es una gran característica de PayPal para asegurarse de que todo funciona como se espera.
Para configurar un entorno de pruebas de PayPal, deberás iniciar sesión en tu cuenta PayPal y navegar hasta el panel del desarrollador. Desde allí, puedes crear una nueva cuenta de entorno sandbox siguiendo las instrucciones que aparecen en pantalla.
Una vez creada la cuenta, podrás utilizarla para probar la integración realizando pagos de prueba. También será necesario para colocar el sandbox client ID en el código JS.
Es importante probar la integración a fondo y asegurarte de que todo funciona como se espera antes de ponerla en marcha.
Cómo Crear y Personalizar el Botón de PayPal
Este paso consiste en crear el botón que se colocará en la página del producto y que permitirá a los clientes iniciar el proceso de pago.
Una forma de crear un botón de PayPal es utilizar la herramienta de creación de botones de PayPal, que proporciona una interfaz fácil de utilizar para personalizar el botón. Puedes elegir entre 3 estilos de pago diferentes (ver aquí), disponibles en el sitio Web de PayPal.
Ve a Botones de PayPal. Accederás a la interfaz de personalización de botones (Checkout). Ve a la sección “Add payment buttons” y, a continuación, haz clic en “Copiar código”.
Aquí tiene un ejemplo del código de un botón inteligente de PayPal. A continuación, debemos actualizar nuestros archivos anteriores para eliminar la entrada del formulario e insertar el siguiente código en su lugar. Lo veremos en el siguiente paso. Antes de eso, este es el fragmento de lo que se obtiene de los botones inteligentes de PayPal:
<!-- Replace "test" with your own sandbox Business account app client ID -->
<script src="https://www.paypal.com/sdk/js?client-id=test¤cy=USD"></script>
<!-- Set up a container element for the button -->
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
// Order is created on the server and the order id is returned
createOrder() {
return fetch("/my-server/create-paypal-order", {
method: "POST",
headers: {
"Content-Type": "application/json",
// use the "body" param to optionally pass additional order information
// like product skus and quantities
body: JSON.stringify({
cart: [
{
sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
quantity: "YOUR_PRODUCT_QUANTITY",
},
],
}),
})
.then((response) => response.json())
.then((order) => order.id);
},
// Finalize the transaction on the server after payer approval
onApprove(data) {
return fetch("/my-server/capture-paypal-order", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
orderID: data.orderID
})
})
.then((response) => response.json())
.then((orderData) => {
// Successful capture! For dev/demo purposes:
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
const transaction = orderData.purchase_units[0].payments.captures[0];
alert(`Transaction ${transaction.status}: ${transaction.id}\n\nSee console for all available details`);
// When ready to go live, remove the alert and show a success message within this page. For example:
// const element = document.getElementById('paypal-button-container');
// element.innerHTML = '<h3>Thank you for your payment!</h3>';
// Or go to another URL: window.location.href = 'thank_you.html';
});
}
}).render('#paypal-button-container');
</script>Ten en cuenta que tendrás diferentes campos para tus propias necesidades, así que personaliza tu propio botón y haz referencia al código para ello, no de este tutorial.
También hay diferentes ajustes de botón (sección Customize), así que siéntase libre de jugar un poco para encontrar algo que se adapte a tu estilo.
Ahora que estamos listos, vamos a integrar este código en nuestros archivos actuales.
Cómo Integrar tu Botón en tus Archivos Actuales
Con nuestro código de botón recién sacado de la caja, vamos a integrarlo en nuestros archivos actuales. Muy sencillo, sólo tenemos que sustituir los campos HTML que no vamos a utilizar, es decir, el formulario y sustituirlo por el botón que hemos creado.
Para mantener la coherencia con el estilo de programación que utilizamos para el ejemplo, voy a abstraer el JavaScript al archivo script.js. Eso debería darnos los siguientes archivos:
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>HTML Pack Libros</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="product-container">
<div class="product-image-container">
<img src="Mi_Pack_HTML.png" alt="Mi Pack HTML">
</div>
<div class="product-info-container">
<h1>Mi Pack HTML</h1>
<p class="price">$2.99</p>
<p class="product-description">
¿Estás listo para adentrarte en el fascinante mundo del desarrollo web y dominar el lenguaje HTML? Te presentamos nuestro exclusivo Pack de Libros HTML, una colección completa diseñada para llevar tus habilidades de programación al siguiente nivel. Este paquete único incluye una selección de libros cuidadosamente seleccionados, escritos por expertos en el campo del desarrollo web. Cada libro ha sido creado con el objetivo de proporcionarte conocimientos prácticos, ejemplos claros y guías detalladas que te ayudarán a comprender y dominar HTML.
</p>
<p>*Se aplican Términos y Condiciones</p>
<script src="https://www.paypal.com/sdk/js?client-id=AQUI=USD"></script>
<div id="paypal-button-container"></div>
<script src="script.js"></script>
</div>
</div>
</body>
</html>Nota
style.css
* {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.product-container {
text-align: justify;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
display: flex;
flex-wrap: wrap;
}
.product-image-container {
padding-top: 50px;
width: 40%;
}
.product-info-container {
width: 60%;
padding-left: 20px;
}
img {
width: 100%;
height: auto;
}
form {
display: flex;
flex-wrap: wrap;
}
label, input[type="text"] {
width: 100%;
padding: 12px;
margin-top: 8px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
}
label {
width: 30%;
padding-right: 10px;
}
input[type="text"] {
width: 70%;
}
input[type="button"] {
background-color: #ff5722;
color: #fff;
padding: 12px 24px;
border: none;
cursor: pointer;
margin-top: 20px;
width: 100%;
}
input[type="text"][name="card-number"], input[type="text"][name="expiry-date"], input[type="text"][name="cvv"] {
width: 30%;
}
h1 {
margin-top: 0;
}
.price {
color: #ff5722;
font-size: 1.5em;
font-weight: bold;
}script.js
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"amount":{"currency_code": "USD", "value": 2.99}}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
// Full available details
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
// Show a success message within this page, for example:
const element = document.getElementById('paypal-button-container');
element.innerHTML = '';
element.innerHTML = '<h3>¡Gracias por tu pago!</h3>';
// O ir a otra URL: actions.redirect('thank_you.html');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');Estos archivos nos darán la siguiente página de aterrizaje de producto:
Cómo Probar la Integración Utilizando el Entorno de Pruebas de PayPal
Antes de poner en marcha la integración de PayPal en tu página de producto, es importante probar la integración para asegurarte de que funciona correctamente e identificar cualquier problema.
Una forma de hacerlo es utilizar el entorno de pruebas de PayPal del que hemos hablado antes.
Para utilizar el entorno de pruebas de PayPal con la cuenta que creaste anteriormente, se te proporcionará un conjunto de cuentas de prueba del entorno de pruebas (comprador y vendedor) que puedes utilizar para probar tu integración.
Una vez configuradas estas cuentas Sandbox, deberás asegurarte de que el código del botón de PayPal de la página de tu producto apunta al entorno Sandbox.
Para ello, comprueba que la URL del código del botón de PayPal te redirige a “https://www.sandbox.paypal.com” en lugar de a “https://www.paypal.com“.
Una vez que el código del botón de PayPal funcione, puedes probar la integración visitando la página del producto y pulsando el botón de PayPal. Accederás a la página de pago del entorno de pruebas de PayPal, donde podrás introducir las credenciales de tu cuenta de prueba del entorno de pruebas y simular una compra.
Una vez que hayas completado una transacción de prueba, puedes iniciar sesión en tu cuenta del Sandbox para ver los detalles de la transacción y confirmar que se ha procesado correctamente.
Cómo Empezar a Aceptar Pagos Reales
Después de probar con éxito tu integración de PayPal en el entorno de pruebas, ya estás listo para empezar a aceptar pagos reales en tu página de producto.
La puesta en marcha implica unos sencillos pasos para asegurarte de que la integración está configurada correctamente y lista para procesar pagos reales.
El primer paso es actualizar el código del botón de PayPal en la página del producto para que apunte al entorno live de PayPal. Al contrario que antes, asegúrate de que la URL del código del botón de PayPal te redirige a “https://www.paypal.com” en lugar de a “https://www.sandbox.paypal.com”.
A continuación, tendrás que actualizar la configuración de tu cuenta PayPal para asegurarte de que está configurada para procesar pagos en directo. Esto normalmente implica confirmar tu dirección de correo electrónico y número de teléfono, así como añadir una forma de pago válida, como una tarjeta bancaria.
También es importante que te asegures de que tu página de producto es totalmente funcional y de que toda la información necesaria, como los detalles del producto, los precios y los gastos de envío, es correcta.
Por último, debes notificar a tus clientes que ahora aceptas pagos a través de PayPal y proporcionarles instrucciones claras sobre cómo completar una compra.
Una vez completados todos estos pasos, ya puedes empezar a aceptar pagos reales a través de PayPal en tu página de producto.
¿Qué hacer a partir de ahora?
Ahora que ya sabes cómo integrar PayPal en tu sitio web, ¿por qué te resultaría útil? ¿No hay formas más sencillas de integrar pagos en tu sitio Web? Permítame que te ponga en contexto.
Personalmente, pensaba que las herramientas sin código se estaban convirtiendo en la norma en los últimos tiempos, pensando que probablemente no necesitaría codificar ninguna página web en HTML, CSS y JavaScript. Pero con la nueva ola de startups en línea, como las herramientas de IA y el software de análisis de datos, que giran en torno a la realización de solicitudes de API desde una sencilla interfaz de usuario, creo que los 3 grandes lenguajes podrían hacer un poco de una reaparición.
Como quería montar mi propia empresa (digamos la historia anterior no era del todo ficticia…), hubo que volver a los viejos lenguajes de desarrollo web para hacer el trabajo. Así que yo no me olvidaría de aprender a integrar funciones como ésta en páginas HTML, CSS y JavaScript estándar.
A veces, cuando se trata de crear una simple página de producto o servicio que haga el trabajo, es posible que desees confiar en las viejas formas con nuevas integraciones como solución.
Recapitulación y Conclusión
Déjame que te haga un rápido resumen:
Si lo que buscas es poner en marcha una empresa SaaS sencilla, entonces HTML, CSS y JavaScript pueden ser tus mejores amigos. A la hora de integrar PayPal en tus páginas de producto, es importante recordar algunos puntos clave para garantizar una integración fluida y satisfactoria.
- En primer lugar, es esencial disponer de una cuenta PayPal y estar familiarizado con la documentación para integradores de PayPal.
- En segundo lugar, asegúrate de que tus archivos HTML y CSS están bien estructurados y diseñados para coincidir con tu página de producto.
- Por último, utiliza el entorno Sandbox de PayPal para realizar pruebas y asegurarte de que todo funciona correctamente antes de iniciar los pagos reales.
Como recordatorio, es importante tener en cuenta que cobrar pagos a través de un formulario en su sitio web no es una forma segura de aceptar pagos, y se recomienda utilizar una pasarela de pago como PayPal para garantizar la seguridad de la información confidencial de tus clientes.
Teniendo en cuenta estos puntos, ya puedes configurar con confianza PayPal en tus páginas de producto y empezar a aceptar pagos de forma segura y sencilla. Espero que te haya gustado este tutorial.
