Como adicionar Stripe Checkout a um aplicativo Next.js

Stripe é uma plataforma de processamento de pagamentos que permite adicionar uma página de checkout pré-construída a um site e aceitar e gerenciar pagamentos online. É amplamente popular devido à sua facilidade de uso, extensa documentação, suporte para pagamentos locais, opções de personalização e marca, assinaturas, faturamento e prevenção de fraudes.

Usando o Stripe, você pode aceitar pagamentos de várias fontes, incluindo cartões de crédito e débito, Apple Pay e Google Pay.

Adicionando Stripe Checkout a um aplicativo Next.js

Você pode integrar o checkout Stripe com aplicativos criados com diferentes tecnologias, incluindo Next.js.

Este tutorial pressupõe que você tenha um site de comércio eletrônico Next.js configurado e fornece apenas um guia sobre como adicionar checkout Stripe ao site.

Configurando uma conta Stripe e recuperando chaves de API

Para usar o checkout Stripe, você precisa criar uma conta Stripe e obter as chaves API. As chaves de API consistem em uma chave publicável e uma chave secreta, que você usará para autenticar solicitações de seu aplicativo para a Stripe API.

Siga estas etapas para configurar uma conta Stripe:

1. Vou ao Site da Stripe e clique no botão "Inscreva-se".
2. Digite seu e-mail, nome completo, país e senha e clique no botão "Criar conta".
3. Verifique seu e-mail seguindo as instruções no e-mail que o Stripe lhe enviará.
4. No painel de distribuição, clique em “Ativar pagamentos” e responda às perguntas para concluir o processo de configuração da conta. Essas perguntas podem ser sobre o nome da empresa, endereço e informações bancárias. Para fins de desenvolvimento, use o modo de teste.
5. Copie as chaves de API da guia “Desenvolvedores” para o arquivo .env na pasta do aplicativo.

Agora você poderá acessar a conta Stripe usando as chaves API.

Instalando o pacote Stripe npm

Execute este comando para instalar o pacote Stripe npm.

faixa de instalação npm

Importe a biblioteca Stripe para a página do componente de checkout.

importar Listra de'listra';

Na pasta API, crie um novo arquivo chamado arquivo checkout-session.js. Inicialize o objeto Stripe com as chaves API que você recuperou de seu painel Stripe.

const listra = exigir('listra')(process.env. STRIPE_SECRET_KEY);

Na função do manipulador, obtenha os itens a serem retirados dos parâmetros do corpo.

exportarpadrãoassíncronofunçãomanipulador(req, res) {
const { item } = req.body;
};

Crie um objeto de sessão de checkout para a função do manipulador e passe os itens.

const sessão = aguardam stripe.checkout.sessions.create({
 Payment_method_types: ['cartão'],
 itens_de_linha: [
 item,
 ],
 modo: 'pagamento',
 url_sucesso: `${req.headers.origin}/?success=true`,
 cancel_url: `${req.headers.origin}/?canceled=true`,
});

Aqui está o que os nós que você está passando para o objeto de sessão significam:

• Payment_method_types: os tipos de método de pagamento que a sessão de checkout aceita. Navegue pela lista de métodos de pagamento disponíveis no Listagem de documentação.
• line_items: uma lista de itens que o usuário está comprando.
• modo: O modo da Sessão de Check-out. Se os itens de check-out incluírem pelo menos um item recorrente, passe “assinatura”.
• url_sucesso: O URL Stripe redirecionará os usuários se o pagamento for bem-sucedido
• cancel_url: O URL Stripe redirecionará os usuários se eles cancelarem o pagamento.

Ao todo, o arquivo checkout-session.js deve ficar assim:

exportarpadrãoassíncronofunçãomanipulador(req, res) {
se (req.método 'PUBLICAR') {
const { carrinho } = req.body;
tentar {
const sessão = aguardam stripe.checkout.sessions.create({
 itens_de_linha: [
 carrinho
 ],
 modo: 'pagamento',
 url_sucesso: `${req.headers.origin}/success`,
 cancel_url: `${req.headers.origin}/cancele`,
 });
 res.redirect(303, sessão.url);
 } pegar (err) {
 res.status (err.statusCode || 500).json (err.mensagem);
 }
 } outro {
 res.setHeader('Permitir', 'PUBLICAR');
 res.status(405).fim('Método não permitido');
 }
}

