- Projeto Next.js existente
- Acesso ao Stripe Test Mode
Não é necessário acesso ao repositório. Só precisa de acesso ao projeto se quiser que a Bacodo integre diretamente.
Complemento Next.js
Integração Stripe para Next.js
Adicione Stripe Checkout ou Payment Element, PaymentIntents e webhooks assinados ao seu projeto existente do Next.js App Router sem criar a fiação do checkout, 3-D Secure e Route Handler do zero.
- 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 Next.js 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 · Next.js
Integração Stripe para Next.js · Next.js
Código-fonte completoSem chave de licençaPronto para produçãoIntegração testadaSuporte de 30 dias
Requirements
What Integração Stripe para Next.js needs
O que faz
Stripe checkout dentro de seu aplicativo Next.js
Bacodo integra Stripe ao projeto Next.js que você já possui. Após a transferência, a implementação fica em seu repositório para que sua equipe possa lê-la, alterá-la e estendê-la. Você ainda possui a conta Stripe, as chaves de API e as taxas do Stripe.
Problema que resolve
O check-out de cartão e carteira em Next.js precisa de PaymentIntents, Checkout ou Payment Element, 3-D Secure, chaves secretas somente de servidor e um webhook Route Handler que verifica assinaturas. Construir esse caminho do zero é lento e fácil de errar.
Como isso chega ao projeto
Adicionamos Stripe.js no cliente Next.js, Route Handlers (ou Server Actions) que criam PaymentIntents ou Checkout Sessions, verificação de webhook, páginas de sucesso/cancelamento e configuração de ambiente de teste/ao vivo para App Router.
Por que economiza tempo de desenvolvimento
Sua equipe pula a primeira implementação de produção do Stripe Next.js: manipuladores do App Router, SCA, estados de erro e uma entrega que documenta como enviar chaves ativas.
Para quem é
Desenvolvedores, equipes técnicas, agências e startups que já possuem um aplicativo Next.js e desejam um caminho de pagamento de produção que possam manter.
Funções principais
O que Integração Stripe para Next.js inclui
Stripe Checkout ou elemento de pagamento em Next.js
Use Stripe Checkout hospedado ou um elemento de pagamento incorporado em sua página de checkout Next.js. A entrada do cartão, o 3-D Secure e os botões da carteira permanecem no caminho PCI do Stripe – e não no formulário de cartão personalizado que você armazena.
Manipuladores de rota Next.js para PaymentIntents
Crie sessões de checkout ou PaymentIntents em manipuladores de rota Next.js. O navegador usa apenas a chave publicável e o segredo do cliente — a chave secreta nunca é enviada em um Componente Cliente.
Apple Pay e Google Pay no Next.js Checkout
Ative os botões da carteira no Stripe Checkout ou no Payment Element quando sua conta e domínio do Stripe forem verificados. O substituto do Next.js permanece na finalização da compra do cartão.
Modo de teste Next.js e depois teclas Stripe ao vivo
Envie o aplicativo Next.js com chaves de teste Stripe, cartões de teste e uma transição documentada para chaves ativas. As variáveis de ambiente Next.js ficam fora do pacote do cliente.
Manipulador de rota Webhook para estado do pedido Next.js
O sucesso do pagamento na IU Next.js não é a fonte da verdade. Um Route Handler verifica as assinaturas do Stripe e atualiza o pedido ou o estado do direito antes do cumprimento.
Estados de sucesso, cancelamento e erro do Next.js
Lide com cartões recusados, check-out cancelado, falhas de rede e 3-D Secure incompleto para que a UI Next.js não deixe o cliente em uma página morta.
Casos de uso
Quando Integração Stripe para Next.js encaixa
Loja Next.js ou site de reserva existente
Você já recebe pedidos ou reservas no Next.js e precisa finalizar a compra do cartão sem reescrever o catálogo ou o fluxo de reservas.
Agência entregando site de cliente Next.js para produção
Você precisa de um caminho Stripe sustentável em Next.js, fonte no repositório do cliente e uma substituição de chave ativa documentada em vez de um protótipo Next.js único.
Aplicativo SaaS ou associação Next.js
O aplicativo Next.js deve coletar um primeiro pagamento ou atualizar uma forma de pagamento enquanto as assinaturas e faturas permanecem em seu servidor e no Stripe Billing, se você já as utiliza.
Mercado Next.js ou pagamentos de serviço posteriormente
Comece com cobranças do cliente no aplicativo Next.js. O Stripe Connect ou as cobranças de destino podem ter escopo separado se seu modelo de mercado Next.js precisar deles.
Demo
Visualização do fluxo de checkout Next.js Stripe
Visualize o caminho de checkout do Next.js: carrinho ou ação de pagamento, checkout ou 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
Como a integração Stripe para Next.js é entregue
Fluxo de trabalho complementar padrão do Bacodo, com verificações específicas do Next.js e Stripe para App Router, Route Handlers e sua camada de dados existente.
01
Selecione Next.js Stripe
Confirme a integração do Stripe para Next.js e se o checkout do primeiro dia está hospedado no Checkout ou no elemento de pagamento.
02
Verificação de compatibilidade Next.js
Revise a versão Next.js, App Router vs Pages Router, UI de checkout existente, banco de dados e se você já tem uma conta Stripe.
03
Integrar ao Next.js
Adicione Stripe.js, páginas de checkout, manipuladores de rota para sessões ou PaymentIntents e um manipulador de webhook assinado.
04
Configurar o aplicativo Next.js
Conecte chaves de teste Next.js, endpoint de webhook e configuração de servidor específica do ambiente.
05
Teste o caminho de pagamento Next.js
Execute cartões de teste Stripe, 3-D Secure, caminhos de cancelamento/recusa e confirmação de webhook no aplicativo Next.js.
06
Entregar a fonte Next.js
Forneça a fonte Next.js, notas de configuração e uma lista de verificação de chaves ativas. A implementação do Next.js é sua para manter.
Arquitetura
Como o Stripe se conecta a um projeto Next.js
O navegador Next.js nunca se comunica com Stripe com uma chave secreta. Checkout ou Payment Element usa um segredo do cliente de um Route Handler. Stripe notifica seu webhook Next.js antes de você preencher.
Página Next.jsStripe.js/Check-outManipulador de rotaStripe PaymentIntentsManipulador de rota do webhookBanco de dados/estado do pedido
Tecnologias suportadas
O que Integração Stripe para Next.js realmente usa
Roteador de aplicativo Next.js
O Next.js estável atual com App Router é o padrão. O Pages Router pode ter escopo se for isso que seu repositório Next.js já usa.
Stripe.js e Stripe Node SDK
Stripe.js oficial no cliente Next.js e stripe no servidor para sessões, PaymentIntents e verificação de webhook.
Sua camada de dados Next.js
As atualizações de pedidos ou direitos permanecem no banco de dados ou API que seu aplicativo Next.js já usa. Não substituímos seu back-end por um serviço exclusivo do Bacodo.
Conta Stripe para o aplicativo Next.js
Sua conta Stripe, chaves de teste e ativas usadas por Next.js, endpoint de webhook e eventos do Dashboard. As taxas de processamento do Stripe permanecem com o Stripe.
Configuração de hospedagem Next.js necessária
Um host que pode executar manipuladores de rota Next.js e receber webhooks Stripe (por exemplo, Vercel ou um servidor Node). A exportação somente estática não é suficiente para este caminho de checkout.
O que está incluído
O que o Stripe Integration para Next.js inclui
- Integração no projeto Next.js existente
- Código fonte completo em seu repositório
- Configuração do ambiente e do manipulador de rotas
- Checkout ou elemento de pagamento mais alterações de webhook necessárias para este caminho de checkout
- Fluxos de pagamento Next.js testados antes da entrega
- 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 banco de dados ou CMS se você não tiver um local para armazenar o estado do pedido
- Marketplace Connect, produtos de faturamento personalizados ou substituição de compra no aplicativo, a menos que seja definido como trabalho personalizado
Pricing
Integração Stripe para preços Next.js
Este preço é apenas para a plataforma Next.js. Ele não usa preços complementares Django ou Flutter.
Integração Stripe para Next.js
Adicione pagamentos Stripe prontos para produção a um aplicativo Next.js existente e mantenha o código-fonte.
Requisitos
- Projeto Next.js existente
- Acesso ao Stripe Test Mode
$145
pagamento únicoNext.js
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 de Next.js
Entrega estimada de Next.js
A integração típica de checkout do Next.js Stripe tem escopo após a verificação de compatibilidade do Next.js. A linha do tempo depende da interface de usuário e da camada de dados atuais do Next.js.
Testado em Next.js antes da entrega
Cartões de modo de teste, caminhos 3-D Secure, cancelamento e recusa são exercidos no aplicativo Next.js antes de entregarmos.
Os segredos do Stripe ficam de fora dos componentes do cliente Next.js
As chaves secretas de distribuição e os segredos de assinatura do webhook permanecem no ambiente do servidor. O navegador Next.js recebe apenas uma chave publicável e segredos de cliente de curta duração.
Verificação de webhook para pedidos Next.js
O webhook Route Handler Next.js verifica as assinaturas Stripe antes de atualizar o pedido ou o estado de direito.
Nenhuma reivindicação de segurança Next.js não verificável
Não reivindicamos certificação PCI, fraude zero ou taxas de aprovação garantidas. Os dados do cartão Next.js são coletados por meio do Stripe Checkout ou do Payment Element, e não de um formulário de cartão personalizado que armazenamos.
FAQ
Perguntas frequentes
O que inclui o Stripe Integration para Next.js?
Stripe Integration for Next.js inclui Stripe.js, Checkout ou Payment Element em sua página de checkout Next.js existente, criação de PaymentIntent ou Checkout Session em Route Handlers, um manipulador de webhook assinado, cobertura de teste e notas de transferência. Você recebe a fonte Next.js em seu projeto. As taxas do Stripe e sua conta Stripe são separadas.
Você integrará o Stripe ao nosso aplicativo Next.js existente?
Sim. Stripe Integration for Next.js foi desenvolvido para um projeto Next.js que você já possui. Ajustamos a finalização da compra e o ponto de entrada do pagamento em suas rotas e UI atuais do Next.js, em vez de enviar um aplicativo de demonstração separado como entrega.
O Stripe Integration for Next.js requer um servidor?
Sim para um caminho Next.js Stripe de produção. PaymentIntents, Checkout Sessions e a chave secreta devem residir no servidor. O navegador Next.js recebe apenas uma chave publicável e um segredo do cliente. Uma exportação Next.js somente estática não pode hospedar esse caminho do webhook.
Quais pacotes Stripe o Stripe Integration for Next.js usa?
Stripe Integration for Next.js usa Stripe.js oficial no cliente e o Stripe Node SDK em Next.js Route Handlers. Não envolvemos o checkout do Next.js em um plug-in não documentado, a menos que você exija explicitamente um.
A integração do Stripe para Next.js é compatível com Apple Pay e Google Pay?
Sim, quando sua conta Stripe, verificação de domínio e dispositivos os suportam. Em Next.js, os botões da carteira são de escopo opcional. Check-out de cartão ou elemento de pagamento em Next.js continua sendo o substituto padrão.
O Pages Router está incluído no Stripe Integration para Next.js?
A integração padrão do Stripe para o escopo Next.js é App Router. As rotas da API do Pages Router podem ser incluídas se for isso que seu repositório Next.js já usa e nós concordamos durante a verificação de compatibilidade do Next.js.
O Stripe Integration for Next.js pode cobrar pagamentos de assinatura?
O cliente Next.js pode confirmar um PaymentIntent ou iniciar uma sessão de Checkout através do Stripe.js. Produtos recorrentes do Stripe Billing, portal do cliente e lógica de fatura estão disponíveis no servidor. O trabalho Next.js com muitas assinaturas pode precisar de um orçamento personalizado.
Onde ficam as chaves publicáveis e secretas do Stripe em um aplicativo Next.js?
O navegador Next.js usa apenas a chave publicável Stripe. A chave secreta e o segredo de assinatura do webhook permanecem nas variáveis de ambiente do servidor usadas pelos Route Handlers. Stripe Integration for Next.js não coloca chaves secretas em componentes do cliente.
Como o modo de teste Stripe e o modo ao vivo funcionam em Next.js?
Implementamos primeiro o Stripe Integration para Next.js nas chaves de teste e nos cartões de teste do Stripe. A ativação é uma chave documentada e uma transferência de webhook em seu ambiente de servidor Stripe Dashboard e Next.js, não uma ativação de licença complementar.
Como o Stripe Integration for Next.js lida com 3-D Secure/SCA?
Stripe Checkout e Payment Element lidam com 3-D Secure por meio de Stripe.js. A página Next.js deve manter o fluxo de checkout ativo até que Stripe retorne um status final; Stripe Integration for Next.js conecta esses estados explicitamente.
Os webhooks Stripe são necessários para a finalização da compra do Next.js?
Sim para cumprimento após Checkout Next.js ou elemento de pagamento. A UI Next.js não é a fonte da verdade. Um Route Handler 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 Next.js atual com Stripe?
Sim. Stripe Integration for Next.js normalmente mantém seu produto, carrinho e botão de pagamento Next.js e abre o Checkout ou monta o elemento de pagamento a partir dessa ação. Um formulário de cartão Next.js personalizado que toca dados PAN brutos está fora do escopo padrão porque Checkout ou Payment Element é o caminho PCI mais seguro.
O preço do Stripe Integration for Next.js 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 Next.js é a implementação em seu projeto Next.js, não uma licença de pagamento Bacodo.
A integração do Stripe para Next.js substituirá a compra no aplicativo da Apple ou do Google?
Não. Os produtos digitais vendidos em uma loja de aplicativos muitas vezes ainda exigem IAP. Stripe Integration for Next.js é para checkout do Stripe em um site ou aplicativo da web Next.js onde Stripe é um caminho de pagamento permitido para o seu tipo de produto.
Podemos personalizar recibos e metadados do Stripe em Next.js?
Sim. Os metadados da sessão PaymentIntent ou Checkout, 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 Next.js existente durante o Stripe Integration for Next.js.
Qual suporte Next.js está incluído após a transferência do Stripe?
A fonte Next.js 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 Next.js, e não no trabalho de recurso Next.js não relacionado.
Como as atualizações do Stripe.js ou Stripe API são tratadas no Next.js?
Durante a janela de 30 dias, ajudamos com falhas na integração entregue do Next.js causadas por uma alteração documentada no Stripe ou no Stripe.js. As atualizações contínuas do pacote Next.js 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 Next.js de produção?
Documentamos como ler o status da sessão PaymentIntent ou Checkout, logs do Stripe Dashboard e entrega de webhook do caminho de checkout Next.js. O suporte de 30 dias inclui recusas de solução de problemas, quedas do 3-D Secure e chaves mal configuradas para o fluxo Next.js entregue.
Quais versões do Next.js são compatíveis com Stripe Integration for Next.js?
Confirmamos sua versão Next.js, App Router ou Pages Router e tempo de execução do Node em relação ao Stripe SDK que fixamos no momento da integração. Tempos de execução Next.js 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 Next.js?
30 dias após a entrega ser incluída para o caminho Next.js Stripe entregue. O suporte técnico estendido é opcional por 20% do preço complementar do Next.js e cobre mais seis meses de ajuda técnica na mesma integração do Next.js, não na construção de um novo produto.
Integração Stripe para Next.js
Adicione pagamentos Stripe prontos para produção ao seu aplicativo Next.js existente, mantenha o código-fonte e pule a construção do checkout do zero.
$145