BacodoBACODO

Complemento React Native

Integração Stripe para React Native

Adicione a planilha de pagamento @stripe/stripe-react-native ao seu aplicativo React Native existente sem criar formulários de cartão nativos, 3-D Secure e erros de chave secreta do zero. React Native não hospeda webhooks – sua API sim.

  • Código-fonte completo incluído e seu permanentemente
  • Não é necessária nenhuma chave de licença complementar ou licença recorrente
  • Pronto para produção e testado
  • Integrado ao seu projeto e pilha React Native existente
  • 30 dias de suporte técnico pós-entrega incluído
  • Suporte técnico estendido opcional de 6 meses a 20% do preço do complemento

A partir de

$145

USD · React Native

Ver demonstração

Integração Stripe para React Native · React Native

Código-fonte completoSem chave de licençaPronto para produçãoIntegração testadaSuporte de 30 dias

Requirements

What Integração Stripe para React Native needs

  • Projeto React Native 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.

O que faz

Folha de pagamento em seu aplicativo React Native – a API ainda possui segredos

Bacodo integra Stripe ao projeto React Native que você já possui (Expo ou bare). Após a transferência, a fonte React Native 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.

Problema que resolve

Um aplicativo React Native não pode criar PaymentIntents ou verificar webhooks com segurança. Precisa de Folha de Pagamento e um backend que retorne um segredo do cliente. Construir essa divisão errada envia a chave secreta no binário.

Como isso chega ao projeto

Adicionamos @stripe/stripe-react-native, apresentamos a planilha de pagamento de sua ação de checkout React Native existente e transferimos as chamadas de busca que sua API já precisa para PaymentIntents. A verificação do webhook está nessa API, não dentro do React Native.

Por que economiza tempo de desenvolvimento

Sua equipe pula a primeira implementação de produção do Stripe React Native: folha de pagamento, SCA, configuração nativa e uma transferência que documenta como o aplicativo se comunica com sua API.

Para quem é

Desenvolvedores e agências que já possuem um aplicativo React Native iOS/Android e uma API e desejam um caminho Stripe sustentável sem reescrever o aplicativo no Flutter.

Funções principais

O que Integração Stripe para React Native inclui

Folha de pagamento em React Native

Apresente a planilha de pagamento Stripe com @stripe/stripe-react-native de sua ação de pagamento React Native. Os dados do cartão permanecem no Stripe – e não no estado React Native, você persiste.

React Native busca segredos do cliente – nunca a chave secreta

O aplicativo React Native usa apenas a chave publicável e um segredo do cliente de curta duração da sua API. Stripe Integration for React Native não coloca STRIPE_SECRET_KEY no pacote JS ou no binário nativo.

Apple Pay e Google Pay em React Native

Ative carteiras na folha de pagamento quando sua conta Stripe, ID de comerciante da Apple e configuração do Google Pay permitirem. O substituto do React Native permanece na planilha de pagamento do cartão.

Modo de teste React Native e chave publicável ao vivo

Envie primeiro o aplicativo React Native com a chave publicável de teste Stripe. A substituição ao vivo é uma mudança de ambiente/sabor documentada mais o segredo ao vivo correspondente em sua API.

O cumprimento não é uma tela de sucesso do React Native

Uma tela de agradecimento do React Native não é a fonte da verdade. Sua API verifica o webhook Stripe e, em seguida, o aplicativo React Native lê o estado pago dessa API.

Erro React Native e estados de cancelamento

Lide com cartões recusados, folha de pagamento cancelada, falhas de rede e 3-D Secure incompleto para que a UI React Native não deixe o cliente em uma tela morta.

Casos de uso

Quando Integração Stripe para React Native encaixa

Loja React Native existente em iOS e Android

Você já tem um aplicativo React Native e uma API. Você precisa finalizar a compra da Folha de Pagamento sem reescrever o catálogo no Flutter.

Agência entregando um aplicativo cliente React Native para produção

Você precisa de um caminho Stripe sustentável no React Native, fonte no repositório do cliente e uma transição de chave ativa documentada em vez de uma demonstração de lanche.

