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_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -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_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -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_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -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_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -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.

Notify your customer that the payment failed and direct them to the payment form you made in Step 1 where they can enter new card details. Send that new PaymentMethod ID to your server to attach to the Customer object and make the payment again.

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_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -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

Setting setup_future_usage to on_session indicates to Stripe that you wish to save the card for later, without triggering unnecessary authentication.

Stripe provides test cards you can use in test mode to simulate different cards’ behavior. Use these cards with any CVC, postal code, and expiry date in the future.