Salvar a forma de pagamento de um cliente sem fazer pagamento

Saiba como salvar a forma de pagamento de um cliente usando um SetupIntent.

A API Setup Intents salva os dados de pagamento do cliente sem um pagamento inicial. É uma função útil para integrar um cliente agora e deixar tudo configurado para pagamentos futuros com o cliente fora de sessão.

Use esta integração para configurar pagamentos recorrentes ou criar pagamentos avulsos de valores a serem definidos mais tarde, talvez depois de o cliente receber seu serviço.

Transações com apresentação de cartão

As transações com apresentação do cartão, como a coleta de dados do cartão usando o Stripe Terminal, usam um processo diferente para salvar a forma de pagamento. Para obter mais informações, consulte a documentação do Terminal.

Conformidade

Você é responsável por cumprir todas as leis, regulamentos e regras de rede aplicáveis ao salvar os dados de pagamento de um cliente. Esses requisitos geralmente se aplicam quando você quer salvar a forma de pagamento do cliente para uso futuro, como exibir a forma de pagamento de um cliente para ele no fluxo de checkout para uma compra futura ou cobrá-lo 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.

Quando salva uma forma de pagamento, você só pode usá-la para o uso específico incluído nos seus termos. Para cobrar uma forma de pagamento quando o cliente está offline e salvá-la como opção para compras futuras, não se esqueça de obter o consentimento do cliente para esse uso específico. Por exemplo, inclua a caixa de seleção “Salvar minha forma de pagamento para uso futuro” para coletar consentimento.

Para cobrar os clientes quando eles estiverem offline, certifique-se de que seus termos incluam 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 usada em um serviço de assinatura.

Não se esqueça de manter um registro por escrito da concordância do cliente com esses termos.

Observação

Se você precisar usar confirmação manual no lado do servidor, ou se sua integração exigir a apresentação de formas de pagamento separadamente, consulte o nosso guia alternativo.

Configurar a Stripe
Lado do servidor

Primeiro, crie uma conta Stripe ou entre.

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

Ativar formas de pagamento

Veja suas configurações de formas de pagamento e habilite as formas de pagamento que deseja aceitar. Você precisa de pelo menos uma forma de pagamento habilitada para criar um SetupIntent.

Por padrão, a Stripe habilita cartões e outras formas de pagamento predominantes que podem ajudar você a alcançar mais clientes, mas recomendamos ativar outras formas de pagamento que sejam relevantes para sua empresa e seus clientes. Consulte Suporte a formas de pagamento para saber mais sobre os produtos e formas de pagamento aceitos, e nossa página de preços para ver as tarifas.

Criar um cliente
Lado do servidor

Para configurar uma forma de pagamento para pagamentos futuros, você deve anexá-la a um Customer. Crie um objeto Customer quando seu cliente criar uma conta com sua empresa. Os objetos Customer permitem reutilizar formas de pagamento e rastrear vários pagamentos.

Criar um SetupIntent
Lado do servidor

Observação

Se quiser renderizar o Payment Element antes de criar um SetupIntent, consulte Coletar detalhes do pagamento antes de criar um Intent.

Um SetupIntent é um objeto que representa sua intenção de configurar uma forma de pagamento do cliente para pagamentos futuros. As formas de pagamento mostradas aos clientes durante o processo de checkout também estão incluídas no SetupIntent. Você pode permitir que a Stripe extraia automaticamente as formas de pagamento das suas configurações do Dashboard, ou você pode listá-las manualmente.

Se sua integração não exige uma opção baseada em código para oferecer formas de pagamento, a Stripe recomenda a opção automática. A Stripe avalia a moeda, as restrições e outros parâmetros dessas formas de pagamento para criar a lista das que são aceitas. Priorizamos as que aumentam a conversão e são mais relevantes para a moeda e a localização do cliente. As formas de pagamento de menor prioridade são ocultas em um menu de estouro.

Algumas formas de pagamento não podem ser salvas para pagamentos futuros, e os clientes não as veem como opções na configuração de pagamentos futuros. Para obter mais detalhes sobre como gerenciar formas de pagamento, consulte Opções de integração de formas de pagamento.

Você também pode criar um SetupIntent com automatic_payment_methods habilitado, e o SetupIntent é criado usando as formas de pagamento configuradas no Dashboard. Especificar o parâmetro automatic_payment_methods é opcional porque a Stripe habilita sua funcionalidade por padrão na versão mais recente da API.

