Buy Button

A button which when clicked opens the Cart to the relevant collection, and selects the collection. Pointed at a Font packFont packA hand-picked set of styles or whole families from anywhere in the catalog, sold together at one price with its own licenses, content, and slug. Unlike a bundle, it isn’t tied to one family or superfamily. instead, it opens the pack’s page – see Font packs below.

Renders a button with the text “Buy (collection-name)”.

<fontdue-buy-button
  collection-slug="ibm-plex"
  collection-name="IBM Plex"
></fontdue-buy-button>

import BuyButton from "fontdue-js/BuyButton";

<BuyButton
  collectionSlug="ibm-plex"
  collectionName="IBM Plex"
/>

import BuyButton, { loadBuyButtonQuery } from "fontdue-js/BuyButton";

const buyButton = await loadBuyButtonQuery({ collectionSlug: "ibm-plex" });

<BuyButton preloadedQuery={buyButton} collectionName="IBM Plex" />

Font packs

Pass a Font packFont packA hand-picked set of styles or whole families from anywhere in the catalog, sold together at one price with its own licenses, content, and slug. Unlike a bundle, it isn’t tied to one family or superfamily. identifier in place of a collection one and the button opens the Store Modal on the pack’s page – the pack button with its price and saving, then the member families beneath it. Packs are also listed ahead of the families on the modal’s Browse page, but a Buy Button takes customers straight to one from a landing page; the pack’s Widget codes tab in the admin has the snippet ready to paste. Without label the button reads “Buy (pack name)”, taken from the pack itself – there’s no collection-name / collectionName to pass. Packs need fontdue-js 3.8.0 or later – script-tag sites pick it up from the CDN automatically; sites using the npm package upgrade fontdue-js, and the pack’s page in the admin says so when yours is too old.

<fontdue-buy-button
  font-pack-slug="anniversary-pack"
  label="Buy the anniversary pack"
></fontdue-buy-button>

import BuyButton from "fontdue-js/BuyButton";

<BuyButton
  fontPackSlug="anniversary-pack"
  label="Buy the anniversary pack"
/>

Custom HTML elements

When <fontdue-buy-button> doesn’t fit – you want custom markup, custom styling, or to pre-select a specific SKU – add fontdue-* attributes to your own <button> (or any element). Fontdue.js wires these up automatically once it loads. This pattern is for the script-tag integration only; in React, compose with the <BuyButton> component or its props.

The attributes open the modal from an element on the page. To open the same product from a link someone can share, use ?store=product/{slug} instead – that form takes the collection’s slug as well as its ID.

Open a product page

Replace the collection ID with your own – find it on the Widget codes tab of the collection in the admin, or query it through the GraphQL API. A font pack’s ID, shown on the pack’s own Widget codes tab, goes in the same place and opens the pack’s page instead.

<button
  type="button"
  fontdue-click="open-store-modal"
  fontdue-store-route="product/Rm9udENvbGxlY3Rpb246NzUzNzU2MDgwNjI1OTk4ODQ5">
  Buy
</button>

Pre-select a SKU

Add fontdue-store-select with a SKU ID to land on the product page with that SKU already selected. SKUs can attach to collections, font packs, bundles, and individual font styles – for collections and font packs, the ID lives on the Widget codes tab; for bundles and font styles, under the Price field. The product must have a price for the SKU to be selectable.

<button
  type="button"
  fontdue-click="open-store-modal"
  fontdue-store-route="product/Rm9udENvbGxlY3Rpb246NzUzNzU2MDgwNjI1OTk4ODQ5"
  fontdue-store-select="U2t1OjgwODkyMjQxMjUzNTA0NTQwOA==">
  Buy
</button>

Attributes reference