- Proyecto Next.js existente
- Acceso a Stripe Test Mode
No hace falta acceso al repositorio. Solo se necesita acceso al proyecto si quiere que Bacodo lo integre directamente.
Complemento Next.js
Integración de Stripe para Next.js
Agregue Stripe Checkout o Payment Element, PaymentIntents y webhooks firmados a su proyecto existente de Next.js App Router sin crear cableado de checkout, 3-D Secure y Route Handler desde cero.
- Código fuente completo incluido y tuyo permanentemente
- No se requiere clave de licencia complementaria ni licencia recurrente
- Listo para producción y probado
- Integrado en su proyecto y pila Next.js existente
- Incluye soporte técnico de 30 días después de la entrega
- Soporte técnico ampliado opcional de 6 meses al 20 % del precio del complemento
Desde
$145
USD · Next.js
Integración de Stripe para Next.js · Next.js
Código fuente completoSin clave de licenciaListo para producciónIntegración probadaSoporte de 30 días
Requirements
What Integración de Stripe para Next.js needs
Qué hace
Pago de Stripe dentro de su aplicación Next.js
Bacodo integra Stripe en el proyecto Next.js que ya tienes. Después de la entrega, la implementación permanece en su repositorio para que su equipo pueda leerla, cambiarla y ampliarla. Aún eres propietario de la cuenta Stripe, las claves API y las tarifas de Stripe.
problema que resuelve
El pago con tarjeta y billetera en Next.js necesita PaymentIntents, Checkout o Payment Element, 3-D Secure, claves secretas solo para el servidor y un controlador de ruta de webhook que verifique las firmas. Construir ese camino desde cero es lento y es fácil equivocarse.
Cómo aterriza en el proyecto
Agregamos Stripe.js en el cliente Next.js, controladores de ruta (o acciones del servidor) que crean intenciones de pago o sesiones de pago, verificación de webhook, páginas de éxito/cancelación y configuración del entorno de prueba/en vivo para App Router.
Por qué ahorra tiempo de desarrollo
Su equipo se salta la primera implementación de producción de Stripe Next.js: controladores de App Router, SCA, estados de error y una entrega que documenta cómo enviar claves en vivo.
para quien es
Desarrolladores, equipos técnicos, agencias y nuevas empresas que ya tienen una aplicación Next.js y desean una ruta de pago de producción que puedan mantener.
Funciones clave
Qué incluye Integración de Stripe para Next.js
Elemento de pago o pago de Stripe en Next.js
Utilice Stripe Checkout alojado o un elemento de pago integrado en su página de pago de Next.js. Los botones de entrada de tarjeta, 3-D Secure y de billetera permanecen en la ruta PCI de Stripe, no en un formulario de tarjeta personalizado que usted almacena.
Controladores de ruta Next.js para PaymentIntents
Cree sesiones de pago o intenciones de pago en los controladores de ruta Next.js. El navegador solo utiliza la clave publicable y el secreto del cliente; la clave secreta nunca se incluye en un componente del cliente.
Apple Pay y Google Pay en Next.js Checkout
Habilite los botones de billetera en Stripe Checkout o Payment Element cuando su cuenta y dominio de Stripe estén verificados. El respaldo de Next.js permanece en el pago con tarjeta.
Modo de prueba Next.js y luego claves Stripe en vivo
Envíe la aplicación Next.js con claves de prueba de Stripe, tarjetas de prueba y una transición documentada a claves activas. Las variables de entorno de Next.js permanecen fuera del paquete del cliente.
Controlador de ruta de webhook para el estado de pedido de Next.js
El éxito del pago en la interfaz de usuario de Next.js no es la fuente de la verdad. Un controlador de ruta verifica las firmas de Stripe y actualiza el estado del pedido o del derecho antes del cumplimiento.
Estados de éxito, cancelación y error de Next.js
Maneje tarjetas rechazadas, pagos cancelados, fallas de red y 3-D Secure incompleto para que la interfaz de usuario de Next.js no deje al cliente en una página muerta.
Casos de uso
Cuándo encaja Integración de Stripe para Next.js
Tienda Next.js existente o sitio de reservas
Ya realiza pedidos o reservas en Next.js y necesita realizar el pago con tarjeta sin tener que volver a escribir el catálogo ni el flujo de reservas.
Agencia que entrega el sitio de un cliente Next.js a producción
Necesita una ruta de Stripe que se pueda mantener en Next.js, una fuente en el repositorio del cliente y una transferencia de clave en vivo documentada en lugar de un prototipo único de Next.js.
Aplicación SaaS o membresía Next.js
La aplicación Next.js debe cobrar un primer pago o actualizar un método de pago mientras las suscripciones y facturas permanecen en su servidor y en Stripe Billing si ya las usa.
Pagos de servicios o mercado de Next.js más adelante
Comience con los cargos a los clientes en la aplicación Next.js. Los cargos de Stripe Connect o de destino se pueden establecer por separado si su modelo de mercado de Next.js los necesita.
Demo
Vista previa del flujo de pago de Next.js Stripe
Obtenga una vista previa de la ruta de pago de Next.js: carrito o acción de pago, pago o elemento de pago, confirmación y estados de error. Una zona de pruebas en vivo para su cuenta de Stripe está disponible después de la verificación de compatibilidad. Esta página no procesa cargos reales.
Cómo funciona
Cómo se entrega la integración de Stripe para Next.js
Flujo de trabajo del complemento estándar de Bacodo, con comprobaciones específicas de Next.js y Stripe para App Router, Route Handlers y su capa de datos existente.
01
Seleccione la franja Next.js
Confirme la integración de Stripe para Next.js y si el pago del primer día está alojado en el elemento de pago o pago.
02
Verificación de compatibilidad con Next.js
Revise la versión de Next.js, App Router vs Pages Router, la interfaz de usuario de pago existente, la base de datos y si ya tiene una cuenta de Stripe.
03
Integrar en Next.js
Agregue Stripe.js, páginas de pago, controladores de ruta para sesiones o PaymentIntents y un controlador de webhook firmado.
04
Configurar la aplicación Next.js
Conecte las claves de prueba de Next.js, el punto final del webhook y la configuración del servidor específica del entorno.
05
Pruebe la ruta de pago Next.js
Ejecute tarjetas de prueba de Stripe, 3-D Secure, cancele/rechace rutas y confirmación de webhook en la aplicación Next.js.
06
Entregar la fuente Next.js
Entregue la fuente Next.js, notas de configuración y una lista de verificación de claves en vivo. La implementación de Next.js es suya para mantenerla.
Arquitectura
Cómo se conecta Stripe a un proyecto Next.js
El navegador Next.js nunca se comunica con Stripe con una clave secreta. El elemento de pago o pago utiliza un secreto de cliente de un controlador de ruta. Stripe notifica a su webhook Next.js antes de cumplir.
Página siguiente.jsStripe.js / PagarControlador de rutaIntenciones de pago de rayasControlador de ruta de webhookEstado de la base de datos/orden
Tecnologías compatibles
Qué usa realmente Integración de Stripe para Next.js
Enrutador de aplicaciones Next.js
El Next.js estable actual con App Router es el predeterminado. Se puede establecer el alcance de Pages Router si eso es lo que ya utiliza su repositorio Next.js.
Stripe.js y SDK de nodo Stripe
Stripe.js oficial en el cliente Next.js y stripe en el servidor para sesiones, PaymentIntents y verificación de webhook.
Su capa de datos Next.js
Las actualizaciones de pedidos o derechos permanecen en la base de datos o API que ya utiliza su aplicación Next.js. No reemplazamos su backend con un servicio exclusivo de Bacodo.
Cuenta Stripe para la aplicación Next.js
Su cuenta de Stripe, claves de prueba y en vivo utilizadas por Next.js, punto final de webhook y eventos del Panel. Las tarifas de procesamiento de Stripe permanecen en Stripe.
Configuración de alojamiento Next.js requerida
Un host que puede ejecutar controladores de ruta Next.js y recibir webhooks de Stripe (por ejemplo, Vercel o un servidor Node). La exportación solo estática no es suficiente para esta ruta de pago.
Qué incluye
Qué incluye la integración de Stripe para Next.js
- Integración en el proyecto Next.js existente
- Código fuente completo en su repositorio
- Configuración del entorno y del controlador de ruta
- Pago o elemento de pago más cambios en el webhook necesarios para esta ruta de pago
- Flujos de pago probados de Next.js antes de la entrega
- Notas de traspaso para la transición de prueba a vida
- Soporte técnico de 30 días después de la entrega
No en el precio adicional
- Cuenta de Stripe, claves API y tarifas de procesamiento de Stripe: usted es el propietario de ellas
- Una nueva base de datos o CMS si no tienes un lugar para almacenar el estado del pedido
- Marketplace Connect, productos de facturación personalizados o reemplazo de compras dentro de la aplicación, a menos que se trate de un trabajo personalizado
Pricing
Integración de Stripe para precios de Next.js
Este precio es solo para la plataforma Next.js. No utiliza precios de complementos de Django o Flutter.
Integración de Stripe para Next.js
Agregue pagos Stripe listos para producción a una aplicación Next.js existente y conserve el código fuente.
Requisitos
- Proyecto Next.js existente
- Acceso a Stripe Test Mode
$145
pago únicoNext.js
¿Necesita un backend?
- Código fuente completo
- Sin cuota de licencia
- 30 días de soporte
- Integración completa
Pago seguro constripe
Entrega y seguridad
Prácticas de seguridad y entrega de Next.js
Entrega estimada de Next.js
La integración típica del proceso de pago de Next.js Stripe tiene su alcance después de la verificación de compatibilidad de Next.js. La línea de tiempo depende de su capa de datos y de la interfaz de usuario de pago de Next.js actual.
Probado en Next.js antes de la entrega
Las tarjetas en modo de prueba, 3-D Secure, las rutas de cancelación y rechazo se ejecutan en la aplicación Next.js antes de realizar la entrega.
Los secretos de Stripe permanecen fuera de los componentes del cliente Next.js
Las claves secretas de Stripe y los secretos de firma de webhooks permanecen en el entorno del servidor. El navegador Next.js solo recibe una clave publicable y secretos de cliente de corta duración.
Verificación de webhook para pedidos de Next.js
El controlador de ruta del webhook Next.js verifica las firmas de Stripe antes de actualizar el pedido o el estado de los derechos.
No hay afirmaciones de seguridad de Next.js no verificables
No reclamamos certificación PCI, cero fraude ni tasas de aprobación garantizadas. Los datos de la tarjeta Next.js se recopilan a través de Stripe Checkout o Payment Element, no de un formulario de tarjeta personalizado que almacenamos.
FAQ
Preguntas frecuentes
¿Qué incluye la integración de Stripe para Next.js?
La integración de Stripe para Next.js incluye Stripe.js, Checkout o elemento de pago en su página de pago de Next.js existente, creación de PaymentIntent o sesión de pago en Route Handlers, un controlador de webhook firmado, cobertura de prueba y notas de entrega. Recibirá la fuente Next.js en su proyecto. Las tarifas de Stripe y su cuenta Stripe son independientes.
¿Integrarás Stripe en nuestra aplicación Next.js existente?
Sí. La integración de Stripe para Next.js está diseñada para un proyecto de Next.js que ya tienes. Adaptamos el proceso de pago y el punto de entrada de pago a sus rutas y UI actuales de Next.js en lugar de enviar una aplicación de demostración separada como entregable.
¿La integración de Stripe para Next.js requiere un servidor?
Sí, para una ruta de producción de Next.js Stripe. PaymentIntents, Checkout Sessions y la clave secreta deben residir en el servidor. El navegador Next.js solo recibe una clave publicable y un secreto de cliente. Una exportación de Next.js solo estática no puede alojar esta ruta de webhook.
¿Qué paquetes de Stripe utiliza Stripe Integration para Next.js?
Stripe Integration para Next.js utiliza Stripe.js oficial en el cliente y el SDK de Stripe Node en Next.js Route Handlers. No incluimos el pago de Next.js en un complemento no documentado a menos que lo requiera explícitamente.
¿La integración de Stripe para Next.js es compatible con Apple Pay y Google Pay?
Sí, cuando tu cuenta de Stripe, tu verificación de dominio y tus dispositivos los admitan. En Next.js, los botones de billetera son de alcance opcional. El pago con tarjeta o el elemento de pago en Next.js siguen siendo la alternativa predeterminada.
¿Se incluye Pages Router en la integración de Stripe para Next.js?
La integración de Stripe predeterminada para el alcance de Next.js es App Router. Las rutas API de Pages Router se pueden incluir si eso es lo que su repositorio de Next.js ya usa y lo aceptamos durante la verificación de compatibilidad de Next.js.
¿Puede Stripe Integration para Next.js cobrar pagos de suscripción?
El cliente Next.js puede confirmar un PaymentIntent o iniciar una sesión de pago a través de Stripe.js. Los productos recurrentes de Stripe Billing, el portal del cliente y la lógica de facturación se encuentran en el servidor. El trabajo de Next.js con muchas suscripciones puede necesitar una cotización personalizada.
¿Dónde se encuentran las claves secretas y publicables de Stripe en una aplicación Next.js?
El navegador Next.js solo utiliza la clave publicable de Stripe. La clave secreta y el secreto de firma del webhook permanecen en las variables de entorno del servidor utilizadas por los controladores de ruta. La integración de Stripe para Next.js no coloca claves secretas en los componentes del cliente.
¿Cómo funcionan el modo de prueba Stripe y el modo en vivo en Next.js?
Primero implementamos la integración de Stripe para Next.js con las claves y tarjetas de prueba de Stripe. La puesta en marcha es una clave documentada y una transferencia de webhook en su Stripe Dashboard y el entorno del servidor Next.js, no una activación de licencia complementaria.
¿Cómo maneja Stripe Integration para Next.js 3-D Secure/SCA?
Stripe Checkout y Payment Element manejan 3-D Secure a través de Stripe.js. La página Next.js debe mantener activo el flujo de pago hasta que Stripe devuelva un estado final; Stripe Integration para Next.js conecta esos estados explícitamente.
¿Se requieren webhooks de Stripe para realizar el pago con Next.js?
Sí, para cumplimiento después del pago o elemento de pago de Next.js. La interfaz de usuario de Next.js no es la fuente de la verdad. Un controlador de ruta verifica las firmas del webhook de Stripe y luego marca el pedido pagado, desbloquea el contenido o notifica el cumplimiento.
¿Podemos mantener nuestra interfaz de usuario de pago Next.js actual con Stripe?
Sí. La integración de Stripe para Next.js generalmente mantiene su producto, carrito y botón de pago de Next.js y abre el proceso de pago o monta el elemento de pago a partir de esa acción. Un formulario de tarjeta Next.js personalizado que toca datos PAN sin procesar está fuera del alcance predeterminado porque el elemento de pago o pago es la ruta PCI más segura.
¿El precio de la integración de Stripe para Next.js incluye una cuenta o tarifas de Stripe?
No. Usted crea y es propietario de la cuenta Stripe, las claves API y las tarifas de procesamiento de Stripe. El precio del complemento Next.js es la implementación en su proyecto Next.js, no una licencia de pago de Bacodo.
¿La integración de Stripe para Next.js reemplazará la compra dentro de la aplicación de Apple o Google?
No. Los productos digitales vendidos dentro de una tienda de aplicaciones a menudo aún requieren IAP. La integración de Stripe para Next.js es para el pago de Stripe en un sitio web o aplicación web de Next.js donde Stripe es una ruta de pago permitida para su tipo de producto.
¿Podemos personalizar los recibos y metadatos de Stripe en Next.js?
Sí. Los metadatos de PaymentIntent o Checkout Session, los registros de clientes y los campos que conserva después de la confirmación del webhook se alinean con su modelo de pedido de Next.js existente durante la integración de Stripe para Next.js.
¿Qué compatibilidad con Next.js se incluye después de la transferencia de Stripe?
La fuente de Next.js está en su repositorio, por lo que su equipo puede mantenerla. El soporte incluido de 30 días cubre preguntas técnicas y defectos en el alcance de la integración de Stripe entregada para Next.js, no el trabajo de funciones de Next.js no relacionadas.
¿Cómo se manejan las actualizaciones de Stripe.js o Stripe API en Next.js?
Durante el período de 30 días, ayudamos con las roturas en la integración de Next.js entregada causadas por un cambio documentado en Stripe o Stripe.js. Las actualizaciones continuas del paquete Next.js posteriores son su mantenimiento o soporte técnico extendido si lo compra.
¿Qué pasa si los pagos de Stripe fallan en una aplicación Next.js en producción?
Documentamos cómo leer el estado de PaymentIntent o de la sesión de pago, los registros del panel de Stripe y la entrega del webhook desde la ruta de pago de Next.js. El soporte de 30 días incluye rechazos de solución de problemas, caídas de 3-D Secure y claves mal configuradas para el flujo Next.js entregado.
¿Qué versiones de Next.js son compatibles con Stripe Integration para Next.js?
Confirmamos su versión de Next.js, App Router o Pages Router y el tiempo de ejecución del nodo con el SDK de Stripe que fijamos en el momento de la integración. Los tiempos de ejecución de Next.js más antiguos o muy bifurcados pueden necesitar un alcance adicional.
¿Qué es el soporte de 30 días versus el soporte técnico extendido de 6 meses para la integración de Stripe para Next.js?
Se incluyen 30 días después de la entrega para la ruta de Next.js Stripe entregada. El soporte técnico extendido es opcional al 20% del precio de este complemento de Next.js y cubre seis meses más de ayuda técnica en la misma integración de Next.js, no en la creación de un nuevo producto.
Integración de Stripe para Next.js
Agregue pagos Stripe listos para producción a su aplicación Next.js existente, conserve el código fuente y omita el proceso de compra desde cero.
$145