En el pasado, los sitios web estáticos solían incluir imágenes y descripciones de los productos, incitando a los clientes a hacer pedidos por correo electrónico o teléfono. Hoy, sin embargo, los clientes esperan una experiencia más dinámica con sólidas funcionalidades de comercio electrónico. Esto agiliza el proceso de compra, animando a los usuarios a completar las transacciones en tu sitio en lugar de explorar las opciones de la competencia.

Añadir una pasarela de pago y el proceso de pago en tu sitio estático es bastante sencillo. Las interfaces de programación de aplicaciones (API) y las arquitecturas sin servidor (serverless) te permiten integrar funciones de comercio electrónico en sitios web estáticos, permitiendo a tu empresa aceptar transacciones directamente.

Este tutorial explora cómo añadir las pasarelas de pago PayPal y Stripe al sitio estático de una tienda de envío de flores. Sigue los pasos para aprender a añadir estas funciones a tu sitio web y obtener nuevas oportunidades para impulsar las ventas online.

Cómo empezar

Antes de sumergirte en los pasos para integrar una pasarela de pago y un proceso de pago en tu sitio estático, vamos a sentar las bases para una implementación fluida y satisfactoria.

  1. Descarga y despliega este código de ejemplo de sitio estático en el alojamiento de sitios estáticos de Kinsta.
  2. Regístrate para obtener una cuenta de PayPal, optando por una cuenta de empresa, ya que es más adecuada para este tutorial. Este tipo de cuenta es necesaria para probar los botones que integres. Tras registrarte, añade la información de tu empresa y vincula una cuenta bancaria. Una vez verificada tu cuenta, podrás obtener las credenciales de la API en el portal del Programador de PayPal para su uso posterior.
  3. Crea una cuenta de Stripe, introduciendo tus datos empresariales y bancarios. Stripe ofrece una activación rápida de la cuenta, lo que resulta ventajoso para este proyecto. Una vez que tu cuenta esté activa, podrás acceder inmediatamente al panel de Stripe. Aquí es donde recuperas tu clave API, un componente crucial necesario en los pasos posteriores.

Revisa el sitio estático de muestra

Este tutorial utiliza un sitio estático preexistente para mostrar la integración de las funciones de pago de PayPal y Stripe. A pesar de su contenido estático, el sitio web de muestra imita una floristería online.

La infraestructura de alojamiento de sitios estáticos de Kinsta proporciona un entorno eficaz para implementar y probar las funciones de pago de PayPal y Stripe para crear un sitio Web estático más sofisticado y atractivo.

Después de desplegar tu sitio en Kinsta, ve a la página de inicio. Haz clic en el botón ORDER INQUIRY (CONSULTAR PEDIDO).

Una página web de una floristería con una imagen de un ramo, un botón de solicitud de pedido y enlaces a páginas y al carrito de la compra
Ejemplo de página de inicio de un sitio con un botón de CONSULTA DE PEDIDO.

Selecciona un producto disponible en la página del Catálogo de Flores — la Rosa Turca.

El catálogo de flores, con varios ramos, sus tamaños y precios, cada uno con un icono de carrito de la compra para añadirlo al carrito
Ejemplo de página del catálogo del sitio con varias opciones de flores.

Esta acción te lleva a la página de detalles del producto, donde están implementados los botones de pago para PayPal y Stripe.

Opciones para pedir la Rosa Turca. Hay opciones de tamaño y color, elección de entrega por mensajero o recogida, y el precio
Página de productos del sitio de muestra.

Cómo integrar el proceso de pago de PayPal en tu sitio estático

Añadir un proceso de pago PayPal ofrece a tus clientes una forma de pago segura y de confianza y agiliza el proceso de transacción, mejorando la experiencia del usuario. Esta integración puede aumentar significativamente la funcionalidad de tu sitio y la satisfacción del cliente.

