Skip to main content
O elemento Stripe Checkout adiciona um formulário de pagamento seguro diretamente à sua landing page. Os visitantes digitam os dados do cartão e pagam sem sair da página, então você mantém o comprador no seu funil do primeiro clique até a compra. Os pagamentos são processados pelo Stripe. Os dados do cartão vão direto para o Stripe e nunca passam pelo LanderLab.

​
Antes de começar

Conecte sua conta do Stripe em Integrations. O checkout usa essa conexão para processar pagamentos e carregar seus produtos e cupons do Stripe.

​
Adicione o elemento Stripe Checkout

  1. Abra sua página no editor.
  2. Na barra lateral esquerda, abra Elements e encontre a categoria Conversion.
  3. Arraste Stripe Checkout para a tela.
  4. Clique no elemento para abrir as configurações no painel da direita.
A tela mostra o checkout em Preview Mode. Ele é atualizado em tempo real conforme você muda as configurações, para você ver exatamente o que os visitantes vão ver.
Stripe Element

​
Produto

Escolha de onde vêm os detalhes do produto na configuração Source. O modo Manual oferece estes campos:
  • Name: o nome do produto exibido no topo do checkout
  • Description: uma linha curta abaixo do nome, por exemplo Frete grátis
  • Image: uma miniatura opcional do produto
Com Stripe product, abra o menu Product e pesquise no seu catálogo do Stripe. Os produtos são agrupados em One-time e Recurring. Se você acabou de adicionar um produto no Stripe e ele não aparece, clique em Refresh products. Você ainda pode adicionar uma Image para exibir ao lado do nome do produto.
Se você definir Source como Stripe product, precisa selecionar um produto. Sem ele, o checkout não vai funcionar na página ao vivo.

​
Cobrança

Para produtos manuais, escolha One-time para um pagamento único ou Recurring para uma assinatura, depois defina o Price e escolha a moeda. Para produtos do Stripe, essas configurações ficam ocultas, porque o preço e o tipo de cobrança vêm do Stripe.

​
Adaptive Pricing

Ative o Adaptive Pricing para mostrar o preço na moeda local do visitante. O Stripe faz a conversão, e o checkout exibe uma opção para o comprador escolher entre a sua moeda e a dele. O valor final cobrado pode variar um pouco de acordo com o câmbio.

​
Quantidade

Defina a Quantity padrão do pedido. Ative Let customers change quantity para exibir um seletor de quantidade e defina o Min e o Max que o comprador pode escolher. O checkout mostra um subtotal e um total que se atualizam conforme a quantidade muda.

​
Desconto

Cupons e códigos promocionais vêm da sua conta do Stripe. Crie-os primeiro no Stripe e clique em Refresh coupons se eles não aparecerem na lista.
Se você definir Discount como Coupon, precisa selecionar um cupom. Sem ele, o checkout não vai funcionar na página ao vivo.

​
Frete

Ative Collect shipping address para pedir um endereço de entrega no checkout. O formulário ganha uma seção Shipping information com nome completo, país e endereço. A caixa Billing info is same as shipping evita que o comprador digite o endereço duas vezes.
  • Countries: mantenha All countries ou selecione apenas os países para onde você envia
  • Shipping Options: clique em Add shipping option para criar uma tarifa de entrega
Cada opção de frete tem:
  • Name, por exemplo Frete padrão ou Expresso
  • Price, defina 0 para frete grátis
  • Delivery estimate, um intervalo mínimo e máximo de dias para entrega
Adicione várias opções para o comprador escolher. A tarifa selecionada é somada ao total do pedido.
D54e4bbb 3f9a 4d83 Bb76 27e49777bff8

​
Checkout

  • Button Text: texto personalizado para o botão de pagamento. Deixe vazio para usar o padrão do Stripe, que mostra o valor, como Pay $88.20
  • Language: o idioma do formulário de checkout. Auto segue o idioma do navegador do visitante
  • Theme: o estilo visual do formulário. Match Page combina com o design da sua página
  • Billing Address: coleta o endereço de cobrança completo do comprador
  • Stripe Link: permite que o comprador salve os dados de pagamento com o Stripe Link para pagar mais rápido na próxima vez
  • One purchase per visitor: impede que o mesmo visitante pague duas vezes, útil para ofertas únicas

​
Pagamento concluído

Escolha o que acontece depois de um pagamento bem-sucedido na configuração Action. Com Stay on page, escreva sua própria Confirmation Message. Se deixar vazio, o comprador verá Payment received, thank you!

​
Layout

Assim como nos outros elementos, você pode ajustar a Position (alinhamento à esquerda, ao centro ou à direita), as Dimensions (a largura padrão é 360px) e o Spacing (margin e padding).

​
Antes de publicar

  1. Clique em Preview e revise o checkout do jeito que um visitante veria.
  2. Confira o preço, a moeda, o desconto e os totais de frete.
  3. Verifique se nenhum aviso aparece abaixo do checkout na tela. Um aviso significa que falta um produto ou cupom obrigatório.
  4. Publique a página.

​
Perguntas frequentes

Não. Defina Source como Manual e informe o nome, o preço e a moeda no LanderLab. Use Stripe product apenas se quiser que o preço e a cobrança sejam gerenciados no Stripe. De qualquer forma, sua conta do Stripe precisa estar conectada em Integrations.
Sim. Escolha Recurring em Billing ou selecione um produto recorrente do seu catálogo do Stripe.
Um cupom é aplicado automaticamente para todos os compradores. Um código promocional exibe um campo onde o próprio comprador digita o código.
Clique em Refresh products ou Refresh coupons no menu para carregar os dados mais recentes do Stripe.
Todos os pagamentos, reembolsos e dados dos clientes ficam no seu painel do Stripe.