For AI agents: the complete documentation index is available at https://docs.clickmax.dev/llms.txt, the full documentation bundle is available at https://docs.clickmax.dev/llms-full.txt, and this page is available as Markdown at https://docs.clickmax.dev/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: abra o campo Produto (Escolha um produto) e escolha um produto da lista. Digite no campo Buscar por nome ou código para filtrar e, se a lista tiver mais produtos, carregue mais. A lista mostra os produtos da conta Pagar.me escolhida em Conta; sem conta escolhida, aparece Escolha a conta acima para ver seus produtos. O nome de cada produto na lista acompanha o nome usado na venda mais recente, e os planos de assinatura não aparecem aqui (use Assinatura). Se o produto ainda não existe, clique em Criar produto e preencha:

          • Nome;
          • Preço, maior que zero;
          • Código (SKU): vem sugerido a partir do nome e identifica o produto nas vendas. Use só letras, números, ponto, hífen ou sublinhado. Um código que já existe é recusado (Esse código já existe. Escolha o produto na lista ou use outro código.): escolha o produto existente na lista ou use outro código.

          Clique em Criar produto para salvar. O produto já fica na lista e escolhido no bloco. Depois de escolher, Nome, Preço e Descrição continuam editáveis. A Descrição é opcional, tem até 300 caracteres e aparece no resumo da compra. O preço do produto só vem preenchido: o valor que o checkout cobra é o do bloco e pode ser diferente do preço cadastrado do produto. Mudar o valor no bloco não altera o produto. Se o produto não tem preço cadastrado, aparece Este produto não tem preço no cadastro. Informe o valor para este checkout.

        • 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, escolha ou crie o produto do mesmo jeito, confira 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. O mesmo código não pode ser usado duas vezes no bloco (Este código já está em uso neste 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. Ao publicar um checkout de pagamento único, os produtos do bloco (o principal e os order bumps) também são registrados na sua lista de produtos da Pagar.me.

      Os produtos criados aqui já aparecem no filtro de produto dos gatilhos de automação da Pagar.me, sem precisar esperar a primeira venda. Veja Integrar Pagar.me.

      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