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.

Incorporar um formulário de pagamento pré-integrado ao seu site usando o Stripe Checkout. Veja a comparação dessa integração om outros tipos de integração da Stripe.

Visualização do Checkout integradoVisualização do Checkout integrado
powdur.me

Esforço de integração

Low-code

Tipo de integração

Integre um formulário de pagamento pré-configurado ao seu site

Personalização da IU

Personalização limitada

Use as configurações de marca no Stripe Dashboard para corresponder o Checkout ao design do seu site.

Primeiro, cadastre-se para obter uma conta Stripe.

Use nossas bibliotecas oficiais para acessar a API da Stripe no seu aplicativo:

Command Line
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Criar uma sessão do Checkout
Lado do servidor

No seu servidor, crie uma sessão do Checkout e defina o ui_mode como embedded. Você pode configurar a Sessão do Checkout com itens de linha a incluir e opções como moeda.

Também é possível criar uma sessão do Checkout para um cliente existente, permitindo preencher campos do Checkout com dados de contato conhecidos e unificar o histórico de compras desse cliente.

Para retornar os clientes para uma página personalizada hospedada em seu site, especifique o URL da página no parâmetro return_url. Inclua a variável de modelo {CHECKOUT_SESSION_ID} no URL para recuperar o status da sessão na página de retorno. O Checkout substitui automaticamente a variável pelo ID da Sessão do Checkout antes de fazer o redirecionamento.

Leia mais sobre a configuração da página de retorno e outras opções para personalizar o comportamento de redirecionamento.

Depois de criar a sessão do Checkout, use o client_secret retornado na resposta para montar o Checkout.

Ruby
Python
PHP
Java
Node
Go
.NET
No results
# This example sets up an endpoint using the Sinatra framework.
# To learn more about Sinatra, watch this video: https://youtu.be/8aA9Enb8NVc.
require 'json'
require 'sinatra'
require 'stripe'

# Set your secret key. Remember to switch to your live secret key in production.
# See your keys here: https://dashboard.stripe.com/apikeys
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'


post '/create-checkout-session' do
  session = Stripe::Checkout::Session.create({
    line_items: [{
      price_data: {
        currency: 'usd',
        product_data: {
          name: 'T-shirt',
        },
        unit_amount: 2000,
      },
      quantity: 1,
    }],
    mode: 'payment',
    ui_mode: 'embedded',
    return_url: 'https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}'
  })

  {clientSecret: session.client_secret}.to_json
end

Montar Checkout
Do lado do cliente

O Checkout está disponível como parte do Stripe.js. Inclua o script Stripe.js na página, adicionando-o ao cabeçalho do arquivo HTML. Em seguida, crie um nó DOM vazio (contêiner) para usar na montagem.

index.html
<head>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>
<body>
  <div id="checkout">
    <!-- Checkout will insert the payment form here -->
  </div>
</body>

Inicialize o Stripe.js com sua chave de API publicável.

Crie uma função assíncrona fetchClientSecret que faz uma solicitação ao seu servidor para criar a Sessão do Checkout e recuperar o segredo do cliente. Passe essa função para options quando criar a instância do Checkout:

index.js
// Initialize Stripe.js
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

initialize();

// Fetch Checkout Session and retrieve the client secret
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Initialize Checkout
  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}

O Checkout renderiza em um iframe que envia dados de pagamento com segurança para a Stripe por uma conexão HTTPS.

Erro comum

Evite colocar o Checkout dentro de outro iframe porque algumas formas de pagamento exigem redirecionamento a outra página para confirmação do pagamento.

Personalizar a aparência

Personalize o Checkout para corresponder ao design do seu site, definindo a cor de fundo, a cor do botão, o raio da borda e as fontes nas configurações de marca da sua conta.

Por padrão, o Checkout é renderizado sem preenchimento ou margem externa. Recomendamos usar um elemento de contêiner, como um div para aplicar a margem desejada (for example, 16px em todos os lados).

Exibir uma página de devolução

Depois que o cliente tenta fazer o pagamento, a Stripe o redireciona para uma página de devolução hospedada por você no seu site. Quando criou a sessão do Checkout, você especificou o URL da página de retorno no parâmetro return_url. Leia mais sobre outras opções para personalizar o comportamento de redirecionamento.

Ao renderizar sua página de retorno, recupere o status da Sessão do Checkout usando o ID da Sessão do Checkout no URL. Trate o resultado de acordo com o status da sessão da seguinte forma:

  • complete: o pagamento foi bem-sucedido. Use as informações da sessão do Checkout para renderizar uma página de sucesso.
  • open: o pagamento falhou ou foi cancelado. Remonte o Checkout para que seu cliente possa tentar novamente.
Ruby
Python
PHP
Java
Node
Go
.NET
No results
get '/session-status' do
  session = Stripe::Checkout::Session.retrieve(params[:session_id])

  {status: session.status, customer_email:  session.customer_details.email}.to_json
end
client.js
const session = await fetch(`/session_status?session_id=${session_id}`)
if (session.status == 'open') {
  // Remount embedded Checkout
} else if (session.status == 'complete') {
  // Show success page
  // Optionally use session.payment_status or session.customer_email
  // to customize the success page
}

Formas de pagamento baseadas em redirecionamento

Durante o pagamento, algumas formas de pagamento redirecionam o cliente para uma página intermediária, como uma página de autorização bancária. Quando concluem essa página, a Stripe os redireciona para sua página de retorno.

Saiba mais sobre as formas de pagamento baseadas em redirecionamento e comportamento de redirecionamento.

Gerenciar eventos pós-pagamento

A Stripe envia um evento checkout.session.completed quando um cliente conclui o pagamento de uma sessão do Checkout. Use a ferramenta Dashboard webhook ou siga o guia de webhooks para receber e processar esses eventos, que podem levar você a:

  • Envie um e-mail de confirmação do pedido ao cliente.
  • Registre a venda em banco de dados.
  • Inicie um fluxo de trabalho de envio.

Escute esses eventos em vez de esperar que o cliente seja redirecionado de volta ao seu site. Acionar a execução apenas na página inicial do Checkout não é confiável. Configurar sua integração para escutar eventos assíncronos permite aceitar diferentes tipos de formas de pagamento com uma única integração.

Saiba mais no nosso guia de execução para o Checkout.

Gerencie os seguintes eventos ao coletar pagamentos com o Checkout:

EventoDescriçãoAção
checkout.session.completedEnviado quando um cliente conclui uma sessão do Checkout.Envie ao cliente uma confirmação de pedido e execute o pedido.
checkout.session.async_payment_succeededEnviado quando um pagamento feito com uma forma de pagamento postergada, como débito automático ACH, é bem-sucedido.Envie ao cliente uma confirmação de pedido e execute o pedido.
checkout.session.async_payment_failedEnviado quando ocorre uma falha em um pagamento feito com uma forma de pagamento postergada, como débito automático ACH.Notifique o cliente sobre a falha e traga-o de volta à sessão para tentar pagar novamente.

Teste sua integração

Para testar sua integração do formulário de pagamento integrado:

  1. Crie uma Sessão do Checkout integrada e monte o Checkout na sua página.
  2. Preencha os dados de pagamento com um método da tabela abaixo.
    • 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. Clique em Pagar. Você será redirecionado para o seu return_url.
  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 um resumo do Checkout com dados de faturamento e a lista de itens comprados. Você pode usar esses dados para executar o pedido.

Saiba como testar sua integração.

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