Acesso pago SaaS em React Native

O aplicativo React Native coleta uma primeira forma de pagamento enquanto as assinaturas permanecem na sua API e no Stripe Billing, caso você já as utilize.

Aplicativo React Native, Django ou Node API já implementado

Stripe Integration for React Native é o lado do cliente móvel. Se você também precisa da API construída, o escopo é separado - esse preço não é um novo back-end.

Demo

Visualização do fluxo da planilha de pagamento nativa do React

Visualize o caminho de checkout do React Native: ação de pagamento, folha 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

Como a integração do Stripe para React Native é entregue

Fluxo de trabalho de complemento Bacodo padrão, com verificações específicas do React Native para Expo vs bare, alvos iOS/Android e a API que o aplicativo já chama.

  1. 01

    Selecione React Native Stripe

    Confirme a integração do Stripe para React Native e se você tem (ou terá escopo) uma API que pode criar PaymentIntents.

  2. 02

    Verificação de compatibilidade do React Native

    Revise a versão React Native, Expo ou fluxo de trabalho simples, UI de checkout existente e a linguagem de back-end que o aplicativo já usa.

  3. 03

    Integrar ao React Native

    Adicione @stripe/stripe-react-native, apresentação da folha de pagamento, configuração nativa e o contrato de busca ao seu endpoint PaymentIntent.

  4. 04

    Configure o aplicativo React Native

    Conecte a chave publicável via env ou sabor. A chave secreta e o webhook permanecem na API.

  5. 05

    Teste o caminho de pagamento do React Native

    Execute cartões de teste Stripe no iOS e Android, 3-D Secure, cancele/rejeite e confirme o estado das atualizações do webhook da API que o aplicativo React Native lê.

  6. 06

    Entregar a fonte React Native

    Forneça fonte React Native, notas de ambiente e uma lista de verificação de chave ativa. A implementação do React Native é sua para manter.

Arquitetura

Como o Stripe se conecta a um projeto React Native

O binário React Native nunca contém a chave secreta. A Folha de Pagamento usa um segredo do cliente da sua API. Stripe notifica essa API por webhook. React Native então lê o estado do pedido.

Aplicativo React NativeFolha de pagamentoSua APIStripe PaymentIntentsWebhook → APIReact Native lê estado pago

Tecnologias suportadas

O que Integração Stripe para React Native realmente usa

React Native em iOS e Android

React Native atual na Expo ou um fluxo de trabalho simples. Este não é um site React e nem Flutter - veja os patamares do Stripe para essas pilhas.

@stripe/stripe-react-nativo

SDK oficial do Stripe React Native para planilha de pagamento e carteiras.

Sua API existente

Criação de PaymentIntent e verificação de webhook no back-end que o aplicativo React Native já chama. Este complemento não substitui essa API por um serviço somente Bacodo.

Conta Stripe para o aplicativo React Native

Sua conta Stripe, chaves de teste e ativas, endpoint de webhook na API e eventos do Dashboard.

Back-end necessário

O aplicativo React Native é um cliente. O webhook não pode residir apenas no telefone. Um projeto somente de aplicativo sem API não pode concluir esse caminho de checkout.

O que está incluído

O que inclui a integração Stripe para React Native

  • Integração no projeto React Native existente
  • Código fonte completo em seu repositório
  • Apresentação de ambiente de chave publicável e folha de pagamento
  • Busque o contrato para sua API PaymentIntent
  • Fluxos de pagamento React Native testados em iOS e Android antes da transferência
  • Notas de transferência para transferência de teste para produção
  • Suporte técnico de 30 dias após entrega

Não está no preço adicional

  • Conta Stripe, chaves de API e taxas de processamento Stripe – você é o proprietário delas
  • Um novo back-end se você não tiver uma API que possa criar PaymentIntents
  • Uma reescrita de React Native para Flutter
  • Substituição de compra no aplicativo Apple ou Google
  • Marketplace Connect ou faturamento personalizado, a menos que tenha escopo de trabalho personalizado

Pricing

Integração Stripe para preços React Native

Este preço é apenas para a plataforma React Native. Ele não usa preços complementares Next.js, React, Django ou Flutter.

