For AI agents: the complete documentation index is available at https://docs.clickmax.io/llms.txt, the full documentation bundle is available at https://docs.clickmax.io/llms-full.txt, and this page is available as Markdown at https://docs.clickmax.io/features/create/pages/pagarme-checkout-block.md.
  • Português

      • Como vender pela Pagar.me direto na minha página

      Adicione o bloco Checkout Pagar.me à página no editor, escolha a conta Pagar.me e o que será vendido. Na página publicada, o comprador preenche o formulário de pagamento dentro da própria página e paga com cartão, Pix ou boleto. Os dados do cartão vão direto do navegador do comprador para a Pagar.me. A venda chega pela sua integração Pagar.me, ligada à página.

      Antes de adicionar o bloco, deixe a conta Pagar.me pronta seguindo os requisitos abaixo. Sem eles o bloco aparece na página, mas o pagamento falha.

      Antes de começar

      • Você precisa ter acesso de edição à página.
      • Faça tudo primeiro na conta de teste da Pagar.me (chaves sk_test_ e pk_test_) e confira uma compra de ponta a ponta. Depois repita os mesmos passos na conta de produção (chaves sk_ e pk_).

      Requisitos na Pagar.me

      Confira cada item no painel da Pagar.me:

      1. Conta aprovada. A conta Pagar.me precisa estar aprovada para receber pagamentos.
      2. Meios de pagamento ativados. Em Configurações > Meios de pagamento, ative os meios que o bloco vai oferecer: cartão, Pix e boleto. No boleto, defina os dias de vencimento e as instruções. Se o Pix não aparecer para ativar, peça a liberação ao suporte da Pagar.me.
      3. Chave secreta e chave pública. Em Configurações > Chaves de API, crie a chave secreta (sk_…) com acesso Personalizado > Transacional > Leitura e escrita e copie também a chave pública (pk_…). Cole as duas na integração Pagar.me do ClickMax, nos campos Chave secreta (sk_) e Chave pública (pk_). As duas precisam ser do mesmo ambiente: sk_test_ com pk_test_, ou sk_ com pk_.
      4. Domínios liberados. Em Configurações > Conta, no campo Domínios, adicione o domínio em que a página é publicada: o seu domínio personalizado e/ou o subdomínio de páginas do ClickMax que aparece no endereço da página. Sem isso, a Pagar.me recusa os dados do cartão e o pagamento com cartão falha.
      5. Webhook com autenticação. Cadastre a URL do webhook com usuário e senha, como em Integrar Pagar.me. É o webhook que registra a venda nas vendas externas do ClickMax e dispara as automações.
      6. Planos, para vender assinatura. Crie o plano na Pagar.me antes. O bloco só lista planos que já existem na conta.

      Passo a passo

      1. Abra a página no editor, abra a lista de elementos para adicionar e, na categoria Checkout, arraste o bloco Checkout Pagar.me para a página.

      2. Clique no bloco para abrir o painel dele à direita. O painel tem três etapas numeradas; cada número vira um check quando a etapa está pronta.

      3. Em 1 Conta, escolha a conta Pagar.me. Com uma só conta conectada, ela já vem escolhida. Se faltar a chave secreta, a chave pública ou a senha do webhook na integração, aparece o aviso Falta informação nesta integração dizendo o que falta, com o botão Completar integração. Abra Antes de publicar para relembrar o que conferir no painel da Pagar.me.

      4. Em 2 O que vender, escolha Pagamento único ou Assinatura:

        • Pagamento único: preencha Nome e Preço do produto. A Descrição é opcional, tem até 300 caracteres e aparece no resumo da compra. O Código (SKU) é gerado a partir do nome; para trocá-lo, abra Mais opções.
        • Assinatura: escolha o Plano da sua conta Pagar.me. O valor e a frequência são os do plano. Assinatura não aceita Pix nem order bumps.

        Abaixo aparece o Resumo com o nome e o preço (na assinatura, com a frequência, como /mês).

      5. Para oferecer order bumps (só no pagamento único), clique em Adicionar order bump, preencha nome, preço e, se quiser, descrição, e clique em Adicionar. São até 5 itens, que o comprador marca no próprio checkout. Para tirar um, clique no X ao lado dele.

      6. Em 3 Pagamento, ligue os meios que o checkout oferece. As opções de cada meio aparecem logo abaixo dele:

        • Cartão de crédito: Parcelas, de Só à vista até 12x sem juros. O total não muda com as parcelas;
        • Pix: Validade do Pix (minutos), de 5 a 1440;
        • Boleto: Vencimento do boleto (dias), de 1 a 30.

      7. Se quiser, abra Aparência e ajuste:

        • Cor de destaque: a cor do botão, do meio de pagamento escolhido e dos campos em foco. Escolha uma das cores prontas (a primeira é o verde da Pagar.me) ou digite um código como #00AF55;
        • Cor do texto do botão: em Automático, o texto fica branco ou preto, o que for mais legível sobre a cor de destaque. Você também pode escolher branco, preto ou digitar um código. A amostra logo abaixo mostra o botão como o comprador vai ver, com um aviso se o texto ficar difícil de ler;
        • Fonte: a fonte do checkout. O padrão é Inter; escolha outra da lista ou Fonte da página para usar a mesma fonte do restante da página;
        • Texto do botão: o padrão é Finalizar compra;
        • Nome na fatura do cartão: até 13 letras ou números, sem acento.

      8. Publique a página. O que a página cobra é o que estava configurado na última publicação.

      No editor, o bloco mostra uma prévia do checkout. Na prévia não dá para pagar.

      O que o comprador vê

      O checkout tem duas colunas. À esquerda fica o resumo: o nome do produto (e a descrição, se houver), o preço em destaque, os order bumps com o botão Adicionar e o Total a pagar. No celular, o resumo vira a barra Resumo da compra no topo, que abre ao tocar.

      À direita fica o formulário, que pede:

      • E-mail;

      • Forma de pagamento: uma lista para escolher entre Cartão de crédito, Pix e Boleto. As opções do meio escolhido aparecem logo abaixo dele;

      • Dados pessoais: nome, CPF ou CNPJ (o comprador escolhe qual no seletor ao lado do número) e celular com DDD;

      • Endereço: só no cartão e no boleto. O CEP preenche o resto do endereço.

      • Cartão: número, nome impresso, validade e CVV, com a escolha de parcelas sem juros. Com o pagamento aprovado, o funil avança.

      • Pix: ao finalizar, aparece o QR Code e o botão Copiar código, com a contagem até o código expirar. A página acompanha o pagamento e o funil avança assim que o Pix é pago.

      • Boleto: ao finalizar, aparece a linha digitável e o botão Abrir boleto. O boleto leva até 3 dias úteis para compensar, então o funil não avança pela página; a venda chega pelo webhook quando o boleto é pago.

      • Pagamento em análise: a página avisa que o comprador recebe a confirmação por e-mail.

      • Pagamento recusado: a página mostra Pagamento recusado. Confira os dados ou use outro cartão. e deixa o comprador tentar de novo.

      O pixel da página recebe a compra aprovada com o valor total pago e a moeda.

      Compra com 1 clique

      A compra com 1 clique é automática, não há nada para ligar. Quem acabou de ter uma compra com cartão aprovada neste domínio, na mesma conta Pagar.me e há até 30 minutos vê no topo do checkout o cartão Compra rápida, com dois botões:

      • Comprar com 1 clique: cobra o mesmo cartão, à vista, sem o comprador digitar nada de novo;
      • Usar outro meio de pagamento: mostra o formulário completo.

      Funciona em qualquer página com o bloco, inclusive nas etapas de upsell e downsell de um funil. Quem chega direto na página, comprou com Pix ou boleto, comprou em outro domínio ou há mais de 30 minutos vê só o formulário. Se o cartão salvo for recusado, aparece o formulário completo para pagar de outro jeito.

      O bloco não tem botão de recusa. Para o caminho de quem não quer a oferta, adicione à página um botão com Ao clicar > Recusar oferta do funil: o clique segue o caminho de recusa do funil. Veja Como usar o checkout da Pagar.me como etapa do meu funil.

      Onde a venda aparece

      Toda compra feita pelo bloco chega pelo webhook da sua integração Pagar.me, entra nas vendas externas e cria ou atualiza o contato pelo e-mail do comprador. A venda fica ligada à página em que o comprador pagou e dispara os gatilhos de automação da Pagar.me.

      Quando a página é etapa de um funil, essas vendas entram em Receita e Compras no Modo Analytics do funil. Veja Quais vendas entram na receita do funil.

      Avisos no painel do bloco

      Quando um comprador tenta pagar e a Pagar.me recusa por configuração da conta, o painel do bloco passa a mostrar o aviso A Pagar.me recusou vendas desta página, com o motivo:

      • Domínio recusado ("O domínio ... foi recusado pela Pagar.me"): o domínio da página não está liberado. Adicione-o em Configurações > Conta > Domínios na Pagar.me.
      • Meio de pagamento não ativo ("Ative ... na Pagar.me"): a conta recusou um meio oferecido pelo bloco. Ative-o em Configurações > Meios de pagamento ou desligue-o no bloco e publique de novo.

      Se não funcionou

      • O checkout não aparece na página publicada: a integração Pagar.me escolhida no bloco precisa ser do seu workspace, estar ativa e ter a chave secreta, a chave pública e a senha do webhook. Complete a integração e publique a página de novo.
      • O comprador vê Não foi possível carregar o pagamento.: a página foi publicada com o bloco incompleto. O bloco precisa de produto (ou plano) e de ao menos um meio de pagamento. Complete o painel do bloco e publique de novo.
      • Dupliquei a página ou ela veio de um template ou funil compartilhado: se a conta Pagar.me do bloco é de outro workspace, o editor limpa a conta do bloco e a página publicada não mostra o checkout. Escolha a sua conta Pagar.me e publique de novo.
      • Todo pagamento com cartão falha: confira se o domínio da página está em Configurações > Conta > Domínios na Pagar.me e se a chave pública é do mesmo ambiente da chave secreta.
      • Aparece Este meio de pagamento não está disponível. Tente outro.: o meio não está ativo na sua conta Pagar.me. Ative em Configurações > Meios de pagamento.
      • Não consigo salvar a chave pública na integração: ela precisa começar com pk_ ou pk_test_ e ser do mesmo ambiente da chave secreta.
      • O comprador pagou e a venda não apareceu: confira o webhook com autenticação em Integrar Pagar.me. Sem o webhook, a venda não é registrada.
      • O comprador pagou o boleto e o funil não avançou: boleto não avança o funil pela página. Use os gatilhos de automação da Pagar.me para reagir ao pagamento.
      • O comprador não viu a Compra rápida: a compra anterior foi em outro domínio, com Pix ou boleto, em outra conta Pagar.me ou há mais de 30 minutos, ou o bloco não oferece cartão de crédito.
      • Mudei o preço e o comprador ainda viu o antigo: a mudança vale depois que você publica a página de novo.

      Relacionados