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 integração de pagamentos personalizada incorporando componentes de IU ao seu site usando o Stripe Elements. Compare esta integração com as outras formas de integração da Stripe.

O código do lado do cliente e do lado do servidor cria um formulário de checkout que aceita várias formas de pagamento.

Para ver como o Link funciona para um usuário recorrente, digite o e-mail demo@stripe.com. Para ver como o Link funciona durante um novo cadastro, insira qualquer outro e-mail e preencha o restante do formulário. Esta demonstração só exibe o Google Pay ou Apple Pay se você tiver um cartão ativo com qualquer uma das carteiras.

Esforço de integração

API

Tipo de integração

Combine componentes de IU em um fluxo de pagamento personalizado

Personalização da IU

Personalização em nível de CSS com a API Appearance

Você tem interesse em usar o Stripe Tax, descontos, envio ou conversão de moedas?

A Stripe tem uma integração com o Payment Element que gerencia impostos, descontos, frete e conversão de moedas para você. Consulte a página de criação de checkout para saber mais.

Set up Stripe
Server-side

Primeiro, crie uma conta Stripe ou entre.

Use our official libraries to access the Stripe API from your application:

Criar um PaymentIntent
Lado do servidor

Observação

Se quiser renderizar o Payment Element antes de criar um PaymentIntent, consulte Coletar detalhes do pagamento antes de criar um Intent.

O objeto PaymentIntent representa sua intenção de recolher o pagamento de um cliente e rastreia tentativas de cobrança e alterações de estado ao longo do processo de pagamento.

Criar o PaymentIntent

Crie um PaymentIntent no servidor com um valor e uma moeda. Na versão mais recente da API, especificar o parâmetro automatic_payment_methods é opcional porque a Stripe habilita sua funcionalidade por padrão. Você pode gerenciar formas de pagamento no Dashboard. A Stripe processa a devolução de formas de pagamento qualificadas com base em fatores como valor, moeda e fluxo de pagamento da transação.

A Stripe usa suas configurações de formas de pagamento para exibir as formas de pagamento que você habilitou. Para ver como as formas de pagamento aparecem para os clientes, informe um ID de transação ou defina um valor e moeda de pedido no Dashboard. Para sobrepor formas de pagamento, liste manualmente as que você gostaria de ativar usando o atributo payment_method_types.

Observação

Sempre decida o valor a ser cobrado no lado do servidor, um ambiente confiável, e não no lado do cliente. Isso evita que clientes mal-intencionados escolham os próprios preços.

Recuperar o segredo do cliente

O PaymentIntent inclui um segredo do cliente que o lado do cliente usa para concluir com segurança o processo de pagamento. Você pode usar abordagens diferentes para enviar a senha do cliente ao lado do cliente.

Recupere o segredo do cliente de um endpoint do servidor usando a função fetch do navegador. Essa abordagem é melhor quando o lado do cliente é um aplicativo com uma única página, principalmente se criado com uma estrutura de front-end moderna como o React. Crie o endpoint do servidor que envia o segredo do cliente:

Em seguida, obtenha o segredo do cliente com JavaScript no lado do cliente:

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

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 diversas formas de pagamento.

O Payment Element contém um iframe que envia com segurança os dados de pagamento à Stripe por uma conexão HTTPS. Evite colocar o Payment Element dentro de outro iframe porque algumas formas de pagamento exigem redirecionamento para outra página para confirmação do pagamento.

Se você optar por usar um iframe e quiser aceitar Apple Pay ou Google Pay, o iframe deve ter o atributo de permissão definido como "payment *".

O endereço da página de checkout deve começar com https:// em vez de http:// para que sua integração funcione. Você pode testar a integração sem usar HTTPS, mas lembre-se de habilitar HTTPS quando estiver pronto para aceitar pagamentos em tempo real.

Configurar o Stripe.js

O Payment Element está automaticamente disponível como um recurso do Stripe.js. Inclua o script Stripe.js em sua página de checkout adicionando-o ao head do arquivo HTML. Sempre carregue Stripe.js diretamente de js.stripe.com para manter a conformidade com PCI. Não inclua o script em um pacote nem hospede pessoalmente uma cópia dele.

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