A continuación te explicamos cómo integrar el pago con PayPal en tu sitio estático:

  1. Inicia sesión en el Panel de Control del Programador de PayPal.
  2. En el panel, ve a la sección Aplicaciones y credenciales. Activa el modo Sandbox y haz clic en Crear Aplicación.
  3. En el formulario, da un nombre a tu aplicación (por ejemplo, Kinsta Gateway Demo). Selecciona Vendedor como tipo y haz clic en Crear Aplicación.

    El formulario Crear App en PayPal con un campo para el nombre de la app, botones de opción para elegir el tipo como vendedor o plataforma, un campo para la cuenta sandbox
    Formulario Crear Aplicación de PayPal.

  4. Copia el ID de Cliente de la sección de credenciales de API para crear más tarde un botón de pago de PayPal.

    Credenciales en PayPal para la app de demostración Kinsta Gateway. La sección de credenciales de la API tiene el nombre de la aplicación, el ID de cliente y la clave secreta. La información de la cuenta sandbox contiene la URL, la región, el correo electrónico y la contraseña.
    Credenciales de la aplicación de PayPal.

  5. Desplázate por la página de la aplicación para revisar otros ajustes. Los valores predeterminados están bien para este tutorial. Haz clic en Guardar Cambios.

    Las características de la app de PayPal con casillas de verificación incluyen Aceptar pagos para Vault, SDK de Pago Nativo, Suscripciones, Facturación y PayPal Here. Las opciones de casillas de verificación bajo Otras características incluyen Pagos, Disputas de clientes, Iniciar sesión con PayPal y Búsqueda de transacciones.
    Funciones de la aplicación de PayPal.

  6. A continuación, integra el proceso de pago de PayPal en tu sitio estático. Crea un botón de pago utilizando el SDK JavaScript de métodos de pago alternativos (APM) de PayPal. Te permite integrar varias formas de pago en un sitio estático sin necesidad de configurar una aplicación back-end. Añade el siguiente código JavaScript al archivo product.html justo antes de la etiqueta de cierre </body>. Sustituye YOUR_CLIENT_ID por tu Id. de cliente de PayPal. Es posible que también tengas que sustituir la divisa USD por la divisa que acepte tu cuenta PayPal. 
    <!-- PAYPAL BUTTON SCRIPT-->
<script   
src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID¤cy=USD"   
data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
	createOrder: function(data, actions) {
	// Set up the transaction
	return actions.order.create({
		purchase_units: [{
		amount: {
			value: '1.00'
		}
		}]
	});
	},
	onApprove: function(data, actions) {
	// Capture the funds from the transaction
	return actions.order.capture().then(function(details) {
		// Show a success message to the buyer
		alert('Transaction completed by ' + details.payer.name.given_name);
	});
	}
}).render('#paypal-button-container');
</script>
<!-- PAYPAL BUTTON SCRIPT-->

    La función paypal.Buttons define dos funciones:

    • createOrder — Configura los detalles de la transacción, como el importe de la compra (1,00 USD en este caso).
    • onApprove — Gestiona la aprobación de la transacción, capturando los fondos y mostrando un mensaje de éxito al comprador. En el código anterior, estamos utilizando la función alert().

    Por último, la función render especifica que el botón de PayPal debe mostrarse dentro del <div> existente con el ID paypal-button-container.

    Ahora tienes PayPal integrado en tu sitio estático.

Cómo integrar el proceso de pago de Stripe en tu sitio estático