Esta função agora usa o try/catch para redirecionar os usuários quando ocorre um erro durante o checkout. Agora que você criou a rota da API que processará o pagamento, a próxima etapa é criar um componente de checkout para lidar com o processo de checkout.

Confira esta postagem em criando rotas de API em Next.js para obter uma explicação mais detalhada das rotas da API Next.js.

Criando um componente de checkout

Para processar o checkout, você precisa instalar a biblioteca @stripe/stripe-js usando o NPM.

npm install @stripe/stripe-js

A biblioteca @stripe/stripe-js é um utilitário de carregamento que o ajudará a carregar a instância Stripe.js.

Assim que a instalação terminar, crie um novo arquivo em seu diretório /components denominado /components/checkout.js. Em seguida, chame a função loadstripe da biblioteca @stripe/stripe-js, passando a chave publicável como um argumento.

importar { loadStripe } de'@stripe/stripe-js';
const stripePromise = loadStripe(
 process.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

loadstripe() retorna uma promessa que resolve com um objeto Stripe recém-criado assim que Stripe.js é carregado.

Em seguida, adicione uma função para criar uma sessão de checkout no componente.

exportarpadrãofunçãoConfira({carrinho}) {
const handleCheckout = assíncrono () => {
tentar {
const listra = aguardam faixaPromessa;
const checkoutSession = aguardam axios.post("/api/sessão de checkout", {
 carrinho,
 });
const resultado = aguardam stripe.redirectToCheckout({
 id da sessão: checkoutSession.data.id,
 });
se (resultado.erro) {
 alerta (resultado.erro.mensagem);
 }
 } pegar (erro) {
console.log (erro);
 }
 };
retornar (


 </div>
 );
}

Esta função usa Axios para chamar a API você criou na pasta /api para recuperar a sessão de checkout.

Adicione um botão de checkout na declaração de retorno que acionará a função handleCheckout quando clicado.

 Confira
</button>

Você pode chamar o componente de checkout na página do carrinho.

Manipulando os redirecionamentos do Stripe

Na rota da API de checkout, você definiu uma URL de sucesso e uma URL de cancelamento que a faixa deve redirecionar um usuário quando o processo for bem-sucedido ou falhar. A URL de cancelamento é mapeada para a rota /cancel, enquanto a URL de sucesso é mapeada para a rota /success. Adicione dois componentes na pasta /pages chamada success e cancele para lidar com essas URLs.

Em pages/success.js, adicione o componente de sucesso.

exportarpadrãofunçãoSucesso() {
retornar<div>Finalização da compra com sucessodiv>;
}

Em pages/cancel.js, adicione o componente de cancelamento.

exportarpadrãofunçãoCancelar() {
retornar<div>Ocorreu um erro durante a finalização da compradiv>;
}

Agora, o Stripe redirecionará para qualquer uma dessas páginas, dependendo do status do checkout.

Se você estiver usando o Next.js 13, consulte este tutorial em como a pasta app funciona em Next.js 13 para mudar da pasta /pages.

Opções adicionais de personalização para a página de checkout

No painel do Stripe, você pode personalizar a página de checkout para combinar com a aparência da sua marca. Você pode adicionar um logotipo, ícone, cor da marca, cor de destaque e até mesmo usar seu próprio domínio personalizado. Além disso, ao criar a sessão de checkout, você pode adicionar os métodos de pagamento de sua preferência e também especificar o idioma que o Stripe deve exibir na página de checkout. Todas essas opções permitem que você personalize o processo de checkout de acordo com sua aplicação.

Por que usar Stripe para a página de checkout?

Embora você possa criar seu próprio serviço de processamento de checkout, usar uma plataforma de pagamento como o Stripe geralmente é uma opção melhor. Stripe checkout ajuda a reduzir o tempo de desenvolvimento, permitindo que você comece a aceitar pagamentos em pouco tempo.

Além disso, você obtém recursos adicionais, como conformidade com PCI, recuperação de carrinho, recursos de desconto e a capacidade de coletar informações de remessa e enviar faturas pós-pagamento.