Você pode gerenciar formas de pagamento no Dashboard. A Stripe processa a devolução de formas de pagamento qualificadas com base em fatores como valor, moeda e fluxo de pagamento da transação.

Recuperar o segredo do cliente

O SetupIntent inclui um segredo do cliente que o lado do cliente usa para concluir com segurança o processo de pagamento. Você pode usar abordagens diferentes para enviar a senha do cliente ao lado do cliente.

Recupere o segredo do cliente de um endpoint do servidor usando a função fetch do navegador. Essa abordagem é melhor quando o lado do cliente é um aplicativo com uma única página, principalmente se criado com uma estrutura de front-end moderna como o React. Crie o endpoint do servidor que envia o segredo do cliente:

Em seguida, obtenha o segredo do cliente com JavaScript no lado do cliente:

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Uso do Radar

Ao salvar a forma de pagamento de um cliente sem um pagamento inicial, o Radar não age no SetupIntent por padrão. Se quiser ativá-lo como padrão, acesse as configurações do Radar e habilite Use o Radar em formas de pagamento salvas para uso futuro.

Coletar dados de pagamento
Lado do cliente

Você está com tudo pronto para coletar dados de pagamento no cliente com o Payment Element. O Payment Element é um componente de IU integrado que simplifica a coleta de dados de pagamento para uma ampla variedade de formas de pagamento.

O Payment Element contém um iframe que envia dados de pagamento à Stripe com segurança por uma conexão HTTPS. O endereço da página de checkout precisa começar com https:// em vez de http:// para que sua integração funcione. Você pode testar sua integração sem fazer isso, mas lembre-se de habilitar o HTTPS quando estiver tudo pronto para você aceitar pagamentos em tempo real.

Configurar Stripe.js

O Payment Element está disponível automaticamente como um recurso do Stripe.js. Inclua o script do Stripe.js em sua página de checkout adicionando-o ao head do arquivo HTML. Sempre carregue Stripe.js diretamente de js.stripe.com para manter a conformidade com PCI. Não inclua o script em um pacote nem hospede você mesmo uma cópia dele.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Crie uma instância da Stripe com o seguinte JavaScript na sua página de checkout:

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Adicione o Payment Element à sua página de configuração de pagamentos

O Payment Element precisa de um lugar para residir na sua página de configuração de pagamentos. Crie um nó DOM vazio (contêiner) com um ID único no seu formulário de pagamento:

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

Quando o formulário anterior for carregado, crie uma instância do Element Pagamento e monte-o no nó DOM do contêiner. Passe o segredo do cliente da etapa anterior nas options ao criar a instância do Elements:

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements using the SetupIntent's client secret
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

O Payment Element renderiza um formulário dinâmico que permite ao cliente escolher uma forma de pagamento. Para cada forma de pagamento, o formulário solicita automaticamente que o cliente preencha todos os dados de pagamento necessários.

Personalizar a aparência

Personalize o Payment Element para corresponder ao design do seu site, passando o objeto appearance para options ao criar o provedor do Elements.

Solicitar token de comerciante do Apple Pay

Se você aceita pagamentos com Apple Pay, recomendamos configurar a interface do Apple Pay para retornar um token de comerciante que habilite transações iniciadas por comerciantes (MIT). Solicite o tipo de token de comerciante relevante no Payment Element. O exemplo a seguir mostra uma solicitação para o token de comerciante de pagamentos diferidos.

checkout.js
const paymentElement = elements.create('payment', {
  applePay: {
    deferredPaymentRequest: {
      paymentDescription: 'My deferred payment',
      managementURL: 'https://example.com/billing',
      deferredBilling: {
        amount: 2500,
        label: 'Deferred Fee',
        deferredPaymentDate: new Date('2024-01-05')
      },
    }
  },
  // Other options
});

Configurar moeda

Ao usar SetupIntents com automatic_payment_methods , você pode especificar a moeda ao criar o Payment Element. O Payment Element processa as formas de pagamento habilitadas que aceitam a moeda informada. Para obter mais detalhes, consulte a documentação do Payment Element.

Solicitar endereços

