Sell Plans on Any Page with On-page Checkout

A pricing page usually ends in a button that sends the buyer somewhere else: a cart, then a checkout page, then the payment step. Every extra page between the plan and the payment is one more place for the buyer to stop and leave.

On-page Checkout puts the plan picker and FluentCart’s own checkout on the page you already sell from. The buyer chooses a plan, fills in their details and pays without leaving that page. You can add it as a block, as a Bricks element or with a shortcode, and the checkout can carry the same design as your checkout page. It needs FluentCart 1.6.4 or newer, and the module stays off until you turn it on.

Add It With the Block

1. Go to FluentCart → GT Extensions, enable On-page Checkout and save.
2. Edit a page and insert the On-page Checkout block.
3. Choose a product. Every active variation of that product becomes a plan, in the product’s own order.

That is enough for a working checkout. While you edit, the block shows the plan cards and an outline of the checkout design, so you can see the layout without loading a real checkout. The sidebar has the rest:

• Plans (variation IDs) picks and orders the plans, and can mix variations from different products.
• Preselected plan chooses the plan that starts selected.
• Checkout design picks the look of the checkout. See Carry Your Checkout Design.
• Layout shows the form on the page, or a button that opens the form in place.
• Let buyers choose a quantity works for one-time products that are not sold individually. Subscriptions are always bought one at a time.
• Coupon to apply adds a FluentCart coupon code to the order.

Use the Shortcode in the Classic Editor

The [gtfc_checkout] shortcode does the same job as the block. Use it in the classic editor, in widgets, or in any page builder’s shortcode or text element. Put it on its own line:

[gtfc_checkout product="12"]
[gtfc_checkout plans="34,35,36" default="35" title="Join the studio"]
[gtfc_checkout product="12" design="warm-split"]
[gtfc_checkout product="12" layout="button" button="Get the plan" quantity="yes" coupon="WELCOME10"]

These are the attributes it understands:

• product: the product ID. Every active variation becomes a plan. Leave it out (or use current) on a product page, in a product template or in a loop of products, and it uses the current product.
• plans: variation IDs, in the order you want the plans shown.
• default: the variation ID of the preselected plan.
• design: inherit (the default), compact, one of the ready-made designs, or a custom design ID. See the table below.
• title: a heading shown above the plans.
• layout: inline for the form on the page (the default) or button for a button that opens it.
• button: the button label when the layout is button. It says Buy now if you leave it out.
• quantity: yes lets buyers choose a quantity on one-time plans.
• coupon: a coupon code to apply.
• url_coupon: no stops a ?coupon= code in the page address from being applied. By default, that code is applied.

Use It in Bricks

With Bricks active, search for On-page Checkout in the elements panel and add it like any other element. It has the same options as the block, in three groups:

• Product and plans: a searchable list of your published products, plus plans and the preselected plan.
• Display: checkout design, heading, layout, button text, quantity and coupon.
• Plan cards and button: the plan card accent, background, border and text, and the button’s background, text and border.

In the builder, the element shows your plan cards and an outline of the chosen design where the checkout goes. It never loads a real checkout there, so editing a page creates no carts. On the live page its stylesheet loads in the page head, and the element fills the width of its container.

A plan card accent you set in Bricks wins over the design’s accent, so you can match the cards to the rest of the page.

Every Bricks control, with screenshots, is in Use On-page Checkout in Bricks Builder.

Carry Your Checkout Design

The checkout below the plan cards can use the same Checkout Builder design as your checkout page: Classic, Split, Warm Split, Focused or Review First, with the colors, width and corner radius from FluentCart → Checkout Builder → Appearance. Turn on the Checkout Builder module to use them. Buyers get one look from the pricing page to the receipt.

Checkout design	Shortcode value	What buyers get
Active Checkout Builder design	inherit	The design active in Checkout Builder. FluentCart’s compact form when none is active. This is the default.
Compact form	compact	FluentCart’s compact checkout form. Best for narrow columns.
Classic	summary-right or classic	Details on the left, order summary on the right.
Split	summary-left or split	Order summary on the left, details on the right.
Warm Split	warm-split or warm	A warm order panel beside the form, with a bold purchase button.
Focused	focused	One centered column, order summary on top.
Review First	review-first	A full-width order review, then details beside payment.
A custom design	its ID	A published custom design that passes Checkout Builder’s checks.

Pick one per page, so a pricing page can use Split while your checkout page stays on Classic. Inside a page, a ready-made design leaves out its own page heading and its “Edit your cart” link, and the plan cards take the design’s accent color.

