Salvar dados de pagamento durante o pagamento

Saiba como aceitar um pagamento e salvar os dados de pagamento do seu cliente para compras futuras.

Observação

O suporte a formas de pagamento salvas usando Elements e a API Checkout Sessions inclui apenas cartões. Ele não aceita outras formas de pagamento salvas, como contas bancárias.

Ativar formas de pagamento salvas

Para permitir que um cliente salve a forma de pagamento para uso futuro, especifique o parâmetro saved_payment_method_options.payment_method_save quando criar a sessão do Checkout.

Para salvar uma forma de pagamento, é preciso ter um Customer. Passe um cliente existente ou, para criar um cliente, defina a sessão do Checkout customer_creation como always.

Depois de criar a sessão do Checkout, use o segredo do cliente retornado na resposta para criar sua página de checkout.

Cuidado

As leis globais de privacidade são complicadas e cheia de nuances. Antes de implementar a capacidade de armazenar dados de forma de pagamento do cliente, trabalhe com sua equipe jurídica para assegurar que ela esteja em conformidade com sua estrutura de privacidade e conformidade.

Na maioria dos casos, você precisa obter o consentimento do cliente antes de salvar as formas de pagamento. O exemplo a seguir mostra como fazer isso usando uma caixa de seleção.

index.html
<label>
  <input type="checkbox" id="save-payment-method-checkbox" />
  Save my payment information for future purchases
</label>
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>

Indique se o cliente deu consentimento à Stripe para chamar confirm ao passar o parâmetro savePaymentMethod. Quando você salva os dados de pagamento de um cliente, é responsável pelo cumprimento de todas as leis, regulamentos e regras de rede aplicáveis.

checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  const checkbox = document.getElementById('save-payment-method-checkbox');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    const savePaymentMethod = checkbox.checked;
    checkout.confirm({savePaymentMethod}).then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
});

Reutilizar uma forma de pagamento salva anteriormente

Você pode reexibir formas de pagamento salvas anteriormente para o cliente utilizar durante o checkout.

Identificar seu cliente

Cada forma de pagamento salva é vinculada a um objeto Customer. Antes de criar a sessão do Checkout, autentique o cliente e passe o ID do cliente correspondente à sessão do Checkout.

Processar formas de pagamento salvas

Use a matriz savedPaymentMethods no frontend para processar as formas de pagamento disponíveis do cliente.

Observação

A matriz savedPaymentMethods inclui apenas as formas de pagamento que têm allow_redisplay definidas como always. Siga as etapas para obter o consentimento do cliente, o que garante que allow_redisplay esteja definido corretamente.

index.html
<div id="saved-payment-methods"></div>

checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const container = document.getElementById('saved-payment-methods');
  checkout.session().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
});

Confirmar com uma forma de pagamento salva

Quando o cliente tiver selecionado uma forma de pagamento salva e estiver pronto para concluir o checkout, chame confirm, passando o ID do paymentMethod.

index.html
<button id="pay-button">Pay</button>

checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  button.addEventListener('click', () => {
    checkout.confirm({paymentMethod: selectedPaymentMethod}).then((result) => {
      if (result.error) {
        // Confirmation failed. Display the error message.
      }
    });
  });
});

Salvar dados de pagamento durante o pagamento

Saiba como aceitar um pagamento e salvar os dados de pagamento do seu cliente para compras futuras.

Observação

Ativar formas de pagamento salvas

Obter autorização

Cuidado

Reutilizar uma forma de pagamento salva anteriormente

Identificar seu cliente

Processar formas de pagamento salvas

Observação

Confirmar com uma forma de pagamento salva