Webflow es compatible con Stripe de forma nativa en su checkout de Ecommerce, pero esa no es la única manera de aceptar pagos. Si estás cobrando por un servicio, un producto digital o una venta puntual, existe un camino más rápido.
"Solo quiero aceptar pagos. ¿Tengo que configurar toda la tienda de Ecommerce?" La respuesta es no, y es una de las cosas más útiles que debes saber antes de empezar.
Stripe tiene dos formas de conectarse a un sitio de Webflow, y cuál usar depende de si necesitas un carrito de compras completo con páginas de producto o simplemente una forma sencilla de aceptar pagos desde un botón en una landing page.
Esta guía recorre ambos enfoques, incluyendo los requisitos previos, los pasos exactos y las soluciones para los errores más comunes que ocurren durante la configuración.
2 formas de añadir Stripe Checkout a Webflow y cuándo usar cada una
No existe un único botón de "Conectar Stripe" en Webflow que gestione todos los escenarios de pago. El enfoque correcto depende de si necesitas un carrito de compras completo, un enlace de pago compartible o un botón de pago integrable.
Los dos métodos son:
Para la mayoría de los creadores y proveedores de servicios, el Método 1 (Enlaces de pago) es la forma más rápida de tener un proceso de pago funcional. Te saltas el plan de Ecommerce por completo, te pones en marcha en menos de 20 minutos y sigues disfrutando de la experiencia de pago completa de Stripe: compatible con PCI, multidivisa y con Apple Pay y Google Pay activados por defecto.
El principal inconveniente es que los clientes salen de tu sitio para ir a la página de pago alojada en Stripe en lugar de completar la compra en tu web. El Método 2 utiliza el mismo sistema de pago alojado, pero te ofrece un botón con estilo y marca propia que aparece directamente en tu página en lugar de un simple enlace.
La contrapartida es que requiere pegar un código de inserción y las opciones de estilo del botón son más limitadas que las de un diseño totalmente personalizado.
La guía a continuación cubre ambos métodos en el orden en que la mayoría de la gente los necesita.
¿Qué necesitas para conectar Stripe a Webflow?
Dos cosas: una cuenta de Stripe verificada y un plan de sitio de Webflow de pago. Eso es todo. Sin plan de Ecommerce, sin código personalizado, sin plugins de terceros. Ambos métodos de esta guía funcionan con el plan Basic de Webflow (14 $/mes) en adelante.
Antes de probar cualquiera de los métodos, verifica estos dos requisitos previos. Ambos son obstáculos comunes y ninguno lleva más de unos minutos resolver.
Una cuenta de Stripe totalmente verificada
Una cuenta de Stripe configurada parcialmente procesa pagos de prueba, pero falla silenciosamente con los reales. Stripe requiere verificación de identidad, información comercial y una cuenta bancaria vinculada antes de que se puedan realizar cargos reales.
Para verificar el estado de tu cuenta: inicia sesión en tu Panel de control de Stripe, haz clic en el icono de la campana en la parte superior derecha y comprueba si hay requisitos pendientes. Si ves avisos como "Añadir detalles de la empresa" o "Proporcionar cuenta bancaria para pagos", complétalos antes de hacer pruebas con una tarjeta real.
La integración de Webflow en sí se conecta sin problemas. Pero la primera compra real fallará si Stripe no ha aprobado tu cuenta.
Para trabajos con clientes, utiliza una cuenta de Google y una cuenta de Stripe que el cliente controle a largo plazo. Las claves de Stripe están vinculadas a la cuenta que las generó, y cambiarlas más tarde significa actualizar tanto el panel de control de Stripe como los ajustes de Webflow simultáneamente.
El plan de Webflow adecuado para tu caso de uso
Si utilizas el Método 1 (Enlaces de pago) o el Método 2 (Botón de compra), cualquier plan de sitio de Webflow de pago funciona: desde el plan Basic en adelante. No necesitas un plan de Ecommerce.
El plan Plus (74 $/mes, facturado anualmente) elimina la comisión por transacción de Webflow y aumenta tu límite de productos a 5.000 artículos. Para tiendas que realizan más de unos 2.250 $/mes en ventas, actualizar a Plus se paga solo con el ahorro en comisiones.
Método n.º 1: Uso de enlaces de pago de Stripe (no requiere plan de Ecommerce)
Enlaces de pago es la propuesta sin código de Stripe: creas una página de pago alojada en el panel de control de Stripe, copias la URL y la pegas en cualquier botón o enlace de Webflow. Los clientes hacen clic en el botón, llegan a la página de pago segura de Stripe y completan el pago allí. Sin código personalizado, sin plan de Ecommerce y sin carrito que configurar.
La página de pago admite más de 40 métodos de pago (tarjetas, Apple Pay, Google Pay, métodos de pago locales) y más de 135 divisas, con precios adaptativos que muestran automáticamente la moneda local a los clientes en más de 150 países.
Para empresas de servicios, agencias, consultores y cualquiera que venda un SKU definido sin necesidad de un carrito en el sitio, este es el camino más rápido de cero a pagos en vivo.
Paso n.º 1: Crea un producto y un enlace de pago en Stripe
Inicia sesión en tu Stripe Dashboard y ve a Pagos → Enlaces de pago en la barra lateral izquierda (o entra directamente en dashboard.stripe.com/payment-links).
Haz clic en + Crear enlace de pago de prueba.
En la pestaña Página de pago, haz clic en + Añadir un producto nuevo para definir qué estás vendiendo.
Introduce el nombre del producto, el precio y el tipo de pago:
- Pago único: Un importe fijo que se cobra una sola vez: consultas, descargas digitales, entradas para eventos.
- Pago recurrente: Una suscripción que se cobra en un intervalo determinado: cuotas mensuales, membresías, planes SaaS.
Tras definir tu producto, puedes redirigir a los clientes a una URL de tu sitio Webflow (recomendado para mantener la coherencia de la experiencia) o mostrar la página de confirmación predeterminada de Stripe.
Haz clic en Crear enlace. Stripe generará una URL con el formato .buy.stripe.com/xxxxx
Para enviar a los clientes a una página de confirmación en tu sitio Webflow después del pago, haz clic en Después del pago en el creador de enlaces de pago e introduce tu URL de Webflow. Si no lo haces, Stripe mostrará su pantalla de confirmación predeterminada.
Antes de publicar, vuelve al Stripe Dashboard y cambia del modo de prueba al modo real (interruptor en la parte superior derecha). Vuelve a crear el enlace de pago en modo real; los enlaces de prueba y los reales son distintos. Tu enlace real tendrá una URL diferente que empieza por .buy.stripe.com
Paso 2: Añade tu marca a la página de pago de Stripe
Antes de pegar el enlace en Webflow, dedica dos minutos a la imagen de marca de tu página de pago de Stripe. Ve a Ajustes en tu Stripe Dashboard (icono de engranaje en la parte superior derecha), desplázate hasta la sección Ajustes de empresa y haz clic en Marca.
Sube tu logotipo, elige el color de tu marca y configura el nombre de tu empresa. Estos elementos aparecerán en la página de pago alojada que verán tus clientes.
Esto es más importante de lo que parece. Una página de pago sin logotipo y con un encabezado genérico de Stripe rompe visualmente la conexión con tu sitio Webflow, lo que aumenta el abandono. Los clientes que no esperan salir de tu sitio necesitan una confirmación visual inmediata de que siguen ahí.
Paso 3: Pega el enlace en un botón de Webflow
En tu proyecto de Webflow, selecciona el botón o elemento de enlace que debe activar el proceso de pago.
En el panel de Ajustes de ese elemento, pega la URL de tu enlace de pago de Stripe en el campo URL. Configura el enlace para que se abra en una pestaña nueva si quieres que los clientes vuelvan a tu página de Webflow tras el pago; selecciona la pestaña actual si vas a redirigirlos a una página de confirmación en Webflow después.
Publica tu sitio y prueba el flujo desde un dispositivo real. El enlace de pago es una URL activa en cuanto Stripe lo crea.
Método 2: Botón de compra de Stripe (pago integrado en la página)
El botón de compra de Stripe integra un botón de compra personalizado con tu marca directamente en una página de Webflow mediante un código incrustado. Al igual que con los enlaces de pago, al hacer clic en el botón, los clientes son redirigidos a la página de pago alojada por Stripe para completar la transacción.
La diferencia con el Método 1 es que el botón en sí es un componente renderizado por Stripe; su apariencia se configura en el panel de control de Stripe (colores, forma, fuente y etiqueta), no en el Diseñador de Webflow. Esto mantiene el botón visualmente coherente con la página de pago alojada, pero significa que no puedes darle estilo desde Webflow.
Paso 1: Generar el botón de compra en Stripe
En tu panel de control de Stripe, ve a Pagos → Enlaces de pago. Selecciona un enlace de pago existente (o crea uno siguiendo el Método 1) y luego haz clic en el botón de compra desde la página de detalles del enlace.
El generador de botones de compra de Stripe te permite elegir entre un botón sencillo o un diseño de widget de tarjeta, además de personalizar los colores de marca, las formas, las fuentes y la etiqueta de llamada a la acción.
Una vez configurado, haz clic en Copiar código. El fragmento se ve así:
<script async
src="https://js.stripe.com/v3/buy-button.js">
</script>
<stripe-buy-button
buy-button-id="buy_btn_XXXXXXXXXXXXXXXX"
publishable-key="pk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
>
</stripe-buy-button>Dos notas importantes: los valores buy-button-id y publishable-key en este fragmento son específicos de tu cuenta y producto. Copia el código generado directamente desde Stripe.
Paso 2: Insertar el código en Webflow
En tu Diseñador de Webflow, añade un elemento de inserción (Embed) (que se encuentra en el panel de Elementos, bajo Componentes) a la página donde quieras que aparezca el botón. Pega el código del botón de compra en el campo de código del elemento de inserción. Haz clic en Guardar y cerrar.
La inserción no se mostrará dentro de la vista previa del Diseñador; verás un marcador de posición gris. Publica tu sitio y visita la página en vivo para confirmar que el botón de compra se renderiza y redirige correctamente a la página de pago alojada de Stripe.
¿Por qué falla el pago de Stripe en Webflow?
La mayoría de los fallos de pago de Stripe en Webflow se deben a una de estas dos causas principales: una cuenta de Stripe incompleta que funciona en modo de prueba pero bloquea los pagos reales, o una falta de coincidencia entre el plan y la configuración en Webflow Ecommerce.
Aquí tienes las causas y las soluciones que suelen resolverlo.
Verificación incompleta de la cuenta de Stripe
Esta es la causa más común, especialmente en cuentas nuevas. Stripe requiere verificar la identidad, la información comercial y una cuenta bancaria vinculada antes de procesar pagos reales. Una compra en modo de prueba tiene éxito porque este modo omite la verificación, pero los pagos reales fallan sin previo aviso.
Solución: En tu panel de control de Stripe, haz clic en el icono de campana de notificaciones y resuelve cualquier elemento que aparezca como requisito pendiente. Busca avisos para verificar tu identidad, añadir un número de identificación fiscal o confirmar los detalles de tu empresa.
Una vez que Stripe confirme que tu cuenta está totalmente activada, realiza otra prueba real.
Aparece "Conectar Stripe", pero el pago sigue sin estar activo
Conectar Stripe en la configuración de pagos es un requisito previo, no la activación completa. Para Webflow Ecommerce, también necesitas añadir un plan de sitio de Ecommerce y habilitar el pago desde la configuración de Ecommerce. La conexión con Stripe sin un plan activo significa que la página de pago existe visualmente, pero no está operativa.
Solución: Confirma que tu proyecto tiene un plan de sitio de Ecommerce activo (compruébalo en la configuración del sitio en el panel de control de Webflow). Luego, en el Diseñador, ve al panel de Configuración → Ecommerce → Pago y confirma que el pago esté habilitado. Ambas condiciones deben cumplirse para que el pago en vivo funcione.
Explora la integración completa de Stripe con Webflow
Stripe es solo una pieza. El ecosistema completo de pagos de Webflow también incluye PayPal, Apple Pay y herramientas de gestión de tiendas que se conectan directamente al Diseñador.
Explora la integración de Webflow con Stripe para conocer toda la gama de opciones, incluida la aplicación de Stripe (creada por Flowout), que te permite gestionar productos y enlaces de pago de Stripe directamente en el editor visual de Webflow sin tener que cambiar de panel.
Explora Webflow + Amazon Pay si buscas la experiencia de pago con un solo clic de Amazon junto con tus flujos actuales de Stripe o PayPal.
Consulta las integraciones de procesamiento de pagos de Webflow para ver todas las opciones disponibles, incluidos procesadores regionales como Mollie (EEE), Razorpay (India) y KOMOJU (Japón y Corea).
Preguntas frecuentes
¿Necesito un plan de Ecommerce de Webflow para aceptar pagos con Stripe?
No. Los enlaces de pago y el botón de compra de Stripe funcionan con cualquier plan de sitio de Webflow de pago: desde el plan Basic en adelante. El plan de Ecommerce de Webflow solo es necesario si quieres usar el sistema nativo de carrito y pago de Webflow, que incluye páginas de productos, carrito de compras, gestión de pedidos y correos electrónicos de confirmación integrados. Si cobras por un servicio, consultoría, producto digital o entrada para un evento, los enlaces de pago lo gestionan todo sin necesidad de un plan de Ecommerce.
¿Qué es la comisión por transacción del 2% en el plan Ecommerce Standard de Webflow?
Es una comisión de la plataforma Webflow que se aplica al plan Ecommerce Standard, además de la comisión de procesamiento de Stripe. La comisión estándar de Stripe en EE. UU. es del 2,9% + 30¢ por cada cargo con tarjeta exitoso. En el plan Standard, Webflow añade un 2% adicional. Esta comisión de Webflow desaparece en los planes Plus y Advanced.
¿Puedo aceptar pagos recurrentes (suscripciones) a través de Webflow?
Sí, mediante los enlaces de pago de Stripe. En el panel de Stripe, crea un enlace de pago con un precio recurrente (mensual, anual o con un intervalo personalizado) y pégalo en un botón de Webflow. Stripe gestiona automáticamente el ciclo de facturación, los reintentos de pago fallidos y las notificaciones al cliente. Los clientes pueden actualizar o cancelar su suscripción a través del portal de clientes de Stripe.
¿Funciona el pago de Stripe en el plan gratuito de Webflow?
No. Los enlaces de pago de Stripe funcionan técnicamente en cualquier página publicada de Webflow, incluidos los subdominios .webflow.io del plan gratuito. La limitación práctica es que el plan Starter gratuito te limita a 2 páginas y a un subdominio de Webflow (sin dominio personalizado), lo cual no es adecuado para un flujo de pago profesional. Cualquier plan de sitio de Webflow de pago (Basic en adelante) te ofrece un dominio personalizado y acceso total a la publicación.
