- Projeto React existente
- Acesso ao Stripe Test Mode
- É necessário um backend para pagamentos seguros
Não é necessário acesso ao repositório. Só precisa de acesso ao projeto se quiser que a Bacodo integre diretamente.
Complemento React
Adicione Stripe.js, elemento de pagamento e checkout secreto do cliente ao seu React SPA existente sem criar elementos, 3-D Secure e erros de chave secreta do zero. O React não hospeda webhooks – sua API sim.
A partir de
$145
USD · React
Integração Stripe para React · React
Requirements
Não é necessário acesso ao repositório. Só precisa de acesso ao projeto se quiser que a Bacodo integre diretamente.
O que faz
Bacodo integra Stripe ao projeto React que você já possui (Vite, CRA ou similar). Após a transferência, a fonte React permanece em seu repositório. A chave secreta e o webhook permanecem em um back-end que você já executa. Você ainda possui a conta Stripe e as taxas do Stripe.
Um React SPA não pode criar PaymentIntents ou verificar webhooks com segurança. Ele precisa de Stripe.js, Elements ou Checkout e um back-end que retorne um segredo do cliente. Construir essa divisão errada envia a chave secreta no pacote.
Adicionamos @stripe/react-stripe-js, uma tela de checkout em sua árvore React, e as chamadas de busca que sua API existente já precisa para PaymentIntents. A verificação do webhook está conectada a essa API, não dentro do React.
Sua equipe pula a primeira implementação de produção do Stripe React: Elements, SCA, env para a chave publicável e uma transferência que documenta como o React se comunica com sua API.
Desenvolvedores e agências que já possuem um frontend React e uma API e desejam um caminho Stripe sustentável sem migrar o SPA para Next.js.
Funções principais
Monte o elemento de pagamento Stripe com @stripe/react-stripe-js em sua rota de checkout do React. Os dados do cartão permanecem no Stripe – e não no estado React, você persiste.
O aplicativo React usa apenas a chave publicável e um segredo do cliente de curta duração da sua API. Stripe Integration for React não coloca STRIPE_SECRET_KEY no ambiente Vite ou CRA enviado para o navegador.
Habilite carteiras no elemento de pagamento quando sua conta e domínio Stripe permitirem. O fallback do React permanece nos elementos do cartão.
Envie primeiro o React SPA com a chave publicável de teste Stripe. A transferência ao vivo é uma mudança de ambiente documentada mais o segredo ao vivo correspondente em sua API.
Uma tela de sucesso do React não é a fonte da verdade. Sua API verifica o webhook Stripe e, em seguida, o aplicativo React lê o estado pago dessa API.
Lide com cartões recusados, elementos cancelados, falhas de rede e 3-D Secure incompleto para que a UI do React não deixe o cliente em uma tela morta.
Casos de uso
Você já possui um React SPA e uma API. Você precisa do checkout do Elements sem reescrever o catálogo em Next.js.
Você precisa de um caminho Stripe sustentável no React, fonte no repositório do cliente e uma substituição de chave ativa documentada em vez de uma demonstração do CodeSandbox.
O aplicativo React coleta uma primeira forma de pagamento enquanto as assinaturas permanecem na sua API e no Stripe Billing, caso você já as utilize.
Stripe Integration for React é o lado do SPA. Se você também precisa da API construída, o escopo é separado - esse preço não é um novo back-end.
Demo
Visualize o caminho de checkout do React: ação de pagamento, elemento de pagamento, confirmação e estados de falha. Uma sandbox ativa em sua conta Stripe está disponível após a verificação de compatibilidade. Esta página não processa cobranças reais.
Como funciona
Fluxo de trabalho complementar padrão do Bacodo, com verificações específicas do React para Vite/CRA, React Router e a API que o SPA já chama.
01
Confirme a integração do Stripe para React e se você tem (ou terá escopo) uma API que pode criar PaymentIntents.
02
Revise a versão do React, o bundler, a UI de checkout existente e a linguagem de back-end que o SPA já usa.
03
Adicione Stripe.js, Elements, componentes de checkout e o contrato de busca ao seu endpoint PaymentIntent.
04
Conecte a chave publicável via ambiente público Vite/CRA. A chave secreta e o webhook permanecem na API.
05
Execute cartões de teste Stripe, 3-D Secure, cancele/rejeite e confirme o estado das atualizações do webhook da API que o aplicativo React lê.
06
Forneça o código-fonte do React, notas de ambiente e uma lista de verificação de chave ativa. A implementação do React é sua para manter.
Arquitetura
O pacote React nunca contém a chave secreta. Elements usa um segredo do cliente da sua API. Stripe notifica essa API por webhook. React então lê o estado do pedido.
Tecnologias suportadas
React atual no Vite, CRA ou um empacotador SPA semelhante. Este não é um destino do Next.js App Router - consulte Stripe Integration for Next.js para essa pilha.
Vinculações oficiais do Stripe React para elementos de pagamento e carteiras.
Criação de PaymentIntent e verificação de webhook no back-end que o aplicativo React já chama. Este complemento não substitui essa API por um serviço somente Bacodo.
Sua conta Stripe, chaves de teste e ativas, endpoint de webhook na API e eventos do Dashboard.
O React SPA pode ser estático. O webhook não pode. Um host somente estático sem API não pode concluir este caminho de checkout.
O que está incluído
Pricing
Este preço é apenas para a plataforma React SPA. Ele não usa preços complementares Next.js, Django, Flutter ou React Native.
Integração Stripe para React
Adicione pagamentos Stripe prontos para produção a um React SPA existente e mantenha o código-fonte.
Requisitos
$145
pagamento únicoReact
Precisa de um backend?
Checkout seguro viastripe
Entrega e segurança
A verificação típica do React Stripe tem escopo após a verificação de compatibilidade do React. A linha do tempo depende da interface de usuário e API de checkout do React atual.
Cartões de modo de teste, caminhos 3-D Secure, cancelamento e recusa são exercidos no React SPA antes de entregarmos.
Somente a chave publicável é pública. As chaves secretas e os segredos do webhook permanecem no servidor que o aplicativo React chama.
O React não verifica o Stripe-Signature. Sua API faz isso e o React lê o resultado.
Não reivindicamos certificação PCI ou fraude zero. O React coleta cartões por meio do Stripe Elements, não de um formulário de cartão personalizado que armazenamos.
FAQ
Stripe Integration for React inclui Stripe.js, elemento de pagamento em sua tela de checkout existente do React, o contrato de busca para sua API PaymentIntent, cobertura de teste e notas de entrega. Você recebe o código-fonte do React em seu projeto. As taxas do Stripe, sua conta Stripe e a construção de um novo back-end são separadas.
Sim. Stripe Integration for React foi desenvolvido para um React SPA que você já possui (Vite, CRA ou similar). Ajustamos o elemento de pagamento e o ponto de entrada do pagamento em suas rotas e UI atuais do React, em vez de enviar um aplicativo de demonstração separado como entrega.
Sim para um caminho React Stripe de produção. PaymentIntents, a chave secreta e a verificação do webhook devem estar em um servidor. O navegador React recebe apenas uma chave publicável e um segredo do cliente. Um host React somente estático não pode concluir este caminho de checkout.
Stripe Integration for React usa Stripe.js e @stripe/react-stripe-js oficiais para elemento de pagamento e carteiras. Não envolvemos o checkout do React em um plugin não documentado, a menos que você exija explicitamente um.
Sim, quando sua conta Stripe, verificação de domínio e dispositivos os suportam. No React, os botões da carteira são de escopo opcional. O elemento de pagamento com cartão no React continua sendo o substituto padrão.
Não. Stripe Integration for React é um caminho SPA. Next.js App Router e Route Handlers são integração Stripe para Next.js. Não migramos um React SPA para Next.js dentro deste preço complementar do React.
O cliente React pode confirmar um PaymentIntent ou coletar uma forma de pagamento através do Stripe.js. Produtos recorrentes do Stripe Billing, portal do cliente e lógica de fatura disponíveis na sua API. O trabalho do React com muitas assinaturas pode precisar de um orçamento personalizado.
O navegador React usa apenas a chave publicável Stripe via ambiente público Vite ou CRA. A chave secreta e o segredo de assinatura do webhook permanecem na sua API. Stripe Integration for React não coloca chaves secretas no pacote React.
Implementamos primeiro o Stripe Integration para React contra chaves de teste e cartões de teste do Stripe. A ativação é uma alteração documentada da chave publicável no React, além do segredo ao vivo correspondente e do webhook em sua API, não uma ativação de licença complementar.
O Stripe Payment Element lida com 3-D Secure por meio do Stripe.js. A página React deve manter o fluxo de checkout ativo até que o Stripe retorne um status final; Stripe Integration for React conecta esses estados explicitamente.
Sim para cumprimento após React Payment Element. A UI do React não é a fonte da verdade. Sua API verifica as assinaturas do webhook do Stripe e, em seguida, marca o pedido como pago, desbloqueia o conteúdo ou notifica o cumprimento. O React então lê esse estado.
Sim. Stripe Integration for React normalmente mantém seu produto React, carrinho e botão de pagamento e monta o Elemento de Pagamento a partir dessa ação. Um formulário de cartão React personalizado que toca dados PAN brutos está fora do escopo padrão porque o Elemento de Pagamento é o caminho PCI mais seguro.
Não. Você cria e é proprietário da conta Stripe, das chaves de API e das taxas de processamento do Stripe. O preço complementar do React é a implementação em seu projeto React, não uma licença de pagamento Bacodo.
Não. Os produtos digitais vendidos em uma loja de aplicativos muitas vezes ainda exigem IAP. Stripe Integration for React é para checkout Stripe em um site React ou SPA onde Stripe é um caminho de pagamento permitido para seu tipo de produto.
Sim. Os metadados PaymentIntent, os registros do cliente e os campos que você persiste após a confirmação do webhook são alinhados ao seu modelo de pedido existente durante o Stripe Integration for React. O aplicativo React exibe apenas o que sua API retorna.
A fonte do React está no seu repositório, para que sua equipe possa mantê-la. O suporte incluído de 30 dias cobre questões técnicas e defeitos no escopo entregue do Stripe Integration for React, e não no trabalho de recursos React não relacionados.
Durante o período de 30 dias, ajudamos com falhas na integração do React entregue causadas por uma alteração documentada no Stripe ou no Stripe.js. As atualizações contínuas do pacote React depois disso são sua manutenção ou suporte técnico estendido, se você comprá-lo.
Documentamos como ler o status do PaymentIntent, os logs do Stripe Dashboard e a entrega do webhook no caminho de checkout do React. O suporte de 30 dias inclui recusas de solução de problemas, quedas do 3-D Secure e chaves mal configuradas para o fluxo React entregue.
Confirmamos sua versão do React, bundler (Vite, CRA ou similar) e a API que o SPA já chama na versão Stripe.js que fixamos no momento da integração. Tempos de execução do React mais antigos ou fortemente bifurcados podem precisar de escopo extra.
30 dias após a entrega estão incluídos no caminho React Stripe entregue. O suporte técnico estendido é opcional por 20% do preço complementar do React e cobre mais seis meses de ajuda técnica na mesma integração do React, não na construção de um novo produto.
Adicione pagamentos Stripe prontos para produção ao seu React SPA existente, mantenha o código-fonte e mantenha segredos em sua API.
$145