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.
Incorpore um formulário de pagamento pré-integrado ao seu site usando o Stripe Checkout. Veja como essa integração se compara a outros tipos de integração da Stripe.
Esforço de integração
Tipo de integração
Integre um formulário de pagamento pré-configurado ao seu site
Personalização da IU
Use as configurações de marca no Stripe Dashboard para corresponder o Checkout ao design do seu site.
Configurar a StripeLado do servidor
Primeiro, cadastre-se para obter uma conta Stripe.
Use nossas bibliotecas oficiais para acessar a API da Stripe no seu aplicativo:
Criar uma sessão do CheckoutLado do servidor
No seu servidor, crie uma Sessão do Checkout e defina o ui_mode como embedded
. Você pode configurar a Sessão do Checkout com itens de linha a incluir e opções como moeda.
Para retornar os clientes para uma página personalizada hospedada em seu site, especifique o URL da página no parâmetro return_url. Inclua a variável de modelo {CHECKOUT_SESSION_ID}
no URL para recuperar o status da sessão na página de retorno. O Checkout substitui automaticamente a variável pelo ID da sessão do Checkout antes de fazer o redirecionamento.
Leia mais sobre a configuração da página de retorno e outras opções para personalizar o comportamento de redirecionamento.
Depois de criar a sessão do Checkout, use o client_secret
retornado na resposta para montar o Checkout.
Montar CheckoutDo lado do cliente
Checkout renders in an iframe that securely sends payment information to Stripe over an HTTPS connection.
Erro comum
Avoid placing Checkout within another iframe because some payment methods require redirecting to another page for payment confirmation.
Personalizar a aparência
Personalize o Checkout para corresponder ao design do seu site, definindo a cor de fundo, a cor do botão, o raio da borda e as fontes nas configurações de marca da sua conta.
Por padrão, o Checkout é renderizado sem preenchimento ou margem externa. Recomendamos usar um elemento de contêiner, como um div para aplicar a margem desejada (for example, 16px em todos os lados).
Exibir uma página de devolução
Depois que o cliente tenta fazer o pagamento, a Stripe o redireciona para uma página de devolução hospedada por você no seu site. Quando criou a sessão do Checkout, você especificou o URL da página de retorno no parâmetro return_url. Leia mais sobre outras opções de personalização de comportamento de redirecionamento.
Ao renderizar sua página de retorno, recupere o status da Sessão do Checkout usando o ID da Sessão do Checkout no URL. Trate o resultado de acordo com o status da sessão da seguinte forma:
complete
: o pagamento foi bem-sucedido. Use as informações da sessão do Checkout para renderizar uma página de sucesso.open
: o pagamento falhou ou foi cancelado. Remonte o Checkout para que seu cliente possa tentar novamente.
const session = await fetch(`/session_status?session_id=${session_id}`) if (session.status == 'open') { // Remount embedded Checkout } else if (session.status == 'complete') { // Show success page // Optionally use session.payment_status or session.customer_email // to customize the success page }
Formas de pagamento baseadas em redirecionamento
Durante o pagamento, algumas formas de pagamento redirecionam o cliente para uma página intermediária, como uma página de autorização bancária. Quando concluem essa página, a Stripe os redireciona para sua página de retorno.
Saiba mais sobre as formas de pagamento baseadas em redirecionamento e comportamento de redirecionamento.
Teste sua integração
Para testar sua integração do formulário de pagamento integrado:
- Crie uma Sessão do Checkout integrada e monte o Checkout na sua página.
- Preencha os dados de pagamento com um método da tabela abaixo.
- 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.
- Clique em Pagar. Você será redirecionado para o seu
return_url
. - Acesse o Dashboard e procure o pagamento na página de pagamentos. Se o seu pagamento for bem-sucedido, ele aparecerá na lista.
- Clique no pagamento para ver mais detalhes, como um resumo do Checkout com 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.