- Proyecto React existente
- Acceso a Stripe Test Mode
- Se requiere backend para pagos seguros
No hace falta acceso al repositorio. Solo se necesita acceso al proyecto si quiere que Bacodo lo integre directamente.
Complemento reaccionar
Agregue Stripe.js, Payment Element y el pago secreto del cliente a su React SPA existente sin crear elementos, 3-D Secure y errores de clave secreta desde cero. React no aloja webhooks, su API sí.
Desde
$145
USD · React
Integración de Stripe para React · React
Requirements
No hace falta acceso al repositorio. Solo se necesita acceso al proyecto si quiere que Bacodo lo integre directamente.
Qué hace
Bacodo integra Stripe en el proyecto React que ya tienes (Vite, CRA o similar). Después de la entrega, la fuente de React reside en su repositorio. La clave secreta y el webhook permanecen en un servidor que ya ejecuta. Aún eres propietario de la cuenta Stripe y de las tarifas de Stripe.
Un React SPA no puede crear PaymentIntents ni verificar webhooks de forma segura. Necesita Stripe.js, Elements o Checkout y un backend que devuelva un secreto de cliente. Al construir esa división incorrecta, se envía la clave secreta en el paquete.
Agregamos @stripe/react-stripe-js, una pantalla de pago en su árbol de React, y las llamadas de recuperación que su API existente ya necesita para PaymentIntents. La verificación del webhook está conectada a esa API, no dentro de React.
Su equipo se salta la primera implementación de producción de Stripe React: Elements, SCA, env para la clave publicable y una entrega que documenta cómo React se comunica con su API.
Desarrolladores y agencias que ya tienen una interfaz de React y una API, y desean una ruta de Stripe mantenible sin migrar el SPA a Next.js.
Funciones clave
Monte el elemento de pago Stripe con @stripe/react-stripe-js en su ruta de pago de React. Los datos de la tarjeta permanecen en Stripe, no en el estado React, usted persiste.
La aplicación React solo utiliza la clave publicable y un secreto de cliente de corta duración de su API. La integración de Stripe para React no coloca STRIPE_SECRET_KEY en el entorno Vite o CRA que se envía al navegador.
Habilite billeteras en Elemento de pago cuando su cuenta y dominio de Stripe lo permitan. El respaldo de React permanece en los elementos de la tarjeta.
Envíe primero el React SPA con la clave publicable de prueba de Stripe. La transición en vivo es un cambio de entorno documentado más el secreto en vivo correspondiente en su API.
Una pantalla de éxito de React no es la fuente de la verdad. Su API verifica el webhook de Stripe, luego la aplicación React lee el estado pago de esa API.
Maneje tarjetas rechazadas, Elementos cancelados, fallas de red y 3-D Secure incompleto para que la interfaz de usuario de React no deje al cliente en una pantalla muerta.
Casos de uso
Ya tienes un React SPA y una API. Necesita realizar la compra de Elements sin tener que volver a escribir el catálogo en Next.js.
Necesita una ruta de Stripe que se pueda mantener en React, una fuente en el repositorio del cliente y una transferencia de clave en vivo documentada en lugar de una demostración de CodeSandbox.
La aplicación React recopila un primer método de pago mientras las suscripciones permanecen en su API y Stripe Billing si ya las usa.
La integración de Stripe para React es el lado SPA. Si también necesita crear la API, su alcance se establece por separado; este precio no es un backend nuevo.
Demo
Obtenga una vista previa de la ruta de pago de React: acción de pago, elemento de pago, confirmación y estados de falla. 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
Flujo de trabajo del complemento estándar de Bacodo, con comprobaciones específicas de React para Vite/CRA, React Router y la API que el SPA ya llama.
01
Confirme la integración de Stripe para React y que tiene (o tendrá alcance) una API que puede crear PaymentIntents.
02
Revise la versión de React, el paquete, la interfaz de usuario de pago existente y el idioma de backend que ya utiliza el SPA.
03
Agregue Stripe.js, Elements, componentes de pago y el contrato de recuperación a su punto final PaymentIntent.
04
Conecte la clave publicable a través del entorno público Vite/CRA. La clave secreta y el webhook permanecen en la API.
05
Ejecute tarjetas de prueba de Stripe, 3-D Secure, cancele/rechace y confirme el estado de las actualizaciones del webhook de API que lee la aplicación React.
06
Entregue la fuente de React, notas ambientales y una lista de verificación de claves en vivo. La implementación de React es suya para mantenerla.
Arquitectura
El paquete React nunca contiene la clave secreta. Elements utiliza un secreto de cliente de su API. Stripe notifica esa API mediante webhook. React luego lee el estado del pedido.
Tecnologías compatibles
React actual en Vite, CRA o un paquete SPA similar. Este no es un aterrizaje de Next.js App Router; consulte Integración de Stripe para Next.js para esa pila.
Enlaces oficiales de Stripe React para elementos de pago y billeteras.
Creación de PaymentIntent y verificación de webhook en el backend que la aplicación React ya llama. Este complemento no reemplaza esa API con un servicio exclusivo de Bacodo.
Su cuenta de Stripe, claves de prueba y activas, punto final de webhook en la API y eventos del Panel de control.
El React SPA puede ser estático. El webhook no puede. Un host solo estático sin API no puede completar esta ruta de pago.
Qué incluye
Pricing
Este precio es únicamente para la plataforma React SPA. No utiliza precios de complementos de Next.js, Django, Flutter o React Native.
Integración de Stripe para React
Agregue pagos Stripe listos para producción a un React SPA existente y conserve el código fuente.
Requisitos
$145
pago únicoReact
¿Necesita un backend?
Pago seguro constripe
Entrega y seguridad
El pago típico de React Stripe tiene como alcance después de la verificación de compatibilidad de React. El cronograma depende de su interfaz de usuario y API de pago de React actuales.
Las tarjetas en modo de prueba, 3-D Secure, cancelar y rechazar rutas se ejercen en React SPA antes de que entreguemos.
Sólo la clave publicable es pública. Las claves secretas y los secretos del webhook permanecen en el servidor al que llama la aplicación React.
React no verifica Stripe-Signature. Su API lo hace, luego React lee el resultado.
No reclamamos certificación PCI ni fraude cero. React recopila tarjetas a través de Stripe Elements, no un formulario de tarjeta personalizado que almacenamos.
FAQ
La integración de Stripe para React incluye Stripe.js, el elemento de pago en su pantalla de pago de React existente, el contrato de recuperación de su API PaymentIntent, cobertura de prueba y notas de entrega. Recibes la fuente de React en tu proyecto. Las tarifas de Stripe, su cuenta de Stripe y la creación de un nuevo backend son independientes.
Sí. La integración de Stripe para React está diseñada para un React SPA que ya tienes (Vite, CRA o similar). Adaptamos el elemento de pago y el punto de entrada de pago a sus rutas y UI de React actuales en lugar de enviar una aplicación de demostración separada como entregable.
Sí, para una ruta de producción de React Stripe. PaymentIntents, la clave secreta y la verificación del webhook deben residir en un servidor. El navegador React solo recibe una clave publicable y un secreto de cliente. Un host React solo estático no puede completar esta ruta de pago.
Stripe Integration para React utiliza Stripe.js oficial y @stripe/react-stripe-js para elementos de pago y billeteras. No incluimos el pago de React en un complemento no documentado a menos que lo requiera explícitamente.
Sí, cuando tu cuenta de Stripe, tu verificación de dominio y tus dispositivos los admitan. En React, los botones de billetera son de alcance opcional. El elemento de pago con tarjeta en React sigue siendo el recurso alternativo predeterminado.
No. La integración de Stripe para React es una ruta SPA. Next.js App Router y Route Handlers son integración de Stripe para Next.js. No migramos un React SPA a Next.js dentro de este precio adicional de React.
El cliente de React puede confirmar un PaymentIntent o cobrar un método de pago a través de Stripe.js. Los productos recurrentes de Stripe Billing, el portal de clientes y la lógica de facturación se encuentran en su API. El trabajo de React con muchas suscripciones puede necesitar una cotización personalizada.
El navegador React solo utiliza la clave publicable de Stripe a través de Vite o el entorno público CRA. La clave secreta y el secreto de firma del webhook permanecen en su API. La integración de Stripe para React no incluye claves secretas en el paquete de React.
Primero implementamos la integración de Stripe para React contra las claves de prueba y las tarjetas de prueba de Stripe. La puesta en marcha es un cambio documentado de clave publicable en React más el secreto en vivo y el webhook coincidentes en su API, no una activación de licencia complementaria.
Stripe Payment Element maneja 3-D Secure a través de Stripe.js. La página de React debe mantener vivo el flujo de pago hasta que Stripe devuelva un estado final; La integración de Stripe para React conecta esos estados explícitamente.
Sí, para cumplimiento después del elemento de pago React. La interfaz de usuario de React no es la fuente de la verdad. Su API verifica las firmas del webhook de Stripe y luego marca el pedido pagado, desbloquea el contenido o notifica el cumplimiento. React luego lee ese estado.
Sí. La integración de Stripe para React generalmente mantiene su producto, carrito y botón de pago de React y monta el elemento de pago a partir de esa acción. Un formulario de tarjeta React personalizado que toca datos PAN sin procesar está fuera del alcance predeterminado porque el elemento de pago es la ruta PCI más segura.
No. Usted crea y es propietario de la cuenta Stripe, las claves API y las tarifas de procesamiento de Stripe. El precio del complemento React es la implementación en su proyecto React, no una licencia de pago de Bacodo.
No. Los productos digitales vendidos dentro de una tienda de aplicaciones a menudo aún requieren IAP. La integración de Stripe para React es para el pago de Stripe en un sitio web de React o SPA donde Stripe es una ruta de pago permitida para su tipo de producto.
Sí. Los metadatos de PaymentIntent, los registros de clientes y los campos que conserva después de la confirmación del webhook se alinean con su modelo de pedido existente durante la integración de Stripe para React. La aplicación React solo muestra lo que devuelve tu API.
La fuente de React 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 para React entregado, no el trabajo de funciones de React no relacionadas.
Durante el período de 30 días, ayudamos con la rotura en la integración de React entregada causada por un cambio documentado en Stripe o Stripe.js. Las actualizaciones continuas del paquete React después de eso son su mantenimiento o soporte técnico extendido si lo compra.
Documentamos cómo leer el estado de PaymentIntent, los registros del Stripe Dashboard y la entrega del webhook desde la ruta de pago de React. 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 de React entregado.
Confirmamos su versión de React, paquete (Vite, CRA o similar) y la API que el SPA ya llama con la versión de Stripe.js que fijamos en el momento de la integración. Los tiempos de ejecución de React más antiguos o muy bifurcados pueden necesitar un alcance adicional.
Se incluyen 30 días después de la entrega para la ruta React Stripe entregada. El soporte técnico extendido es opcional al 20 % del precio de este complemento de React y cubre seis meses más de ayuda técnica en esa misma integración de React, no en la creación de un nuevo producto.
Agregue pagos Stripe listos para producción a su React SPA existente, conserve el código fuente y guarde secretos en su API.
$145