How to sell through PagBank right on my page
Add the PagBank Checkout block to the page in the editor, then pick the PagBank 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 are encrypted in the buyer's browser before they go to PagBank. The sale arrives through your PagBank integration, linked to the page.
The block sells one-time products. Subscriptions are not sold through the block.
Before you start
- You need edit access to the page.
- The workspace needs an active PagBank integration. To create it, paste only the PagBank token, as in Integrate PagBank. There is no public key to copy: Clickmax gets it by itself from the token.
- If you will offer Pix or boleto, confirm they are enabled in your PagBank account. If PagBank refuses a method, the block warns you (see Warnings in the block panel).
- To test without real charges, use a test (sandbox) token and check one purchase end to end. Then switch to the integration with the production token.
Step by step
-
Open the page in the editor, open the list of elements to add and, under Checkout, drag the PagBank Checkout block onto the page.
-
Click the block to open its panel on the right. The panel has the steps Account, What to sell and Payment; each number turns into a check mark once the step is done.
-
In Account, pick the PagBank account. With a single connected account, it's already picked. If the integration is disabled, This PagBank account is disabled shows up: re-enable it in Integrations or pick another account. If the integration is missing information, This integration is missing information says what's missing, with the Complete integration button. Open Before publishing for a reminder of what to check in PagBank.
-
In What to sell, open the Product field (Choose a product) and pick a product from the list. Type in Search by name or code to filter and, if the list has more products, load more. The list shows the products of the PagBank account picked in Account; with no account picked, it says Choose the account above to see your products. A product's name in the list follows the name used in its latest sale. If the product doesn't exist yet, click Create product and fill in:
- Name;
- Price, greater than zero;
- Code (SKU): suggested from the name, it identifies the product in sales. Use only letters, numbers, dot, hyphen or underscore. A code that already exists is refused (That code already exists. Pick the product from the list or use another code.): pick the existing product from the list or use another code.
Click Create product to save. The product is added to the list and picked in the block. After picking, Name, Price and Description stay editable. The Description is optional, has up to 300 characters and shows in the order summary. The product's price is only pre-filled: the amount the checkout charges is the block's and can differ from the product's registered price. Changing the amount in the block doesn't change the product. If the product has no registered price, This product has no price on file. Enter the price for this checkout. shows up. Below, the Summary shows the name and the price.
-
To offer order bumps, click Add order bump, pick or create the product the same way, check 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. The same code can't be used twice in the block (This code is already used in this checkout.). To remove one, click the X next to it.
-
In 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 and you absorb the interest. PagBank requires a minimum amount per installment: if the buyer picks too many installments for the purchase amount, the page asks them to choose fewer;
- Pix: Pix expiration (minutes), from 5 to 1440;
- Boleto: Boleto due date (days), from 1 to 30.
-
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 PagBank green) or type a code such as
#1BB99A; - 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 Complete purchase;
- Name on card statement: up to 17 letters or numbers, no accents.
- 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 PagBank green) or type a code such as
-
Publish the page. The page charges what was set up at the last publish. On publish, the block's products (the main one and the order bumps) are also registered in your PagBank product list.
Products created here already show up in the product filter of the PagBank automation triggers, without waiting for the first sale. See Integrate PagBank.
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 boleto, which requires the buyer's full address. The ZIP code (CEP) fills in the rest of the address. Card and Pix don't ask for an address.
The result for each method:
- 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 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, typing the card details 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 PagBank account and up to 30 minutes ago sees the Quick checkout card at the top of the checkout, with two buttons:
- Buy with 1 click: charges the saved 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 PagBank declines the saved card, 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 PagBank checkout as a step in my funnel.
Where the sale shows up
Every purchase made through the block arrives through your PagBank integration, 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 PagBank automation triggers. The sale enters revenue when PagBank notifies the payment, not from what the buyer sees in the browser. You don't need to register any webhook in PagBank.
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 PagBank refuses the payment method because of the account setup, the block panel shows the PagBank declined sales from this page warning, with the reason Enable Pix in your PagBank account (or Boleto, or Credit card, depending on the refused method). Enable the method in PagBank or turn it off in the block and publish again. Meanwhile, the buyer sees This payment method is unavailable. Try another one. and can use another method.
If it didn't work
- The checkout doesn't show on the published page: the PagBank integration picked in the block must belong to your workspace, be active and have the token. 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 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 PagBank account belongs to another workspace, the editor clears the block's account and the published page doesn't show the checkout. Pick your own PagBank account and publish again.
- The buyer sees This payment method is unavailable. Try another one.: the method isn't enabled in your PagBank account. Enable it in PagBank.
- The buyer sees Those installments are not available for this amount. Choose fewer installments.: the amount of each installment is below PagBank's minimum. The buyer picks fewer installments, or you lower the maximum Installments in the block.
- The buyer sees Payment is unavailable right now. Please try again shortly.: PagBank didn't respond or the card couldn't be prepared in the browser. The buyer tries again shortly; Pix and boleto don't depend on preparing the card.
- The buyer paid and the sale didn't show up: check that the integration is active in Integrations and that the page was published after you added the block.
- The buyer paid the boleto and the funnel didn't move on: boletos don't move the funnel from the page. Use the PagBank automation triggers to react to the payment.
- The buyer didn't see Quick checkout: the previous purchase was on another domain, by Pix or boleto, in another PagBank 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.