Crie uma instância de Stripe com o seguinte JavaScript em sua página de checkout:

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'
);

Adicione o Element Pagamento à sua página de pagamentos

O Payment Element precisa de um lugar para residir na sua página de pagamentos. Crie um node DOM vazio (contêiner) com um ID único no seu formulário de pagamento:

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

Quando o formulário anterior for carregado, crie uma instância do Payment Element e monte-a no nó DOM do contêiner. Passe o segredo do cliente da etapa anterior em options quando criar a instância do Elements:

Administre cuidadosamente o segredo do cliente, pois ele pode finalizar a cobrança. Não registre em log, incorpore em URLs nem exponha esse segredo a ninguém, exceto para o próprio cliente.

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

O Payment Element renderiza um formulário dinâmico que permite ao cliente escolher uma forma de pagamento. Para cada forma de pagamento, o formulário solicita automaticamente que o cliente preencha todos os dados de pagamento necessários.

Personalizar a aparência

Personalize o Payment Element para corresponder ao design do seu site, passando o objeto appearance para options ao criar o provedor do Elements.

Solicitar endereços

Por padrão, o Payment Element coleta apenas os detalhes necessários do endereço de cobrança. Para coletar o endereço de cobrança completo (por exemplo, para calcular o imposto para mercadorias e serviços digitais) ou o endereço de entrega de um cliente, use o Address Element.

Solicitar token de comerciante do Apple Pay

Se tiver configurado sua integração para aceitar pagamentos Apple Pay, recomendamos configurar a interface do Apple Pay para retornar um token de comerciante que habilite transações iniciadas por comerciante (MIT). Solicite o tipo de token de comerciante pertinente no Payment Element.

OpcionalSalvar e recuperar formas de pagamento do cliente

OpcionalLink na sua página de checkout
Lado do cliente

OpcionalObter atualizações do servidor
Lado do cliente

Enviar o pagamento para a Stripe
Lado do cliente

Use stripe.confirmPayment para concluir o pagamento utilizando os detalhes do Payment Element. Forneça um return_url a essa função para indicar para onde a Stripe deve redirecionar o usuário após a conclusão do pagamento. Seu usuário pode ser redirecionado primeiro para um site intermediário, como uma página de autorização bancária, antes de ser redirecionado para o return_url. Os pagamentos com cartão são redirecionados imediatamente para o return_url quando um pagamento é finalizado.

Se não quiser redirecionar pagamentos com cartão após a conclusão do pagamento, defina redirecionar como if_required. Isso somente redireciona os clientes que fazem checkout com formas de pagamento baseadas em redirecionamento.

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

Verifique se o return_url corresponde a uma página no seu site que fornece o status do pagamento. Quando a Stripe redireciona o cliente para o return_url, nós fornecemos os seguintes parâmetros de consulta de URL:

Parâmetro	Descrição
`payment_intent`	O identificador único do `PaymentIntent`.
`payment_intent_client_secret`	O segredo do cliente do objeto `PaymentIntent`.

Cuidado

Se você tiver ferramentas que rastreiam a sessão do cliente no navegador, pode ser necessário adicionar o domínio stripe.com à lista de exclusão de referenciadores. Os redirecionamentos fazem com que algumas ferramentas criem novas sessões, o que impede que você rastreie a sessão completa.

Use um dos parâmetros de consulta para recuperar o PaymentIntent. Inspecione o status do PaymentIntent para decidir o que mostrar aos clientes. Você também pode anexar seus próprios parâmetros de consulta ao fornecer o return_url, que persiste durante o processo de redirecionamento.

status.js
// Initialize Stripe.js using your publishable key
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});

Processar eventos pós-pagamento
Lado do servidor

Stripe envia um evento payment_intent.succeeded quando o pagamento é concluído. Use a ferramenta Dashboard webhook ou siga o guia de webhooks para receber esses eventos e executar ações, como enviar um e-mail de confirmação do pedido ao cliente, registrar a venda em um banco de dados ou iniciar um fluxo de trabalho de envio.