Stripe es una plataforma tecnológica muy utilizada que ofrece soluciones de procesamiento de pagos para empresas de todos los tamaños. A continuación te explicamos cómo añadir el pago con Stripe a tu sitio estático:

  1. Antes de implementar el botón de pago de Stripe, puedes gestionar los productos y precios a través de una API o del panel de control de Stripe. Para utilizar el panel de control, ábrelo, selecciona el Modo Prueba y haz clic en Catálogo de Productos.

    Página del catálogo de productos con opciones para listar todos los productos, los disponibles o los archivados, y un botón para añadir un producto.
    Página Catálogo de productos de Stripe.

  2. Haz clic en el botón + Añadir Producto para abrir el formulario Añadir un producto.

    Añade una opción de producto con campos para el nombre y la descripción, detalles de la imagen con la opción de eliminarla, un enlace para más opciones, botones para elegir recurrente o único, un campo para el importe y un cuadro desplegable para la divisa, y un enlace para opciones avanzadas de precios
    Página Añadir un producto de Stripe.

  3. Introduce los detalles de tu producto en los campos siguientes:
    • Nombre: Rosa Turca
    • Descripción: Se trata de una hermosa Rosa Turca
    • Imagen: (Sube el archivo imagesturkishrose.png de muestra)
    • Modelo de pago: Pago único
    • Importe: 1.00 $
    • Divisa: USD (o la moneda que elijas)
  4. Haz clic en Añadir producto.
  5. En la lista de la página Catálogo de productos, selecciona el producto Rosa Turca.

    Listados del catálogo de productos que incluyen la Rosa Turca, su imagen en miniatura, el precio, la moneda, la fecha de creación y la fecha de actualización
    Stripe Detalles del catálogo de productos.

  6. En la sección Precios de los productos, haz clic en Crear enlace de pago. Revisa las opciones del producto y asegúrate de que la cantidad es 1.

    Detalles del producto Rosa Turca, incluido el precio, la moneda, la fecha de actualización, el nombre, la descripción y la imagen, y las opciones de precio, incluido el ID de la aplicación y un botón para crear un enlace de pago
    Detalles del producto Stripe para la Rosa Turca.

  7. Haz clic en Crear enlace.

    Opciones para crear un enlace de pago. Incluye el producto, un campo para la cantidad y una casilla de verificación para permitir que los clientes ajusten la cantidad, un enlace para añadir otro producto, opciones para recopilar direcciones, números de teléfono y campos personalizados de los clientes, un menú para opciones avanzadas y una vista previa del aspecto que tendrá la página de pago para ese producto, incluidos los detalles de Apple Pay
    Detalles de pago del producto de Stripe.

  8. En la página ENLACE DE PAGO, haz clic en el botón Comprar.

    Detalles del enlace de pago, incluidos el nombre y el precio del producto y la opción de copiar el enlace de pago, el código QR, el botón de compra y otros
    Detalles de la página ENLACE DE PAGO de Stripe.

  9. Cuando aparezca el panel del botón Comprar, podrás ver el código generado para el botón de pago. Elige el Diseño del botón, activa Cambiar texto del botón y escribe «Comprar con Stripe» en el campo Cambiar texto del botón. A continuación, haz clic en Guardar cambios y copiar código para copiar el código generado en el portapapeles de tu sistema operativo.

    Opciones del botón de compra con el código visible a la izquierda, y una vista previa a la derecha. Las opciones incluyen configurarlo como tarjeta o botón, el idioma, un conmutador para cambiar el texto del botón y un campo para escribir el texto
    Formulario de Stripe para crear un botón de compra.

  10. Pega el código copiado en el archivo product.html del código de ejemplo antes de la etiqueta de cierre </body> (entre los comentarios STRIPE BUTTON BEGIN y STRIPE BUTTON END ), de forma similar a PayPal. 
    <!-- STRIPE BUTTON BEGIN -->
<script> async
  src="https://js.stripe.com/v3/buy-button.js">
</script>

<stripe-buy-button>
  buy-button-id="BUY_BUTTON_ID"
  publishable-key="PUBLISHABLE_KEY"
>
</stripe-buy-button>
<!-- STRIPE BUTTON END -->

Cuando hayas terminado de implementar los botones de pago de PayPal y Stripe, despliega el código del sitio estático en tu entorno de alojamiento de sitios estáticos de Kinsta.

Prueba el proceso de pago

Abre la página de detalles del producto del sitio estático de demostración. Asegúrate de que los botones de PayPal y Stripe se muestran correctamente.

La página de pago del sitio de muestra muestra la imagen, el nombre, el precio y las opciones de tamaño, color y entrega; el usuario puede hacer clic en PayPal, Tarjeta de débito o crédito con PayPal o Comprar con Stripe.
Página de producto del sitio de muestra con botones de pago para PayPal y Stripe.

Haz clic en el botón de pago de PayPal. Se abrirá un cuadro de diálogo de inicio de sesión en el que tu cliente se autenticará con PayPal para realizar la compra.

Opciones para iniciar sesión en PayPal o crear una cuenta
Flujo de PayPal con opciones para identificarse o registrarse.

Si encuentras problemas de inicio de sesión en esta fase, puede deberse a que estás probando con una cuenta personal en lugar de una cuenta de empresa.

Alternativamente, los clientes pueden elegir el botón Tarjeta de Débito o Crédito de PayPal. Haz clic en esa opción para ver el cuadro de diálogo. Introduce algunos datos de la cuenta.

Opciones para pagar con tarjeta de débito o crédito, incluyendo un menú de país o región, un campo para el correo electrónico, un menú de tipo de teléfono y un campo para el número, botones de opción para elegir débito o crédito y un campo para el número de tarjeta
Flujo de PayPal con opciones para utilizar una tarjeta de débito o de crédito.