Por padrão, o Payment Element coleta apenas os detalhes necessários do endereço de cobrança. Para coletar o endereço de cobrança completo (por exemplo, para calcular o imposto para mercadorias e serviços digitais) ou o endereço de entrega de um cliente, use o Address Element.

OpcionalLink na sua página de checkout
Lado do cliente

Permita que seu cliente faça checkout mais rápido usando o Link no Payment Element. Você pode preencher automaticamente os dados de qualquer cliente que use o Link, mesmo que ele não tenha salvo os dados no Link em outra empresa. A integração padrão do Payment Element inclui uma solicitação do Link no formulário do cartão. Para gerenciar o Link no Payment Element, acesse as configurações de forma de pagamento.

Autentique ou inscreva-se no Link diretamente no Payment Element durante o checkout

Coletar um endereço de e-mail do cliente para autenticação ou inscrição no Link

Opções de integração

Há duas formas de integrar o Link com o Payment Element. A Stripe recomenda passar um endereço de e-mail do cliente para o Payment Element, se disponível. Para escolher uma das opções, lembre-se de considerar o funcionamento do fluxo de checkout:

Opção de integração	Fluxo de checkout	Descrição
Passar um endereço de e-mail do cliente para o Payment Element Recommended	Seu cliente insere o endereço de e-mail antes de chegar à página de checkout (em uma etapa anterior de criação de conta, por exemplo). Você prefere usar seu próprio campo de entrada de e-mail.	Passe programaticamente o endereço de e-mail de um cliente para o Payment Element. Nesse cenário, um cliente se autentica no Link diretamente no formulário de pagamento, em vez de em um componente de IU separado.
Coletar o endereço de e-mail de um cliente no Payment Element	Seus clientes inserem o e-mail e se autenticam ou se inscrevem no Link diretamente no Payment Element durante o checkout.	Se um cliente não se inscreveu no Link e escolhe uma forma de pagamento aceita no Payment Element, ele é solicitado a salvar seus dados usando o Link. Para aqueles que já se inscreveram, o Link preenche automaticamente os dados de pagamento.

OpcionalSalvar e recuperar formas de pagamento do cliente

Você pode configurar o Payment Element para salvar as formas de pagamento do seu cliente para uso futuro. Esta seção mostra como integrar o recurso de formas de pagamento salvas, que permite que o Payment Element:

Solicitar consentimento dos compradores para salvar uma forma de pagamento
Salvar formas de pagamento quando os compradores derem consentimento
Exibir formas de pagamento salvas aos compradores para compras futuras
Atualize automaticamente cartões perdidos ou vencidos quando são substituídos pelos compradores

O Payment Element e uma caixa de seleção forma de pagamento salva

Salve formas de pagamento.

O Payment Element com uma forma de pagamento salva selecionada

Reutilize uma forma de pagamento salva anteriormente.

Habilite o salvamento da forma de pagamento no Payment Element

Crie uma CustomerSession no seu servidor informando o ID do cliente e habilitando o componente payment_element na sua sessão. Configure quais recursos de forma de pagamento salvos você deseja habilitar. Por exemplo, habilitar payment_method_save exibe uma caixa de seleção que permite aos clientes salvar os dados de pagamento para uso futuro.

Você pode especificar setup_future_usage em um PaymentIntent ou sessão do Checkout para substituir o comportamento padrão de salvar formas de pagamento. Isso garante que você salve automaticamente a forma de pagamento para uso futuro, mesmo que o cliente não opte por salvá-la explicitamente.

Cuidado

Se você permitir que os compradores removam formas de pagamento salvas habilitando payment_method_remove, isso afetará as assinaturas que dependem dessa forma de pagamento. A remoção da forma de pagamento desvincula o PaymentMethod desse Cliente.

Sua instância do Elements usa o segredo do cliente da CustomerSession para acessar as formas de pagamento salvas desse cliente. Gerencie erros corretamente ao criar a CustomerSession. Se ocorrer um erro, você não precisará fornecer o segredo do cliente da CustomerSession para a instância do Elements, pois é opcional.

Crie a instância do Elements usando os segredos do cliente para SetupIntent e CustomerSession. Em seguida, use essa instância do Elements para criar um Payment Element.

checkout.js
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-intent-and-customer-session", {
  method: "POST"
});

const {
  customer_session_client_secret: customerSessionClientSecret
} = await res.json();

