Salvar um cartão sem autenticação do banco
A Stripe permite que você colete detalhes dos cartões e cobre o cliente posteriormente. Em algumas regiões, os bancos exigem uma segunda forma de autenticação, como a inserção de um código enviado para o celular. Essa etapa adicional diminui a conversão quando o cliente não está usando o site ou aplicativo, porque ele não está disponível para autenticar a compra.
Se você faz negócios principalmente nos EUA e no Canadá, os bancos não exigem autenticação, então você pode seguir esta integração mais simples. Essa integração não estará em conformidade em países que exigem autenticação para salvar cartões (por exemplo, Índia). Dessa forma, a criação dessa integração significa que a expansão para outros países ou o acréscimo de outras formas de pagamento exigirá mudanças significativas. Saiba como salvar cartões que exigem autenticação.
Conformidade
Você é responsável por sua conformidade com todas as leis, regulamentos e regras de rede aplicáveis ao salvar os dados de pagamento de um cliente. Por exemplo, se você quiser salvar a forma de pagamento para uso futuro, como cobrar quando não estiver usando seu site ou aplicativo. Adicione termos ao seu site ou aplicativo que definam como você planeja salvar os dados da forma de pagamento e permitir que os clientes aceitem. Se quiser cobrar deles quando estiverem offline, verifique se seus termos incluem o seguinte:
- A concordância do cliente para que você inicie um pagamento ou uma série de pagamentos em nome dele para transações específicas.
- O momento e a frequência previstos para os pagamentos (por exemplo, se são cobranças de parcelas agendadas, pagamentos de assinatura ou recargas não agendadas).
- Como você determina o valor do pagamento.
- Sua política de cancelamento, se a forma de pagamento for para um serviço de assinatura.
Não se esqueça de manter um registro por escrito da concordância do cliente com esses termos.
Coletar dados do cartãoDo lado do cliente
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.
Observação
Sempre colete um código postal para aumentar as taxas de aceitação de cartão e reduzir fraudes.
O Card Element de uma única linha coleta e envia automaticamente o código postal do cliente à Stripe. Se você criar um formulário de pagamento com Elements divididos (Card Number, Expiry e CVC), adicione um campo de entrada separado para o código postal do cliente.
const stripe = Stripe(
); const elements = stripe.elements(); const cardElement = elements.create('card'); cardElement.mount('#card-element');'pk_test_TYooMQauvdEDq54NiTphI7jx'
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.
Configurar a StripeLado do servidor
Use nossas bibliotecas oficiais para acessar a API da Stripe no seu aplicativo:
Salvar o cartãoLado do servidor
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.
Se você já tem um cliente, pode anexar o PaymentMethod ao objeto.
Nesse momento, associe o ID do cliente e o ID da forma de pagamento à sua representação interna de um cliente, se houver.
Cobrar o cartão salvoLado do servidor
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.
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.
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.
Gerenciar erros do cartão
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.
Se definir setup_future_usage como on_session
, você indica à Stripe que deseja salvar o cartão para uso futuro sem acionar uma autenticação desnecessária.
Testar a integração
A Stripe oferece cartões de teste para usar no modo de teste e simular o comportamento de diferentes cartões. Use esses cartões com qualquer CVC, código postal e data de vencimento 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 recusa com o código authentication_required . |
Atualize sua integração para aceitar autenticação de cartões
Essa integração recusa cartões que exigem autenticação durante o pagamento. Se começarem a aparecer pagamentos no Dashboard com a indicação Failed
, é recomendável passar para uma integração superior. A integração global da Stripe aceita esses pagamentos, em vez de recusá-los automaticamente.