Salvar um cartão sem autenticação do banco

Antes de iniciar este guia, você precisa de uma conta Stripe. Inscreva-se aqui.

Crie uma página de checkout para coletar os detalhes dos cartões de seus clientes. Use o Stripe Elements, uma biblioteca de IU que ajuda você a gerar formulários de pagamento personalizados. Para começar a usar o Elements, inclua a biblioteca Stripe.js com o script a seguir na sua página de checkout.

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

Sempre carregue o Stripe.js diretamente de js.stripe.com para manter a conformidade com PCI. Não insira o script em um pacote nem hospede sua própria cópia.

Para aproveitar melhor as funções avançadas contra fraude da Stripe, inclua este script em todas as páginas do seu site e não apenas na página de checkout. A inclusão do script em cada página permite que a Stripe detecte comportamentos suspeitos que podem indicar fraude durante a navegação do site pelos usuários.

Adicione o Elements à sua página

Para coletar com segurança dados dos cartões dos clientes, o Stripe Elements cria componentes de IU hospedados pela Stripe. Os componentes são colocados no seu formulário de pagamentos, de forma que você não precisa criá-los diretamente. Para estabelecer onde os componentes serão inseridos, crie elementos DOM vazios (contêineres) com IDs exclusivos no formulário de pagamento.

<input id="cardholder-name" type="text">
<!-- placeholder for Elements -->
<div id="card-element"></div>
<div id="card-result"></div>
<button id="card-button">Save Card</button>

Em seguida, crie uma instância do objeto Stripe, fornecendo sua chave de API publicável como o primeiro parâmetro. Depois, crie uma instância do objeto Elements e use-a para montar um elemento card no DOM.

O elemento card simplifica o formulário de pagamento e minimiza o número de campos obrigatórios, inserindo um campo de entrada flexível que coleta com segurança todos os dados necessários do cartão.

Do contrário, combine os Elements cardNumber, cardExpiry e cardCvc para criar um formulário de cartão flexível, com vários campos.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

Um Stripe Element contém um iframe que envia com segurança os dados de pagamento para a Stripe por uma conexão HTTPS. O endereço da página de checkout também deve iniciar com https://, e não http://, para que sua integração funcione.

Você pode testar sua integração sem usar HTTPS. Habilite-o quando estiver pronto para aceitar pagamentos no modo de produção.

const cardholderName = document.getElementById('cardholder-name');
const cardButton = document.getElementById('card-button');
const resultContainer = document.getElementById('card-result');

cardButton.addEventListener('click', async (ev) => {
  const {paymentMethod, error} = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: {
        name: cardholderName.value,
      },
    }
  );

  if (error) {
    // Display error.message in your UI.
    resultContainer.textContent = error.message;
  } else {
    // You have successfully created a new PaymentMethod
    resultContainer.textContent = "Created payment method: " + paymentMethod.id;
  }
});

Envie o ID do PaymentMethod resultante ao seu servidor.

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

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Salve o cartão anexando o PaymentMethod a um cliente. Você pode usar o objeto Customer para armazenar outras informações sobre o cliente, como detalhes de envio e e-mail.

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d payment_method={{PAYMENT_METHOD_ID}}

Se você já tem um cliente, pode anexar o PaymentMethod ao objeto.

curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}}/attach \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}}

Nesse momento, associe o ID do cliente e o ID da forma de pagamento à sua representação interna de um cliente, se houver.

Quando estiver tudo pronto, obtenha os IDs do cliente e da forma de pagamento para fazer a cobrança. Para isso, armazene os IDs no seu banco de dados ou use o ID do cliente para consultar as formas de pagamento disponíveis desse cliente.

curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}} \
  -d type=card

Use os IDs da forma de pagamento e do cliente para criar um novo PaymentIntent. Defina error_on_requires_action como verdadeiro para recusar pagamentos que exigem ações adicionais do cliente, como a autenticação de dois fatores.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true

Quando uma tentativa de pagamento falha, a solicitação também falha com um código de status HTTP 402 e um erro da Stripe. É preciso notificar o cliente para que ele acesse novamente seu aplicativo (enviando um e-mail, por exemplo) para finalizar o pagamento. Verifique o código do Erro indicado pela biblioteca da API da Stripe ou confira o last_payment_error.decline_code do PaymentIntent para entender por que o emissor do cartão recusou o pagamento.

Notifique o cliente de que o pagamento falhou e encaminhe-o ao formulário de pagamento que você criou na Etapa 1, onde ele poderá inserir outros dados de cartão. Envie o novo ID do PaymentMethod ao servidor para anexar ao objeto Customer e fazer o pagamento novamente.

Você também pode criar um PaymentIntent e salvar um cartão, tudo isso em uma única chamada de API, se já tiver criado um cliente.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true \
  -d setup_future_usage=on_session

Definir setup_future_usage como on_session indica à Stripe que deseja salvar o cartão para uso posterior, sem acionar uma autenticação desnecessária.

A Stripe oferece cartões de teste que você pode usar em uma área restrita para simular o comportamento de diferentes cartões. Use esses cartões com qualquer CVC, código postal e data de vencimento futura.