const elementsOptions = {
  clientSecret: '{{CLIENT_SECRET}}',
  customerSessionClientSecret,
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Quando você confirma o SetupIntent, o Stripe.js controla automaticamente a allow_redisplay definida no PaymentMethod, dependendo de o cliente ter marcado a caixa para salvar os dados de pagamento.

Detectar a seleção de uma forma de pagamento salva

Para controlar o conteúdo dinâmico quando uma forma de pagamento salva é selecionada, ouça o evento change do Payment Element, que é preenchido com a forma de pagamento selecionada.

checkout.js
paymentElement.on('change', function(event) {
  if (event.value.payment_method) {
    // Control dynamic content if a saved payment method is selected
  }
})

Envie os dados do pagamento para a Stripe
Lado do cliente

Use stripe.confirmSetup para concluir a configuração usando os detalhes coletados pelo Element Pagamento. Forneça um return_url a esta função para que a Stripe possa redirecionar o usuário após a conclusão da configuração. Primeiro, poderemos redirecioná-lo a um site intermediário, como uma página de autorização do banco, antes de redirecioná-lo ao return_url.

Se o seu cliente salvar os dados do cartão, nós o redirecionaremos imediatamente para o return_url quando a configuração estiver concluída. Se você não quiser redirecionar para pagamentos com cartão, defina redirecionar como if_required. Isso somente redireciona os clientes que fazem checkout com formas de pagamento baseadas em redirecionamento.

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmSetup({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/account/payments/setup-complete',
    }
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

Certifique-se de que o return_url corresponda a uma página no seu site que fornece o status do SetupIntent. A Stripe fornece os seguintes parâmetros de consulta de URL para verificar o status quando redirecionamos o cliente ao return_url. Você também pode anexar nossos próprios parâmetros de consulta ao fornecer o return_url, e eles persistem por meio do processo de redirecionamento.

Parâmetro	Descrição
`setup_intent`	O identificador único do `SetupIntent`.
`setup_intent_client_secret`	O segredo do cliente do objeto `SetupIntent`.

Você pode usar stripe.retrieveSetupIntent para recuperar o SetupIntent usando o parâmetro de consulta setup_intent_client_secret. A confirmação do SetupIntent salva o ID do PaymentMethod resultante (em result.setupIntent.payment_method) no Customer informado.

status.js
// Initialize Stripe.js using your publishable key
const stripe = Stripe('{PUBLISHABLE_KEY}');

// Retrieve the "setup_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'setup_intent_client_secret'
);

// Retrieve the SetupIntent
stripe.retrieveSetupIntent(clientSecret).then(({setupIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the SetupIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (setupIntent.status) {
    case 'succeeded': {
      message.innerText = 'Success! Your payment method has been saved.';
      break;
    }

    case 'processing': {
      message.innerText = "Processing payment details. We'll update you when processing is complete.";
      break;
    }

    case 'requires_payment_method': {
      message.innerText = 'Failed to process payment details. Please try another payment method.';

      // Redirect your user back to your payment page to attempt collecting
      // payment again

      break;
    }
  }
});

Cuidado

Se você tiver ferramentas que rastreiam a sessão do cliente no navegador, pode ser necessário adicionar o domínio stripe.com à lista de exclusão de referenciadores. Os redirecionamentos fazem com que algumas ferramentas criem sessões, o que impede que você rastreie a sessão completa.

Cobrar mais tarde a forma de pagamento salva
Lado do servidor

Conformidade

Você é responsável por cumprir todas as leis, regulamentos e regras de rede aplicáveis ao salvar os dados de pagamento de um cliente. Quando exibir formas de pagamento passadas ao seu cliente final para compras futuras, liste as formas de pagamento para as quais obteve consentimento do cliente para salvar os dados para esse uso futuro específico. Para diferenciar entre formas de pagamento vinculadas a clientes que podem e não podem ser apresentados ao seu cliente final como uma forma de pagamento salva para compras futuras, use o parâmetro allow_redisplay.

Quando estiver pronto para cobrar do cliente fora da sessão, use os IDs do cliente e do PaymentMethod para criar uma PaymentIntent. Para encontrar uma forma de pagamento para cobrar, liste as formas de pagamento associadas ao seu cliente. Este exemplo lista cartões, mas você pode listar qualquer tipo aceito.

Quando tiver os IDs de Customer e PaymentMethod, crie um PaymentIntent com o valor e moeda do pagamento. Outros parâmetros que precisam ser definidos para o pagamento fora de sessão:

Defina off_session como true para indicar que o cliente não está em seu fluxo de checkout durante uma tentativa de pagamento e não pode executar uma solicitação de autenticação feita por um parceiro, como emissor de cartão, banco ou outra instituição de pagamento. Se, durante o fluxo de checkout, um parceiro solicitar autenticação, a Stripe solicitará isenções usando informações do cliente de uma transação na sessão anterior. Se as condições de isenção não forem atendidas, o PaymentIntent pode gerar um erro.
Defina o valor da propriedade confirm do PaymentIntent como true, para que a confirmação ocorra imediatamente após a criação do PaymentIntent.
Defina payment_method com o ID do PaymentMethod e customer com o ID do Cliente.

Quando uma tentativa de pagamento falha, a solicitação também falha (código de status HTTP 402) e o status do PaymentIntent fica sendo requires_payment_method. Você deverá notificar o cliente para que ele acesse novamente seu aplicativo para finalizar o pagamento (envie um e-mail ou notificação pelo aplicativo, por exemplo).

Verifique o código do erro indicado pela biblioteca da API Stripe. Se o pagamento falhou com o código authentication_required, use o segredo do cliente do PaymentIntent recusado com confirmPayment para permitir que o cliente autentique o pagamento.

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    // The client secret of the PaymentIntent
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

Observação

stripe.confirmPayment pode levar vários segundos para finalizar. Durante esse período, desative o formulário para impedir que seja reenviado e apresente um indicador de espera, como uma ampulheta. Se receber um erro, mostre-o ao cliente, reative o formulário e oculte o indicador de espera. Se o cliente precisar executar etapas adicionais para finalizar o pagamento, como autenticação, o Stripe.js o orientará durante a execução.

Se o pagamento falhar por outros motivos, como insuficiência de fundos, envie o cliente para uma página de pagamento para que ele insira outra forma de pagamento. Você pode reaproveitar o PaymentIntent atual para tentar repetir o pagamento com os dados do novo pagamento.

Testar a integração

Use os detalhes de pagamento de teste e a página de redirecionamento de teste para verificar sua integração. Clique nas guias abaixo para ver os detalhes de cada forma de pagamento.

Forma de pagamento	Cenário	Como testar
Cartão de crédito	A configuração do cartão é realizada e não precisa de autenticação.	Preencha o formulário do cartão de crédito usando o número de cartão de crédito `4242 4242 4242 4242` com qualquer validade, CVC e código postal.
Cartão de crédito	O cartão precisa de autenticação para a configuração inicial e depois pode ser utilizado em pagamentos subsequentes.	Preencha o formulário do cartão de crédito usando o número do cartão de crédito `4000 0025 0000 3155` com qualquer validade, CVC e código postal.
Cartão de crédito	O cartão precisa de autenticação para a configuração inicial e também precisa de autenticação para pagamentos subsequentes.	Preencha o formulário do cartão de crédito usando o número do cartão de crédito `4000 0027 6000 3184` com qualquer validade, CVC e código postal.
Cartão de crédito	O cartão é recusado durante a configuração.	Preencha o formulário do cartão de crédito usando o número do cartão de crédito `4000 0000 0000 9995` com qualquer validade, CVC e código postal.

Teste a cobrança de um PaymentMethod de débito SEPA

Confirmar o SetupIntent usando iDEAL, Bancontact ou Sofort, gera um débito automático SEPA PaymentMethod. O débito automático SEPA é uma forma de pagamento de notificação posterior que muda para um estado de processing intermediário antes de mudar vários dias depois para um estado succeeded ou requires_payment_method.

Defina payment_method.billing_details.email como um dos seguintes valores para testar as transições de status do PaymentIntent. Você pode incluir seu próprio texto personalizado no início do endereço de e-mail seguido por um sublinhado. Por exemplo, test_1_generatedSepaDebitIntentsFail@example.com resulta em um PaymentMethod de débito automático SEPA que sempre falha quando usado com um PaymentIntent.

Endereço de e-mail	Descrição
`generatedSepaDebitIntentsSucceed@example.com`	O status do PaymentIntent muda de `processing` para `succeeded`.
`generatedSepaDebitIntentsSucceedDelayed@example.com`	O status do PaymentIntent muda de `processing` para `succeeded` após pelo menos três minutos.
`generatedSepaDebitIntentsFail@example.com`	O status do PaymentIntent muda de `processing` para `requires_payment_method`.
`generatedSepaDebitIntentsFailDelayed@example.com`	O status do PaymentIntent muda de `processing` para `requires_payment_method` após no mínimo três minutos.
`generatedSepaDebitIntentsSucceedDisputed@example.com`	O status do PaymentIntent muda de `processing` para `succeeded`, mas uma contestação é imediatamente criada.

OpcionalPersonalizar o layout
Lado do cliente

Você pode personalizar o layout do Payment Element (sanfona ou guias) para que se ajuste à sua interface de checkout. Para obter mais informações sobre cada uma das propriedades, consulte elements.create.

Você pode começar a usar os recursos de layout passando um type de layout e outras propriedades opcionais ao criar o Payment Element:

const paymentElement = elements.create('payment', {
  layout: {
    type: 'accordion',
    defaultCollapsed: false,
    radios: true,
    spacedAccordionItems: false
  }
});

A imagem a seguir é o mesmo Payment Element renderizado usando diferentes configurações de layout:

Três experiências de formulário de checkout

Layouts do Payment Element

OpcionalApple Pay e Google Pay
Lado do cliente

Quando você habilita pagamentos com cartão, exibimos o Apple Pay e o Google Pay para clientes cujo ambiente cumpre as condições para apresentação de carteira digital. Para aceitar pagamentos dessas carteiras, você também precisa:

Habilitá-las nas configurações de formas de pagamento. O Apple Pay é habilitado por padrão.
Registre seu domínio.

Testes regionais
Índia

O Stripe Elements não aceita o Google Pay ou Apple Pay para contas e clientes da Stripe na Índia. Portanto, não é possível testar sua integração do Google Pay ou Apple Pay se o endereço IP do testador estiver na Índia, mesmo que a conta Stripe esteja localizada fora da Índia.

Divulgue a Stripe para seus clientes

A Stripe coleta informações sobre interações do cliente com o Elements para fornecer serviços a você, evitar fraudes e melhorar os serviços. Isso inclui o uso de cookies e endereços IP para identificar quais Elements o cliente visualizou durante uma única sessão de checkout. Você é responsável por divulgar e obter todos os direitos e consentimentos necessários para que a Stripe use os dados dessas maneiras. Para saber mais, acesse nossa central de privacidade.

Salvar a forma de pagamento de um cliente sem fazer pagamento

Saiba como salvar a forma de pagamento de um cliente usando um SetupIntent.

Transações com apresentação de cartão

Conformidade

Observação

Configurar a StripeLado do servidor

Ativar formas de pagamento

Criar um clienteLado do servidor

Criar um SetupIntentLado do servidor

Observação

Recuperar o segredo do cliente

Uso do Radar

Coletar dados de pagamentoLado do cliente

Configurar Stripe.js

Adicione o Payment Element à sua página de configuração de pagamentos

Personalizar a aparência

Solicitar token de comerciante do Apple Pay

Configurar moeda

Solicitar endereços

OpcionalLink na sua página de checkoutLado do cliente

Opções de integração

OpcionalSalvar e recuperar formas de pagamento do cliente

Habilite o salvamento da forma de pagamento no Payment Element

Cuidado

Detectar a seleção de uma forma de pagamento salva

Envie os dados do pagamento para a StripeLado do cliente

Cuidado

Cobrar mais tarde a forma de pagamento salvaLado do servidor

Conformidade

Observação

Testar a integração

Teste a cobrança de um PaymentMethod de débito SEPA

OpcionalPersonalizar o layoutLado do cliente

OpcionalApple Pay e Google PayLado do cliente

Testes regionaisÍndia

Divulgue a Stripe para seus clientes

Veja também

Configurar a Stripe
Lado do servidor

Criar um cliente
Lado do servidor

Criar um SetupIntent
Lado do servidor

Coletar dados de pagamento
Lado do cliente

OpcionalLink na sua página de checkout
Lado do cliente

Envie os dados do pagamento para a Stripe
Lado do cliente

Cobrar mais tarde a forma de pagamento salva
Lado do servidor

OpcionalPersonalizar o layout
Lado do cliente

OpcionalApple Pay e Google Pay
Lado do cliente

Testes regionais
Índia