The two-column designs stack into one column when the space they sit in is narrower than 782px, whatever the screen size. A design in a sidebar or a narrow column therefore stacks on desktop too. Choose Compact form there if you prefer FluentCart’s smaller form:

Modal Checkout keeps the compact form, because it opens in a narrow modal.

Use It in Product Templates and Loops

Leave Product empty and On-page Checkout uses the product it is shown for. One template then sells every product with its own plans:

• Bricks product templates: add the element to a single template for FluentCart products. In the builder it previews the product chosen under Populate content.
• Bricks query loops: inside a loop of products, each item gets its own plans and its own checkout.
• Block templates and the Query Loop block: the block reads the post it renders for, in a site editor template or a Query Loop of products.
• Product content: a bare [gtfc_checkout] in a product’s description checks out that product.

On a page that is not a product, an empty Product shows a short note to editors and nothing to visitors.

Some themes print product descriptions through a filter that strips form fields. The plan cards carry their own plan data, so the checkout still loads the right plan there.

What Buyers See

The buyer sees plan cards first and the checkout right below them. The chosen card gets a stronger border and a tint in the accent color, so the selection is clear at a glance. A card shows whatever applies to its plan:

• the price and the compare-at price
• the billing period, a free trial or a signup fee
• “One-time payment” for plans that are not subscriptions
• a “Save N%” badge on a quarterly, half-yearly or yearly plan priced below 3, 6 or 12 months of the same product’s monthly plan

Unavailable plans stay visible but can’t be chosen. A product that is not published, or a variation that is not active, is left out of the cards entirely.

While the checkout loads, an outline of a form shows where it will appear. Then the checkout for the chosen plan appears: address fields, the coupon field, the order summary, payment methods and the Place order button. Taxes, shipping, coupons and the payment methods offered all come from FluentCart. After Place order, the whole page moves on to the receipt or to the gateway’s payment page.

With the button layout, the plan cards show with your button below them, and the checkout opens in place when it is clicked. On phones the button spans the full width:

On a phone, the plan cards and the design stack into one column:

How It Handles Carts

A checkout form on a page anybody can open could easily turn into a pile of abandoned carts, and it could mess with what a customer already has in their store cart. On-page Checkout is careful on both counts:

• The form loads when it scrolls near the screen, or when the button is clicked. A page view that never reaches it creates nothing, and the host page loads no checkout scripts of its own.
• Each visitor gets their own cart for the plan they pick. It is separate from their store cart, which is never changed, so items they added elsewhere stay where they were.
• Switching plans keeps each plan’s form, so switching back keeps what was typed. A reload resumes the same cart for the rest of the browser session.
• A cart that belongs to a signed-in customer is never resumed by anyone else, and a cart for a different plan or quantity is never reused.
• One connection can open at most 30 new carts in 10 minutes.

Good to Know

• The checkout runs inside a frame that only your own site can embed. That frame is marked noindex and is never cached.
• Your theme’s fixed bars, such as a mobile bottom menu or a sticky header, are hidden inside the checkout frame. Add data-gtfc-frame-keep to one that must stay.
• Editing in the block editor or in Bricks never creates a cart.
• Without JavaScript, the block shows a link to FluentCart’s checkout for the preselected plan.
• A coupon can come from the block, the Bricks element, the shortcode or a ?coupon= code in the page address.

For Developers

The host page fires a gtfc:onpage-checkout event on the block with detail = { action, plan, quantity }, where action is select, ready or error. It is the right place to hook analytics:

document.addEventListener('gtfc:onpage-checkout', (event) => {
  if (event.detail.action === 'select') { /* plan chosen */ }
});

These filters and actions are available on the PHP side:

Hook	Type	Use
gtfc/onpage_checkout/carts_per_window	filter	New carts one connection may open in 10 minutes (30 by default; 0 turns the limit off).
gtfc/onpage_checkout/max_quantity	filter	Highest quantity accepted for one-time plans (100 by default).
gtfc/onpage_checkout/cart_created	action	Runs after a cart is created: ($cart, $variation).

The embedded checkout route is /?fluent-cart=gtfc_checkout_frame&item_id=<variation>&quantity=<n>, with &design=<choice> for a Checkout Builder design. A design frame renders FluentCart’s full checkout for the visitor’s cart and keeps the embedded checkout’s hand-off of the final redirect to the host page.

For a step-by-step walkthrough, see How to Sell a Plan from Your Pricing Page Without a Cart.