Guia Passo a Passo para Integração de Pagamento Básico

Escrito por Tom em maio 24, 2024. Postado em Integrações.

Integrar um sistema de pagamento em uma aplicação web é essencial para aceitar transações online de maneira segura e eficiente. Este guia fornecerá um passo a passo para integrar um sistema de pagamento básico utilizando a API do Stripe, uma das plataformas de pagamento mais populares.

1. Crie uma Conta no Stripe

Antes de tudo, você precisa de uma conta no Stripe. Siga estes passos:

Vá para o site do Stripe e clique em “Sign up”.
Complete o processo de registro e verificação de conta.
Depois de criar a conta, você terá acesso ao painel de controle do Stripe.

2. Obtenha as Chaves da API

Para integrar a API do Stripe, você precisará das chaves da API, que podem ser encontradas no dashboard:

No painel do Stripe, vá para “Developers” > “API keys”.
Anote a chave pública (Publishable key) e a chave secreta (Secret key).

3. Configurar o Ambiente de Desenvolvimento

Vamos configurar um ambiente Node.js para integrar o Stripe. Certifique-se de ter Node.js e npm instalados.

Inicie um novo projeto Node.js:bash

mkdir stripe-payment
cd stripe-payment
npm init -y

Instale as dependências necessárias:

bash

npm install express stripe body-parser

Crie a Estrutura do Projeto:

bash

touch app.js mkdir public cd public touch index.html success.html cd ..

4. Implementação do Backend (Node.js)

Vamos configurar o servidor para processar os pagamentos.

app.js:

javascript

const express = require('express');
const stripe = require('stripe')('YOUR_SECRET_KEY'); // Substitua pela sua chave secreta
const bodyParser = require('body-parser');

const app = express();
app.use(express.static('public'));
app.use(bodyParser.json());

app.post('/create-checkout-session', async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'Produto Exemplo',
          },
          unit_amount: 2000, // Valor em centavos (2000 = $20.00)
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    success_url: 'http://localhost:3000/success.html',
    cancel_url: 'http://localhost:3000/',
  });

  res.json({ id: session.id });
});

app.listen(3000, () => console.log('Servidor rodando na porta 3000'));

5. Implementação do Frontend

Vamos configurar o frontend para iniciar o pagamento.

public/index.html:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stripe Payment</title>
    <script src="https://js.stripe.com/v3/"></script>
</head>
<body>
    <button id="checkout-button">Pagar</button>
    <script>
        const stripe = Stripe('YOUR_PUBLISHABLE_KEY'); // Substitua pela sua chave pública

        const checkoutButton = document.getElementById('checkout-button');

        checkoutButton.addEventListener('click', () => {
            fetch('/create-checkout-session', {
                method: 'POST',
            })
            .then(response => response.json())
            .then(session => {
                return stripe.redirectToCheckout({ sessionId: session.id });
            })
            .then(result => {
                if (result.error) {
                    alert(result.error.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });
    </script>
</body>
</html>

public/success.html:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Success</title>
</head>
<body>
    <h1>Pagamento bem-sucedido!</h1>
</body>
</html>

6. Executando o Projeto

Para testar sua integração, execute o servidor Node.js:

bash

node app.js

Abra seu navegador e vá para http://localhost:3000. Clique no botão “Pagar” para iniciar o fluxo de pagamento. Se tudo estiver configurado corretamente, você será redirecionado para a página de checkout do Stripe. Após a conclusão do pagamento, você será redirecionado para a página de sucesso.

7. Testando com Cartões de Teste do Stripe

Use os cartões de teste fornecidos pelo Stripe para simular transações durante o desenvolvimento. Um cartão de teste comum é 4242 4242 4242 4242 com qualquer data de validade futura e qualquer CVC.

8. Conclusão

Este guia fornece uma visão geral básica para integrar pagamentos usando a API do Stripe em uma aplicação Node.js. Esta configuração pode ser expandida para incluir funcionalidades mais avançadas, como webhooks para confirmar transações ou integrar outros métodos de pagamento. A documentação oficial do Stripe oferece muitos recursos adicionais para aprimorar e personalizar sua integração de pagamento.