Escute esses eventos em vez de aguardar um retorno de chamada do cliente. No cliente, o consumidor pode fechar a janela do navegador ou sair do aplicativo antes da execução do retorno de chamada, o que permite que clientes mal-intencionados manipulem a resposta. Configurar sua integração para escutar eventos assíncronos é o que permite a você aceitar diferentes tipos de formas de pagamento com uma única integração.

Além de gerenciar o evento payment_intent.succeeded, recomendamos gerenciar esses outros eventos ao coletar pagamentos com o Element Pagamento:

Evento	Descrição	Ação
payment_intent.succeeded	Enviado quando um cliente conclui um pagamento com êxito.	Envie ao cliente uma confirmação de pedido e processe o pedido.
payment_intent.processing	Enviado quando um cliente inicia um pagamento, mas o pagamento ainda precisa ser concluído. Esse evento costuma ser enviado quando um cliente inicia um débito bancário. Ele é seguido por um evento `payment_intent.succeeded` ou `payment_intent.payment_failed` no futuro.	Envie ao cliente uma confirmação do pedido que indica que o pagamento está pendente. Para produtos digitais, pode ser necessário executar o pedido antes de aguardar a conclusão do pagamento.
payment_intent.payment_failed	Enviado quando um cliente tenta fazer um pagamento, mas o pagamento falha.	Se um pagamento passa de `processing` para `payment_failed`, ofereça ao cliente outra tentativa para pagar.

Teste sua integração

Para testar sua integração de pagamentos personalizada:

Crie um Payment Intent e recupere o segredo do cliente.
Preencha os dados de pagamento com um método da tabela a seguir.
- 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.
Envie o pagamento para a Stripe. Você será redirecionado para return_url.
Acesse o Dashboard e procure o pagamento na página Transações. Se o seu pagamento for bem-sucedido, ele aparecerá na lista.
Clique no pagamento para ver mais detalhes, como 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ão	Cenário	Como 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.

OpcionalAdicionar formas de pagamento

Divulgue a Stripe para seus clientes

A Stripe coleta informações sobre interações do cliente com o Elements para fornecer serviços a você, evitar fraudes e melhorar os serviços. Isso inclui o uso de cookies e endereços IP para identificar quais Elements o cliente visualizou durante uma única sessão de checkout. Você é responsável por divulgar e obter todos os direitos e consentimentos necessários para que a Stripe use os dados dessas maneiras. Para saber mais, acesse nossa central de privacidade.

Aceitar um pagamento

Aceitar pagamentos online com segurança

Esforço de integração

Tipo de integração

Personalização da IU

Você tem interesse em usar o Stripe Tax, descontos, envio ou conversão de moedas?

Set up StripeServer-side

Criar um PaymentIntentLado do servidor

Observação

Criar o PaymentIntent

Observação

Recuperar o segredo do cliente

Coletar dados de pagamentoLado do cliente

Configurar o Stripe.js

Adicione o Element Pagamento à sua página de pagamentos

Personalizar a aparência

Solicitar endereços

Solicitar token de comerciante do Apple Pay

OpcionalSalvar e recuperar formas de pagamento do cliente

OpcionalLink na sua página de checkoutLado do cliente

OpcionalObter atualizações do servidorLado do cliente

Enviar o pagamento para a StripeLado do cliente

Cuidado

Processar eventos pós-pagamentoLado do servidor

Teste sua integração

OpcionalAdicionar formas de pagamento

Divulgue a Stripe para seus clientes

Veja também

Set up Stripe
Server-side

Criar um PaymentIntent
Lado do servidor

Coletar dados de pagamento
Lado do cliente

OpcionalLink na sua página de checkout
Lado do cliente

OpcionalObter atualizações do servidor
Lado do cliente

Enviar o pagamento para a Stripe
Lado do cliente

Processar eventos pós-pagamento
Lado do servidor