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

      • How to sell through Pagar.me right on my page

      Add the Checkout Pagar.me block to the page in the editor, then pick the Pagar.me account and what will be sold. On the published page, the buyer fills in the payment form inside the page itself and pays by card, Pix or boleto. Card details go straight from the buyer's browser to Pagar.me. The sale arrives through your Pagar.me integration, linked to the page.

      Before adding the block, get your Pagar.me account ready with the requirements below. Without them the block shows up on the page, but the payment fails.

      Before you start

      • You need edit access to the page.
      • Do everything first in the Pagar.me test account (sk_test_ and pk_test_ keys) and check one purchase end to end. Then repeat the same steps in the production account (sk_ and pk_ keys).

      Requirements in Pagar.me

      Check each item in the Pagar.me dashboard:

      1. Approved account. Your Pagar.me account must be approved to receive payments.
      2. Payment methods turned on. Under Configurações > Meios de pagamento (Settings > Payment methods), turn on the methods the block will offer: card, Pix and boleto. For boleto, set the due days and the instructions. If Pix isn't available to turn on, ask Pagar.me support to enable it.
      3. Secret key and public key. Under Configurações > Chaves de API (Settings > API keys), create the secret key (sk_…) with Personalizado (Custom) > Transacional (Transactional) > Leitura e escrita (Read and write) access, and also copy the public key (pk_…). Paste both into the ClickMax Pagar.me integration, in the Secret key (sk_) and Public key (pk_) fields. Both must be from the same environment: sk_test_ with pk_test_, or sk_ with pk_.
      4. Allowed domains. Under Configurações > Conta (Settings > Account), in the Domínios (Domains) field, add the domain where the page is published: your custom domain and/or the ClickMax pages subdomain shown in the page address. Without it, Pagar.me rejects the card details and card payments fail.
      5. Webhook with authentication. Register the webhook URL with user and password, as in Integrate Pagar.me. The webhook is what records the sale in ClickMax external sales and fires automations.
      6. Plans, to sell subscriptions. Create the plan in Pagar.me first. The block only lists plans that already exist in the account.

      Step by step

      1. Open the page in the editor, open the list of elements to add and, under Checkout, drag the Checkout Pagar.me block onto the page.

      2. Click the block to open its panel on the right. The panel has three numbered steps; each number turns into a check mark once the step is done.

      3. In 1 Account, pick the Pagar.me account. With a single connected account, it's already picked. If the integration is missing the secret key, the public key or the webhook password, the This integration is missing information warning says what's missing, with the Complete integration button. Open Before publishing for a reminder of what to check in the Pagar.me dashboard.

      4. In 2 What to sell, pick One-time payment or Subscription:

        • One-time payment: fill in the product Name and Price. The Description is optional, has up to 300 characters and shows in the order summary. The Code (SKU) is generated from the name; to change it, open More options.
        • Subscription: pick the Plan from your Pagar.me account. The amount and frequency are the plan's. Subscriptions don't accept Pix or order bumps.

        Below, the Summary shows the name and the price (for subscriptions, with the frequency, such as /month).

      5. To offer order bumps (one-time payment only), click Add order bump, fill in name, price and, if you want, a description, and click Add. You can add up to 5 items, which the buyer ticks in the checkout itself. To remove one, click the X next to it.

      6. In 3 Payment, turn on the methods the checkout offers. Each method's options show right below it:

        • Credit card: Installments, from Single payment only up to 12x interest-free. The total doesn't change with installments;
        • Pix: Pix expiration (minutes), from 5 to 1440;
        • Boleto: Boleto due date (days), from 1 to 30.

      7. If you want, open Appearance and adjust:

        • Accent color: the color of the button, the selected payment method and focused fields. Pick one of the ready-made colors (the first one is Pagar.me green) or type a code such as #00AF55;
        • Button text color: with Automatic, the text is white or black, whichever is easier to read on the accent color. You can also pick white, black or type a code. The sample right below shows the button as buyers will see it, with a warning if the text is hard to read;
        • Font: the checkout font. Inter is the default; pick another one from the list, or Page font to use the same font as the rest of the page;
        • Button text: the default is Finalizar compra (Complete purchase);
        • Name on card statement: up to 13 letters or numbers, no accents.

      8. Publish the page. The page charges what was set up at the last publish.

      In the editor, the block shows a preview of the checkout. You can't pay in the preview.

      What the buyer sees

      The checkout has two columns. On the left is the summary: the product name (and its description, if any), the price in large type, the order bumps with the Add button and the Total due. On mobile, the summary becomes the Order summary bar at the top, which opens on tap.

      On the right is the form, which asks for:

      • Email;

      • Payment method: a list to pick Credit card, Pix or Boleto. The chosen method's options show right below it;

      • Personal details: name, CPF or CNPJ (the buyer picks which one in the selector next to the number) and mobile with area code;

      • Address: only for card and boleto. The ZIP code (CEP) fills in the rest of the address.

      • Card: number, name on card, expiry and CVV, with a choice of interest-free installments. Once the payment is approved, the funnel moves on.

      • Pix: when the buyer finishes, the QR Code and the Copy code button show up, with a countdown until the code expires. The page tracks the payment and the funnel moves on as soon as the Pix is paid.

      • Boleto: when the buyer finishes, the boleto line and the Open boleto button show up. A boleto takes up to 3 business days to clear, so the funnel doesn't move on from the page; the sale arrives through the webhook once the boleto is paid.

      • Payment under review: the page says the buyer gets the confirmation by email.

      • Payment declined: the page shows Payment declined. Check your details or use another card. and lets the buyer try again.

      The form follows the page language. The page pixel receives the approved purchase with the total paid and the currency.

      1-click purchase

      1-click purchase is automatic: there is nothing to turn on. A buyer who just had a card purchase approved on this domain, in the same Pagar.me account and up to 30 minutes ago sees the Quick purchase card at the top of the checkout, with two buttons:

      • Buy with 1 click: charges the same card, as a single payment, without the buyer typing anything again;
      • Use another payment method: shows the full form.

      It works on any page with the block, including upsell and downsell steps in a funnel. Buyers who land straight on the page, paid by Pix or boleto, bought on another domain or more than 30 minutes ago only see the form. If the saved card is declined, the full form shows up so the buyer can pay another way.

      The block has no decline button. For buyers who don't want the offer, add a button to the page with Ao clicar (On click) > Recusar oferta do funil (Decline funnel offer): the click follows the funnel's decline path. See How to use the Pagar.me checkout as a step in my funnel.

      Where the sale shows up

      Every purchase made through the block arrives through your Pagar.me integration webhook, lands in external sales and creates or updates the contact by the buyer's email. The sale is linked to the page where the buyer paid and fires the Pagar.me automation triggers.

      When the page is a funnel step, these sales count in Revenue and Purchases in the funnel's Analytics Mode. See Which sales count in the funnel revenue.

      Warnings in the block panel

      When a buyer tries to pay and Pagar.me refuses because of the account setup, the block panel shows the Pagar.me declined sales from this page warning, with the reason:

      • Domain refused: Pagar.me rejected the card details because the page domain isn't allowed. Add the domain under Configurações > Conta > Domínios in Pagar.me.
      • Payment method not active: the Pagar.me account rejected a method the block offers. Turn it on under Configurações > Meios de pagamento or turn it off in the block and publish again.

      If it didn't work

      • The checkout doesn't show on the published page: the Pagar.me integration picked in the block must belong to your workspace, be active and have the secret key, the public key and the webhook password. Complete the integration and publish the page again.
      • The buyer sees We could not load the payment form.: the page was published with an incomplete block. The block needs a product (or plan) and at least one payment method. Complete the block panel and publish again.
      • I duplicated the page or it came from a template or shared funnel: if the block's Pagar.me account belongs to another workspace, the editor clears the block's account and the published page doesn't show the checkout. Pick your own Pagar.me account and publish again.
      • Every card payment fails: check that the page domain is under Configurações > Conta > Domínios in Pagar.me and that the public key is from the same environment as the secret key.
      • The buyer sees This payment method is unavailable. Try another one.: the method isn't turned on in your Pagar.me account. Turn it on under Configurações > Meios de pagamento.
      • I can't save the public key in the integration: it must start with pk_ or pk_test_ and be from the same environment as the secret key.
      • The buyer paid and the sale didn't show up: check the webhook with authentication in Integrate Pagar.me. Without the webhook, the sale isn't recorded.
      • The buyer paid the boleto and the funnel didn't move on: boletos don't move the funnel from the page. Use the Pagar.me automation triggers to react to the payment.
      • The buyer didn't see Quick purchase: the previous purchase was on another domain, by Pix or boleto, in another Pagar.me account or more than 30 minutes ago, or the block doesn't offer credit card.
      • I changed the price and the buyer still saw the old one: the change applies after you publish the page again.