Cart & checkout

Fontdue’s cart and checkout live inside the Store Modal – an overlay that opens on top of whatever page the customer is reading and contains the entire buying flow, from selecting fonts to paying. Because the store is an overlay rather than a set of pages on your site, it behaves the same wherever the site is built – the Fontdue template, a site-builder embed, or a custom React site – and your site never needs cart or checkout pages of its own. The Store Modal component goes on every page of your site; everything below describes what happens inside it.

Inside the modal

The modal is a small store with pages of its own:

• Browse – a directory of the collections in your catalog, shown when the modal opens without a specific font in mind.¹¹Collections can be hidden from the directory with the indexExcludeTags config option, or the directory skipped entirely with hideAllCollections – see Store Modal config.
• Product page – one per collection, where the customer makes their licensing choices and selects fonts. A Buy Button opens the modal directly here.
• Cart & checkout – one page in two columns: the order so far on one side, checkout on the other. Opened from the Cart Button or by adding a selection to the cart. With Stripe Tax, payment opens one further page – see Checkout below.

The product page

A product page asks the customer to settle the licensing questions first, then pick fonts. In the default order:²²The productLicensesPosition config option flips this – font selection first, the licensing steps after it.

1. Licensee – whether the fonts are licensed to Yourself or Your client. The answer decides whose details checkout collects later – see Checkout.
2. Order variables – the order-wide questions you’ve configured, such as company size. See Order variables.
3. License – one of your licenses, plus answers to any variables it carries.
4. Fonts – styles, families, and bundles, with prices reflecting every answer above.

Each step stays disabled until the one before is answered, so the customer never selects fonts against a price that’s about to change. Every price on the page updates in place as answers change – order-variable and license multipliers scale the whole catalog view, following the model described in Pricing. The font step also nudges the selection toward larger units: any family or bundle the customer is partway into shows the cost to complete it as a +$X hint, clicking the hint snaps the selection to the whole grouping, and a grouping whose price is already covered selects itself. Selection pricing in the Store Modal covers the mechanics.

A bar pinned to the bottom of the page keeps the running total in view; Add to cart moves the selection into the cart.

The cart

The cart page puts the order and the checkout side by side – one column for reviewing what’s been added, one for completing the purchase. On the review side everything stays editable: each item shows its fonts and license with controls to switch the license or its variable answers, the order-variable answers sit at the top, and any change re-prices the order in place, just like the product page. A coupon field redeems coupons, and Share your cart turns the cart into a link and PDF quote that anyone can open – see Quotes & shared carts.

Checkout

Checkout occupies the cart’s other column. Fontdue separates the billing identity – who pays – from the licensee identity – who the fonts are licensed to – and the first questions establish both:

1. Contact information – the customer’s name and email, with the newsletter opt-in checkbox.³³Opt-ins flow into Newsletters; the checkbox label is configurable – see Labels and copy.
2. The licensee question – Yourself or Your client, carried over from the product page and still editable. Choosing Your client adds a form for the client’s full details – name, organization, address, VAT number. Licensee details always include the full address whatever the Address collection setting says, since they end up on the licensee’s invoice.

Both identities are kept on the completed order, where you can edit either – see Editing an order.

What follows the identity questions depends on which tax system your store uses.

With Stripe Tax

A Checkout button leads to the modal’s final page, an embedded Stripe Checkout. Stripe collects the billing address – in full or the minimum needed for tax, per Address collection – along with a business tax ID if the customer has one⁴⁴A valid tax ID applies reverse charge automatically where it applies – see Tax., calculates tax from the address against your registrations, and presents your EULA agreement text as a required checkbox above the payment methods enabled on your Stripe account.

On the legacy manual tax system

Stores still on the manual tax system check out without leaving the cart: billing address fields follow the contact step, Fontdue calculates tax from the completed address – the totals update before anything is charged – and the card and wallet fields render in place, powered by Stripe. The customer ticks the EULA agreement checkbox and pays with a Pay button showing the final amount.⁵⁵An order a coupon brings to zero skips payment – the button reads Complete order instead.

After payment

The customer lands on an order page hosted by Fontdue⁶⁶Served from your own domain once a custom domain is connected. where their download archive is prepared, and a receipt email carrying the same download link follows – see Receipts & invoices. The order appears in the admin under Orders – see Orders.

Labels and copy

The customer-facing strings Fontdue uses across the Store Modal, checkout, and opt-in forms are all replaceable. Override them under Settings → Cart & checkout; leave a field blank to fall back to Fontdue’s default text.⁷⁷The two newsletter labels are the exception – they live under Settings → Newsletter with the rest of the newsletter configuration.

• Newsletter opt-in label – sits next to the opt-in checkbox in checkout, the test fonts form, and the newsletter signup component.
• Newsletter success label – what a visitor sees after signing up.
• EULA agreement label – sits next to the license agreement checkbox in checkout and the test fonts form. Customers must tick this before completing a purchase or downloading test fonts.
• Customer login submitted message – shown after a customer requests a magic-link login. Supports markdown.
• Store Modal step headings – the titles of the product page steps: License these fonts for, Select order variable options, Select license, and Select fonts by default. Rename to match your house phrasing.
• Licensee picker labels – the licensee question’s two buttons (Yourself and Your client by default), plus an optional line of explainer text under each. These appear wherever the question is asked – the product page and checkout.

What checkout collects

Two settings under Settings → Cart & checkout control how much identity checkout asks for. Both concern the billing side; licensees always have their full address collected, as above.

Address collection

• Required – the default. Fontdue collects a full billing address.
• Auto – collects only the minimum address needed for correct tax calculation. For many jurisdictions that’s just the country; for US sales tax it’s the ZIP. Available with Stripe Tax only.

Phone number collection

• Never collect – the default. No phone field shown.
• Required – adds a mandatory phone field. Requires Address collection set to Required.

Stripe’s own guidance is to collect phone numbers only when you genuinely need them – the extra field adds friction to checkout and has privacy-policy implications, so leave it off unless there’s a specific reason to collect.