Integração Stripe para React Native

Adicione Stripe Payment Sheet pronto para produção a um aplicativo React Native existente e mantenha o código-fonte.

Requisitos

  • Projeto React Native existente
  • Acesso ao Stripe Test Mode
  • É necessário um backend para pagamentos seguros

$145

pagamento único

React Native

Precisa de um backend?

  • Código-fonte completo
  • Sem taxa de licença
  • 30 dias de suporte
  • Integração completa

Checkout seguro viastripe

Entrega e segurança

Práticas de entrega e segurança do React Native

Entrega estimada do React Native

A verificação típica do React Native Stripe tem escopo após a verificação de compatibilidade do React Native. A linha do tempo depende da Expo vs simples, UI de checkout atual e API.

Testado no React Native antes da entrega

Cartões de modo de teste, caminhos 3-D Secure, cancelamento e recusa são exercidos no iOS e Android antes de entregarmos.

Os segredos do Stripe ficam fora do binário React Native

Somente a chave publicável está no cliente. As chaves secretas e os segredos do webhook permanecem no servidor que o aplicativo React Native chama.

A verificação do webhook está na API, não no React Native

React Native não verifica Stripe-Signature. Sua API faz isso e o React Native lê o resultado.

Nenhuma reivindicação de segurança React Native não verificável

Não reivindicamos certificação PCI ou fraude zero. O React Native coleta cartões por meio da Folha de Pagamento, não de um formulário de cartão personalizado que armazenamos.

FAQ

Perguntas frequentes

O que inclui o Stripe Integration para React Native?

A integração do Stripe para React Native inclui a configuração @stripe/stripe-react-native, planilha de pagamento em seu checkout React Native existente, o contrato de busca para sua API PaymentIntent, cobertura de teste de iOS e Android e notas de entrega. Você recebe a fonte React Native em seu projeto. As taxas do Stripe, sua conta Stripe e a construção de um novo back-end são separadas.

Você integrará o Stripe ao nosso aplicativo React Native existente?

Sim. Stripe Integration for React Native foi desenvolvido para um projeto React Native que você já possui. Ajustamos a folha de pagamento e o ponto de entrada do pagamento em sua interface de navegação e checkout React Native atual, em vez de enviar um aplicativo de demonstração separado como entrega.

O Stripe Integration for React Native requer um back-end?

Sim para um caminho de produção React Native Stripe. PaymentIntents, a chave secreta e a verificação do webhook devem estar em um servidor. O aplicativo React Native recebe apenas uma chave publicável e um segredo do cliente. Se você não tiver API, esse trabalho de back-end terá um escopo separado e não será assumido no preço complementar do React Native.

Qual pacote Stripe o Stripe Integration for React Native usa?

Stripe Integration for React Native usa @stripe/stripe-react-native, o SDK React Native oficial da Stripe, para planilha de pagamento e botões de carteira em iOS e Android. Não envolvemos o checkout do React Native em um plugin não documentado, a menos que você exija explicitamente um.

A integração do Stripe para React Native é compatível com Apple Pay e Google Pay?

Sim, quando sua conta Stripe, ID de comerciante da Apple, configuração do Google Pay e dispositivos forem compatíveis. No React Native, os botões da carteira são de escopo opcional. A planilha de pagamento com cartão no React Native continua sendo o substituto padrão.

A Expo está incluída no Stripe Integration para React Native?

Expo e bare React Native são ambos candidatos. Confirmamos o Expo SDK, os plug-ins de configuração e a compatibilidade do módulo nativo durante a verificação de compatibilidade do React Native. Um site React não é esse destino - consulte Stripe Integration for React.

O Stripe Integration for React Native pode cobrar pagamentos de assinatura?

O cliente React Native pode confirmar um PaymentIntent ou coletar uma forma de pagamento através da Folha de Pagamento. Produtos recorrentes do Stripe Billing, portal do cliente e lógica de fatura disponíveis na sua API. O trabalho React Native com muitas assinaturas pode precisar de um orçamento personalizado.