PayPal debería presentar los datos de tu pedido y de tu cuenta. Haz clic en Completar Compra.

Detalles de pago con coste, dirección de envío y un enlace para cambiarla, lista de tarjetas de débito o crédito a elegir, una casilla de verificación para que sea el método preferido, un enlace para añadir una tarjeta y un botón para completar la compra.
Flujo de PayPal con la confirmación de la compra.

Cuando PayPal aprueba la transacción, el código JavaScript del cliente muestra una alerta informándote de que la transacción se ha completado. Esta alerta es para fines de desarrollo y depuración — no debes utilizarla en código de producción.

Una ventana emergente notifica al usuario que la transacción se ha completado
Flujo de PayPal con una alerta de transacción completada.

Para verificar esa transacción, abre el panel de PayPal para Empresas. Haz clic en Actividad > Todas las Transacciones para mostrar una lista detallada de todas las transacciones recientes.

Detalles de las transacciones en PayPal, incluyendo la fecha, el tipo, el nombre, el pago, el importe bruto, la tarifa, el importe neto y un menú para acciones como añadir seguimiento
Detalles de la transacción de PayPal para empresas.

En la página product.html del sitio de flores, también puedes probar el flujo de pago de Stripe pulsando el botón Comprar con Stripe. Esta acción activa el cuadro de diálogo de Stripe que contiene los detalles del producto y las opciones de pago, incluidos Google Pay, Link y los pagos con tarjeta de crédito.

Stripe muestra la información del producto y las opciones para Google Pay y Pago con enlace
Opciones de pago del flujo de Stripe.

A modo de demostración, elige Google Pay. Un cuadro de diálogo te pide que confirmes la compra utilizando Google Pay con una tarjeta de tu lista, como una Mastercard guardada.

Detalles del pago con Google Pay, incluido un menú desplegable para elegir la tarjeta, el precio y un botón de pago
Flujo de Stripe cuando se utiliza Google Pay.

Haz clic en PAGAR. Si tiene éxito, Stripe presenta al cliente la confirmación de la compra.

Confirmación de compra de Stripe. A la izquierda está la información del producto. A la derecha está la confirmación
Confirmación de compra de Stripe.

En el Panel de Stripe, abre la pestaña Pagos. Muestra los detalles de la transacción completada, incluyendo el importe, la moneda, la descripción, el cliente y la fecha.

Lista de pagos a través de stripe, incluyendo el importe, la moneda, el éxito, la descripción, el cliente y la fecha
Página de detalles de pago de Stripe.

Cómo solucionar problemas en el proceso de pago

A continuación se indican algunos pasos para diagnosticar y resolver los errores encontrados durante las pruebas de pago:

  • Corrige la configuración de la pasarela de pago.
  • Valida tu certificado SSL.
  • Comprueba la compatibilidad del navegador del cliente.
  • Aplica un tratamiento de errores adecuado.
  • Prueba el proceso de pago en varios entornos.
  • Utiliza técnicas de registro y monitorización.

Resumen

Ya has integrado botones de pago para las pasarelas de pago PayPal y Stripe en una floristería online de ejemplo alojada en Kinsta. Puedes utilizar las mismas técnicas para añadir opciones de pago a tus otros sitios web estáticos, animando a los clientes a comprar tus productos y aumentando las ventas.

El servicio de alojamiento de sitios estáticos de Kinsta ofrece un terreno de juego perfecto para los desarrolladores que quieran adentrarse en el dinámico mundo del comercio electrónico y la integración de pagos. Su sólida infraestructura garantiza una carga rápida de las páginas, lo que favorece una experiencia de compra online sin problemas.

Junto con el servicio de alojamiento de sitios estáticos, Kinsta también ofrece un servicio de alojamiento de Aplicaciones diseñado para aplicaciones más dinámicas — como aplicaciones web que necesitan procesamiento del lado del servidor, interacciones con bases de datos y otras funcionalidades complejas.

Transforma tu sitio estático en una experiencia dinámica con pasarelas de pago como PayPal y Stripe. ¿Qué otro servicio prefieres o con cuál tienes experiencia? Compártelo en los comentarios.

Jeremy Holcombe Kinsta

Editor de Contenidos y Marketing en Kinsta, Desarrollador Web de WordPress y Redactor de Contenidos. Aparte de todo lo relacionado con WordPress, me gusta la playa, el golf y el cine. También tengo problemas con la gente alta ;).