# 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.

Source: https://shopfa.st/docs/elements

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](https://shopfa.st/docs/elements/playground).

Two reasons to use Elements over a buy button. If neither applies, a [buy button](https://shopfa.st/docs/guides/embeds) 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:

```html
<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](https://shopfa.st/docs/elements/payments#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.

| Type | What it shows |
| --- | --- |
| `checkout` | All of it in one element: cart, email, details, questions, tip, ways to pay, terms, pay button |
| `summary` | The cart: lines with quantity steppers, add-ons, the reward bar, discounts, tax and the total |
| `email` | The buyer's email, and the 6-digit code box when Fraud Shield asks for one |
| `payment` | The ways to pay, and the selected one in place (the test card in test mode) |
| `coupon` | A discount code or gift card field, with what is applied |
| `consent` | Your terms, the marketing opt-in, the EU and UK immediate delivery box and who sells |
| `billingAddress` | Name, country, phone and address, as your store asks for them |
| `customFields` | The questions you and your products ask at checkout |
| `payButton` | The pay button with the total, plus your secure checkout note |
| `product` | A product card: picture, title, options, quantity prices and Add to cart |
| `buyButton` | A button that adds a product and opens a checkout overlay |
| `cartButton` | A cart button with a live count that opens the checkout overlay |
| `tip` | Tip amounts, when your store takes tips |
| `offers` | Order bumps, upsells and the reward progress bar |

Every element and its options are in the [reference](https://shopfa.st/docs/elements/reference).

## Split it up

```js
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](https://shopfa.st/docs/elements/security).

## Which one should I use?

| Use | When |
| --- | --- |
| [Buy button or product card](https://shopfa.st/docs/guides/embeds) | You want a button or a card that opens checkout. A script tag and a data attribute, done in five minutes. |
| [Checkout popup](https://shopfa.st/docs/guides/embeds#embedded-checkout) | You want checkout over your page without leaving it, in your store's look. |
| **Elements** | You want checkout inside your page, laid out and styled as part of your design, and you are happy to own the layout. |