Onde ficam as chaves publicáveis e secretas do Stripe em um aplicativo React Native?

O aplicativo React Native usa apenas a chave publicável Stripe, normalmente via env ou um tipo seguro. A chave secreta e o segredo de assinatura do webhook permanecem no servidor. Stripe Integration for React Native não coloca chaves secretas no APK ou IPA.

Como o modo de teste Stripe e o modo ao vivo funcionam no React Native?

Implementamos primeiro o Stripe Integration para React Native contra chaves de teste e cartões de teste do Stripe. A ativação é uma chave documentada e uma transferência de webhook em seu Stripe Dashboard e ambiente de servidor usado pelo aplicativo React Native, não uma ativação de licença complementar.

Como o Stripe Integration for React Native lida com 3-D Secure/SCA?

React Native Payment Sheet e PaymentIntents lidam com 3-D Secure por meio de @stripe/stripe-react-native. O aplicativo React Native deve manter o fluxo da planilha ativo até que o Stripe retorne um status final; Stripe Integration for React Native conecta esses estados explicitamente.

Os webhooks do Stripe são necessários para o checkout do React Native?

Sim para cumprimento após a planilha de pagamento React Native. A UI React Native não é a fonte da verdade. Seu back-end verifica as assinaturas do webhook do Stripe e, em seguida, marca o pedido como pago, desbloqueia o conteúdo ou notifica o cumprimento.

Podemos manter nossa interface de checkout React Native atual com Stripe?

Sim. Stripe Integration for React Native normalmente mantém seu produto React Native, carrinho e botão de pagamento e apresenta a planilha de pagamento dessa ação. Um formulário de cartão React Native personalizado que aborda dados PAN brutos está fora do escopo padrão porque a Folha de Pagamento é o caminho PCI mais seguro.

O preço do Stripe Integration for React Native inclui uma conta Stripe ou taxas?

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 Native é a implementação em seu projeto React Native, não uma licença de pagamento Bacodo.

A integração do Stripe para React Native substituirá a compra no aplicativo da Apple ou do Google?

Não. Os produtos digitais vendidos na loja iOS ou Android muitas vezes ainda exigem IAP. Stripe Integration for React Native é para checkout Stripe em um aplicativo React Native onde Stripe é um caminho de pagamento permitido para seu tipo de produto.

Podemos personalizar recibos e metadados do Stripe no React Native?

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 modelo de pedido existente do seu aplicativo React Native durante o Stripe Integration for React Native.

Qual suporte React Native está incluído após a transferência do Stripe?

A fonte React Native está em 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 Native, e não no trabalho de recurso React Native não relacionado.

Como as atualizações do stripe-react-native ou da API Stripe são tratadas no React Native?

Durante a janela de 30 dias, ajudamos com falhas na integração React Native entregue causadas por uma alteração documentada no Stripe ou @stripe/stripe-react-native. As atualizações contínuas do pacote React Native depois disso são sua manutenção ou suporte técnico estendido, se você comprá-lo.

E se os pagamentos do Stripe falharem em um aplicativo React Native de produção?

Documentamos como ler o status do PaymentIntent, os logs do Stripe Dashboard e a entrega do webhook no caminho de checkout do React Native. 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 Native entregue.

Quais versões do React Native são compatíveis com Stripe Integration for React Native?

Confirmamos sua versão React Native, Expo ou fluxo de trabalho simples, destino de implantação iOS e Android minSdk em relação à versão @stripe/stripe-react-native que fixamos no momento da integração. Tempos de execução React Native mais antigos ou fortemente bifurcados podem precisar de escopo extra.

O que é suporte de 30 dias versus suporte técnico estendido de 6 meses para integração Stripe para React Native?

30 dias após a entrega estão incluídos para o caminho React Native Stripe entregue. O suporte técnico estendido é opcional por 20% do preço complementar do React Native e cobre mais seis meses de ajuda técnica na mesma integração do React Native, não na construção de um novo produto.

Integração Stripe para React Native

Adicione pagamentos Stripe prontos para produção ao seu aplicativo React Native existente, mantenha o código-fonte e mantenha segredos em sua API.

$145