Aceitar um pagamento
Crie um formulário de pagamento ou use uma página de checkout pré-integrada para começar a aceitar pagamentos online.
Crie uma integração de pagamentos personalizada ao incorporar componentes de IU ao seu site usando o Stripe Elements. Veja como essa integração se compara a outros tipos de integração da Stripe.
O código do lado do cliente e do lado do servidor cria um formulário de checkout que aceita várias formas de pagamento.
Esforço de integração
Tipo de integração
Combine componentes de IU em um fluxo de pagamento personalizado
Personalização da IU
Personalização em nível de CSS com a API Appearance
Você tem interesse em usar o Stripe Tax, descontos, envio ou conversão de moedas?
Estamos desenvolvendo uma integração do Payment Element que gerencia impostos, descontos, envio e conversão de moedas. Leia o guia Criação de uma página de checkout para saber mais.
Configurar a StripeLado do servidor
Primeiro, crie uma conta Stripe ou entre.
Use nossas bibliotecas oficiais para acessar a API da Stripe no seu aplicativo:
Criar um PaymentIntentLado do servidor
Observação
Se quiser renderizar o Payment Element antes de criar um PaymentIntent, consulte Coletar detalhes do pagamento antes de criar um Intent.
O objeto PaymentIntent representa sua intenção de recolher o pagamento de um cliente e rastreia tentativas de cobrança e alterações de estado ao longo do processo de pagamento.
Criar o PaymentIntent
Crie um PaymentIntent no seu servidor com um valor e uma moeda. Na versão mais recente da API, especificar o parâmetro automatic_payment_methods
é opcional porque a Stripe habilita sua funcionalidade por padrão. 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.
A Stripe usa suas configurações de forma de pagamento para exibir as formas de pagamento que você habilitou. Para ver como as formas de pagamento aparecem para os clientes, informe um ID de transação ou defina um valor e moeda de pedido no Dashboard. Para sobrepor formas de pagamento, liste manualmente as que você gostaria de ativar usando os payment_method_types.
Na versão mais recente da API, especificar o parâmetro automatic_payment_methods
é opcional porque a Stripe habilita sua funcionalidade por padrão.
Observação
Sempre decida o valor a ser cobrado no lado do servidor, um ambiente confiável, e não no lado do cliente. Isso evita que clientes mal-intencionados escolham os próprios preços.
Recuperar o segredo do cliente
O PaymentIntent 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.
Coletar dados de pagamentoLado do cliente
Colete dados de pagamento no cliente com o Payment Element. O Payment Element é um componente de IU 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 com segurança os dados de pagamento à Stripe por uma conexão HTTPS. Evite colocar o Payment Element dentro de outro iframe porque algumas formas de pagamento exigem redirecionamento para outra página para confirmação do pagamento.
If you do choose to use an iframe and want to accept Apple Pay or Google Pay, the iframe must have the allow attribute set to equal "payment *"
.
Para que sua integração funcione, o endereço da página de checkout deve começar com https://
em vez de http://
. Você pode testar sua integração sem usar HTTPS, mas lembre-se de ativá-la quando tudo estiver pronto para receber pagamentos no modo de produção.
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 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.
Solicitar token de comerciante do Apple Pay
Se você configurou sua integração para aceitar pagamentos pelo Apple Pay, recomendamos configurar a interface do Apple Pay para retornar um token de comerciante que habilite transações iniciadas por comerciante (MIT). Solicite o tipo de token de comerciante relevante no Payment Element.
Enviar o pagamento para a StripeLado do cliente
Use o stripe.confirmPayment para realizar o pagamento com os dados do Element Pagamento. Forneça um return_url a essa função para indicar aonde a Stripe deve enviar o usuário depois do pagamento. Seu usuário pode ser redirecionado primeiro para um local intermediário, como uma página de autorização do banco, antes de ser redirecionado para o return_url
. Após a conclusão de um pagamento com cartão, há um redirecionamento imediato para return_url
.
Se não quiser redirecionar para pagamentos com cartão após a conclusão do pagamento, defina redirecionar como if_required
. Isso redireciona somente os clientes que fazem checkout com formas de pagamento baseadas em redirecionamento.
Verifique se o return_url
corresponde a uma página no seu site que fornece o status do pagamento. Quando a Stripe redireciona o cliente para o return_url
, nós fornecemos os seguintes parâmetros de consulta de URL:
Parâmetro | Descrição |
---|---|
payment_intent | O identificador único do PaymentIntent . |
payment_intent_client_secret | O segredo do cliente do objeto PaymentIntent . |
Cuidado
Se você tiver ferramentas que acompanham a sessão do navegador do cliente, pode precisar adicionar o domínio stripe.com
à lista de exclusão dos indicadores. Os redirecionamentos fazem com que algumas ferramentas criem sessões, o que evita que você acompanhe a sessão completa.
Use um dos parâmetros de consulta para recuperar o PaymentIntent. Inspecione o status do PaymentIntent para decidir o que mostrar aos clientes. Você também pode anexar seus próprios parâmetros de consulta ao fornecer o return_url
, que persiste durante o processo de redirecionamento.
Processar eventos pós-pagamentoLado do servidor
A Stripe envia um evento payment_intent.succeeded quando o pagamento é concluído. Use a ferramenta de webhook do Dashboard ou siga o guia de webhooks para receber esses eventos e executar ações, como enviar um e-mail de confirmação de pedido ao seu cliente, registrar a venda em um banco de dados ou iniciar um fluxo de entrega.
Escute esses eventos em vez de aguardar um retorno de chamada do cliente. No cliente, o consumidor pode fechar a janela do navegador ou sair do aplicativo antes da execução do retorno de chamada, o que permite que clientes mal-intencionados manipulem a resposta. Configurar sua integração para escutar eventos assíncronos é o que permite a você aceitar diferentes tipos de formas de pagamento com uma única integração.
Além de gerenciar o evento payment_intent.succeeded
, recomendamos gerenciar esses outros eventos ao coletar pagamentos com o Element Pagamento:
Evento | Descrição | Ação |
---|---|---|
payment_intent.succeeded | Enviado quando um cliente conclui um pagamento com êxito. | Envie ao cliente uma confirmação de pedido e processe o pedido. |
payment_intent.processing | Enviado quando um cliente inicia um pagamento, mas o pagamento ainda precisa ser concluído. Esse evento costuma ser enviado quando um cliente inicia um débito bancário. Ele é seguido por um evento payment_intent.succeeded ou payment_intent.payment_failed no futuro. | Envie ao cliente uma confirmação do pedido que indica que o pagamento está pendente. Para produtos digitais, pode ser necessário executar o pedido antes de aguardar a conclusão do pagamento. |
payment_intent.payment_failed | Enviado quando um cliente tenta fazer um pagamento, mas o pagamento falha. | Se um pagamento passa de processing para payment_failed , ofereça ao cliente outra tentativa para pagar. |
Teste sua integração
Para testar sua integração de pagamentos personalizada:
- Crie um Payment Intent e recupere o segredo do cliente.
- Preencha os dados de pagamento com um método da tabela a seguir.
- Informe uma data futura qualquer como validade do cartão.
- Informe qualquer número de 3 dígitos como CVC.
- Informe qualquer código postal de cobrança.
- Envie o pagamento para a Stripe. Você será redirecionado para
return_url
. - Acesse o Dashboard e procure o pagamento na página Pagamentos. Se o seu pagamento for bem-sucedido, ele aparecerá na lista.
- Clique no pagamento para ver mais detalhes, como dados de faturamento e a lista de itens comprados. Você pode usar esses dados para executar o pedido.
Saiba mais sobre como testar sua integração.
Consulte Testes para obter mais informações sobre como testar sua integração.
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.