Elements: checkout inside your own page

Checkout as separate pieces you place and style inside your own page: the cart, the email field, ways to pay, the pay button and more, all sharing one cart.

Buy buttons and the checkout popup open your store’s checkout on top of your page. Elements give you the checkout in pieces instead: the order summary, the email field, the payment methods, the pay button and a dozen more. You decide where each one goes and what it looks like, and they all share one cart.

Try every element, layout and style without writing code in the playground.

Two reasons to use Elements over a buy button. If neither applies, a buy button is less work:

• The checkout is part of your page, not a layer over it. It sits in your layout, next to your own product photos.
• It wears your brand: your colors, your typeface, your corner radius, your spacing.

The trade-off is that you own the layout.

Quick start

One script tag from your store, no build step, nothing to install:

<div id="checkout"></div>

<script src="https://lumenfold.shopfa.st/_sf/elements.js"></script>
<script>
  const shopfast = ShopFast();
  const elements = shopfast.elements({
    items: [{ product: "amalfi-golden-hour-presets", quantity: 1 }],
  });

  elements.create("checkout").mount("#checkout");
  elements.on("complete", (e) => console.log("Paid", e.order.number));
</script>

That is a complete checkout: the cart, the email field, the buyer’s details, ways to pay, your terms and a pay button. ShopFast() takes the store from the address the script came from; pass ShopFast({ store: "https://lumenfold.shopfa.st" }) to load the script from somewhere else.

While your store is in test mode, the checkout takes simulated payments and any website may show it, so you can build your page before you list it under allowed websites. See Test mode.

The elements

elements.create(type, options) takes one of these. Every element made from the same elements() call shares one cart: change a quantity in summary and the total in checkout follows.

Every element and its options are in the reference.

Split it up

const elements = shopfast.elements({ items: [{ product: "amalfi-golden-hour-presets" }] });

elements.create("summary").mount("#summary");
elements.create("email").mount("#email");
elements.create("billingAddress").mount("#details");
elements.create("payment").mount("#payment");
elements.create("consent").mount("#consent");
elements.create("payButton").mount("#pay");

Mount what your store needs. If your store asks for something no mounted element shows (a country, your terms), a trace event says so a moment after the elements load, and paying fails with element_missing until you add it.

How it works

Each element is a frame from your store’s own address, and one hidden frame, the controller, holds the cart and talks to your store. Elements send what the buyer types straight to the controller, frame to frame, and the controller tells every element the new state. Your page gets events, never the buyer’s email, address or order access.

Prices, discounts, tax, Fraud Shield, sanctions and the EU and UK withdrawal box are decided by your store, exactly as on your own checkout, and the elements only show what the store decided. More in Security and CSP.

Which one should I use?