Pagamentos em cartão com autenticação bancária

Crie uma integração mais simples com limitações regionais.

Essa integração oferece suporte a empresas que aceitam apenas cartões dos EUA e do Canadá. É mais simples no início, mas não se expande para atender uma base global de clientes.

Como funciona a integração?

Qual a diferença entre esta integração e a global?

Empresas em crescimento ou que já são multinacionais devem usar a integração global da Stripe para aceitar solicitações de autenticação de dois fatores e permitir que o cliente use mais formas de pagamento.

Criar um formulário de checkout
Lado do cliente

O Elements, parte do Stripe.js, oferece componentes inseríveis na IU com o objetivo de coletar dados de cartão dos clientes. A Stripe os hospeda e os coloca em seu formulário de pagamento em iframes, para que os dados do cartão do cliente nunca se misturem com seu código.

Primeiro, inclua o Stripe.js no cabeçalho de todas as páginas do seu site.

<script src="https://js.stripe.com/v3/"></script>

Incluir o script em todas as páginas do site permite aproveitar as funções antifraude avançadas da Stripe e a detecção de comportamentos anormais de navegação.

Requisitos de segurança

Este script sempre deve ser carregado diretamente de js.stripe.com para manter a conformidade com PCI. Não é possível inserir o script em pacotes ou hospedar sua própria cópia.

Ao usar o Elements, todos os dados de pagamento são enviados por uma conexão HTTPS segura.

O endereço da página que contém o Elements também precisa começar com https://, e não http://. Saiba como obter certificados SSL e integrá-los ao seu servidor para habilitar uma conexão HTTPS segura na documentação sobre segurança.

Adicione o Elements à sua página

Em seguida, você precisa de uma conta Stripe. Cadastre-se aqui.

Crie elementos DOM vazios (contêineres) com IDs exclusivos no seu formulário de pagamento.

payment.html
<form id="payment-form">
  <div id="card-element"><!-- placeholder for Elements --></div>
  <button id="card-button">Submit Payment</button>
  <p id="payment-result"><!-- we'll pass the response from the server here --></p>
</form>

Crie uma instância do objeto Stripe, fornecendo sua chave de API publicável como o primeiro parâmetro. Em seguida, crie uma instância do objeto Elements e use-a para montar um elemento Card no contêiner de elementos DOM vazio da página.

client.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

Use stripe.createPaymentMethod no seu cliente para coletar os dados do cartão e criar um PaymentMethod quando o cliente enviar o formulário de pagamento. Envie o ID do PaymentMethod para seu servidor.

client.js
const form = document.getElementById("payment-form");

var resultContainer = document.getElementById('payment-result');

// cardElement is defined in the previous step
cardElement.on('change', function(event) {
  if (event.error) {
    resultContainer.textContent = event.error.message;
  } else {
    resultContainer.textContent = '';
  }
});

form.addEventListener('submit', async event => {
  event.preventDefault();
  resultContainer.textContent = '';
  const result = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
  });
  handlePaymentMethodResult(result);
});

const handlePaymentMethodResult = async ({ paymentMethod, error }) => {
  if (error) {
    // An error happened when collecting card details, show error in payment form
    resultContainer.textContent = result.error.message;
  } else {
    // Send paymentMethod.id to your server (see Step 3)
    const response = await fetch("/pay", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ payment_method_id: paymentMethod.id })
    });

    const responseJson = await response.json();

    handleServerResponse(responseJson);
  }
};

const handleServerResponse = async responseJson => {
  if (responseJson.error) {
    // An error happened when charging the card, show it in the payment form
    resultContainer.textContent = responseJson.error;
  } else {
    // Show a success message
    resultContainer.textContent = 'Success!';
  }
};

Configurar a Stripe
Lado do servidor

Use uma biblioteca oficial para fazer solicitações à API da Stripe pelo seu aplicativo:

Fazer um pagamento
Lado do servidor

Configure um endpoint no seu servidor para receber a solicitação do cliente.

A Stripe usa um objeto PaymentIntent para representar sua intenção de coletar o pagamento de um cliente, acompanhando suas tentativas de cobrança e alterações no estado do pagamento durante todo o processo.

Sempre defina o valor a ser cobrado no servidor, que é um ambiente seguro, e não no cliente. Dessa forma, você evita que clientes mal-intencionados escolham os próprios preços.

Crie um endpoint HTTP para responder à solicitação do AJAX da etapa 1. Nesse endpoint, você decide quanto cobrar do cliente. Para criar um pagamento, crie um PaymentIntent usando o ID de PaymentMethod da etapa 1 com o código a seguir:

Aviso

Se você configurar error_on_requires_action como true ao confirmar um pagamento, a Stripe recusa automaticamente o pagamento se ele solicitar autenticação de dois fatores do usuário.

Resposta da API Payment Intents

Quando você faz um pagamento com a API, a resposta inclui o status do PaymentIntent. Se o pagamento estiver correto, o status será succeeded.

{
  "id": "pi_0FdpcX589O8KAxCGR6tGNyWj",
  "object": "payment_intent",
  "amount": 1099,
  "charges": {
    "object": "list",
    "data": [
      {
        "id": "ch_GA9w4aF29fYajT",
        "object": "charge",
        "amount": 1099,
        "refunded": false,
        "status": "succeeded",
      }
    ]
  },
  "client_secret": "pi_0FdpcX589O8KAxCGR6tGNyWj_secret_e00tjcVrSv2tjjufYqPNZBKZc",
  "currency": "usd",
  "last_payment_error": null,
  "status": "succeeded",
}

Se o pagamento for recusado, a resposta conterá um código e uma mensagem erro. Veja este exemplo de um pagamento recusado porque o cartão exigia autenticação de dois fatores.

{
  "error": {
    "code": "authentication_required",
    "decline_code": "authentication_not_handled",
    "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
    "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
    "payment_intent": {
      "id": "pi_1G8JtxDpqHItWkFAnB32FhtI",
      "object": "payment_intent",
      "amount": 1099,
      "status": "requires_payment_method",
      "last_payment_error": {
        "code": "authentication_required",
        "decline_code": "authentication_not_handled",
        "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
        "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
        "type": "card_error"
      },
    },
    "type": "card_error"
  }
}

Testar a integração

A Stripe fornece vários cartões de teste que você pode usar em uma área restrita para assegurar que essa integração esteja pronta. Use-os com qualquer CVC, código postal e data de validade futura.

Número	Descrição
	Finaliza e processa o pagamento imediatamente.
	Sempre falha, com o código de recusa `insufficient_funds`.
	Exige autenticação, que nesta integração falha com o código de recusa `authentication_not_handled`.

Veja a lista completa de cartões de teste.

Atualizar sua integração para aceitar autenticação de cartões

Parabéns! Você finalizou uma integração de pagamento para pagamentos básicos no cartão. Observe que esta integração recusa os cartões que solicitam autenticação durante o pagamento.

Se começarem a aparecer pagamentos no Dashboard com a indicação Failed, é recomendável fazer upgrade da integração superior. A integração global da Stripe aceita esses pagamentos, em vez de recusá-los automaticamente.