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

Copiar página

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
# Available as a gem
sudo gem install stripe
Gemfile
# 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.

# 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/v3/"></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.
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
Precisa de ajuda? Fale com o suporte.
Participe do nosso programa de acesso antecipado.
Confira nosso changelog.
Dúvidas? Fale com a equipe de vendas.
LLM? Read llms.txt.
Powered by Markdoc
Code quickstart
Guias relacionados
API Elements Appearance
Mais cenários de pagamento
Como funcionam os cartões
Produtos usados
Payments
Elements
Checkout