Pular para o conteúdo
Criar conta
 ou
Entrar
O logotipo da documentação da Stripe
/
Criar conta
Login

Aceitar um pagamento

Aceitar pagamentos online com segurança

Crie um formulário de pagamento ou use uma página de checkout pré-integrada para começar a aceitar pagamentos online.

Crie uma página de checkout no seu site usando o Stripe Elements e a Checkout Sessions, uma integração que gerencia impostos, descontos, tarifas de envio e muito mais.

Localização do cliente
Tamanho
Tema
Layout
Esta demonstração só exibe o Google Pay ou Apple Pay se você tiver um cartão ativo com qualquer uma das carteiras.

Configure o servidor
Lado do servidor

Antes de começar, você precisa se cadastrar para uma conta Stripe.

Use as bibliotecas Stripe oficiais para acessar o API do seu aplicativo.

Command Line
Node
Ruby
PHP
Python
Go
.NET
Java
No results
npm install stripe@18.0.0 --save

Configure o SDK para usar pelo menos a versão de API 2025-03-31.basil.

TypeScript
Node
Ruby
PHP
Python
Go
.NET
Java
No results
// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
import Stripe from 'stripe';
const stripe = new Stripe(
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
, {
  apiVersion: '2025-03-31.basil' as any,
});

Criar uma sessão do Checkout
Lado do servidor

Adicione um endpoint ao seu servidor que cria uma sessão do Checkout e retorna seu segredo do cliente para o frontend. Uma sessão do Checkout representa a sessão do seu cliente enquanto ele paga por compras ou assinaturas avulsas. As sessões do Checkout expiram 24 horas após a criação.

server.ts
TypeScript
Node
Ruby
PHP
Python
Go
.NET
Java
No results
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    // The URL of your payment completion page
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

Configurar o frontend
Lado do cliente

Inclua o script Stripe.js na página de checkout, adicionando-o ao head do seu arquivo HTML. Sempre carregue o Stripe.js diretamente a partir do js.stripe.com para manter a conformidade com PCI. Não insira o script em um pacote nem hospede sua própria cópia.

Você precisará atualizar o Stripe.js da v3 para basil, incluindo a seguinte tag de script <script src="https://js.stripe.com/basil/stripe.js"></script>. Saiba mais sobre o controle de versões do Stripe.js.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Observação

A Stripe fornece um pacote npm que você pode usar para carregar o Stripe.js como um módulo. Veja o projeto no GitHub. A versão 7.0.0 ou posterior é necessária.

Inicialize o Stripe.js.

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
  
'pk_test_TYooMQauvdEDq54NiTphI7jx'
,
);

Inicializar o Checkout
Lado do cliente

Crie uma função fetchClientSecret. Essa função recupera o segredo do cliente do seu servidor e retorna uma promessa que é resolvida com o segredo do cliente. Chame initCheckout, passando fetchClientSecret. initCheckout retorna uma resolução de promessa para uma instância do checkout.

O objeto checkout funciona como a base da página de checkout, contendo dados da sessão do Checkout e métodos para atualizar a sessão.

O objeto retornado por checkout.session() contém os dados de preço. Recomendamos ler e exibir total e lineItems da sessão na IU.

Isso permite ativar novos recursos com alterações mínimas no código. Por exemplo, a adição de preços manuais de moedas não exige alterações na IU se você exibir o total.

checkout.js
const fetchClientSecret = () => {
  return fetch('/create-checkout-session', {method: 'POST'})
    .then((response) => response.json())
    .then((json) => json.checkoutSessionClientSecret);
};
stripe.initCheckout({fetchClientSecret})
  .then((checkout) => {
    const checkoutContainer = document.getElementById('checkout-container');
    checkoutContainer.append(JSON.stringify(checkout.lineItems, null, 2));
    checkoutContainer.append(document.createElement('br'));
    checkoutContainer.append(`Total: ${checkout.session().total.total.amount}`);
  });
index.html
<div id="checkout-container"></div>

Coletar e-mail do cliente
Lado do cliente

Crie uma entrada de e-mail para coletar o endereço de e-mail do cliente. Chame updateEmail quando o cliente terminar a entrada para validar e salvar o endereço de e-mail.

Dependendo do design do seu formulário de checkout, você pode chamar updateEmail das seguintes maneiras:

  • Diretamente antes de enviar o pagamento. Você também pode chamar updateEmail para antecipar a validação, como no desfoque de entrada.
  • Antes de passar para a próxima etapa, como clicar em um botão Salvar, se o formulário incluir várias etapas.
index.html
<input type="text" id="email" />
<div id="email-errors"></div>
checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;
    checkout.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
});

Coletar dados de pagamento
Lado do cliente

Colete dados de pagamento no cliente com o Payment Element. O Payment Element é um componente de IU que simplifica a coleta de dados de pagamento para uma ampla variedade de formas de pagamento.

Primeiro, crie um elemento DOM de contêiner para montar o Payment Element. Em seguida, crie uma instância do Payment Element usando checkout.createPaymentElement e monte-a chamando element.mount, fornecendo um seletor CSS ou o elemento DOM do contêiner.

index.html
<div id="payment-element"></div>
checkout.js
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

Consulte a documentação do Stripe.js para ver quais opções são aceitas.

Você pode personalizar a aparência de todos os Elements passando elementsOptions.appearance ao inicializar o Checkout no frontend.

Envie o pagamento
Lado do cliente

Renderize um botão Pagar que invoque confirm a partir da instância de Checkout para processar o pagamento.

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    checkout.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
});

Teste a integração

  1. Acesse a página de checkout.
  2. Preencha os dados de pagamento com uma forma de pagamento da tabela a seguir. Para pagamentos com cartão:
    • Informe uma data futura qualquer como validade do cartão.
    • Informe qualquer número de 3 dígitos como CVC.
    • Informe qualquer código postal de cobrança.
  3. Envie o pagamento para a Stripe.
  4. Acesse o Dashboard e procure o pagamento na página Transações. Se o seu pagamento for bem-sucedido, ele aparecerá na lista.
  5. Clique no pagamento para ver mais detalhes, como dados de cobrança e a lista de itens comprados. Você pode usar essas informações para executar o pedido.
Número do cartãoCenárioComo testar
O pagamento com cartão é bem-sucedido e não precisa de autenticação.Preencha o formulário do cartão de crédito usando o número do cartão de crédito com qualquer validade, CVC e código postal.
O pagamento com cartão precisa de autenticação.Preencha o formulário do cartão de crédito usando o número do cartão de crédito com qualquer validade, CVC e código postal.
O cartão é recusado com um código de recusa como insufficient_funds.Preencha o formulário do cartão de crédito usando o número do cartão de crédito com qualquer validade, CVC e código postal.
O cartão UnionPay tem um comprimento variável de 13 a 19 dígitos.Preencha o formulário do cartão de crédito usando o número do cartão de crédito com qualquer validade, CVC e código postal.

Consulte Testes para obter mais informações sobre como testar sua integração.

Veja também

Esta página foi útil?
SimNão
Code quickstart
Guias relacionados
API Elements Appearance
Mais cenários de pagamento
Como funcionam os cartões
Produtos usados
Payments
Elements
Checkout