> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shoply.gg/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkout Kit

> The checkout taken apart: each part where your layout wants it, dressed as your site is

The [embed](/guides/embeds.md) opens the checkout over your page. The Checkout Kit puts it **in** your page, taken apart. The order can sit in your sidebar, the email box under a heading of yours, the ways to pay in your main column and the Pay button where your design ends. Seven pieces in all, each looking the way your site looks.

It needs product IDs and no key, and it sells a whole cart.

## Live demo

The checkout, as part of this pageStart it and the kit's one piece that is the whole checkout is put in this page, on the page's own ground, as it would stand on yours.

Start the demo

## Adding it

```html theme={null}
<script src="https://shoply.gg/sdk/kit.js" defer></script>

<div data-shoply-piece="summary"></div>
<div data-shoply-piece="email"></div>
<div data-shoply-piece="payment"></div>
<div data-shoply-piece="pay"></div>

<script>
  addEventListener("DOMContentLoaded", function () {
    var kit = shoplyKit({ product: "PRODUCT_ID", variant: "VARIANT_ID" });

    kit.on("paid", function () {
      location.href = "/thank-you";
    });
  });
</script>
```

Or all of it in one place: `<div data-shoply-piece="checkout"></div>`.

## The pieces

| Piece | What it is |
| - | - |
| `checkout` | All of it, in one piece. |
| `payment` | The payment methods, and once Pay is pressed the payment itself and then the paid order. |
| `summary` | What is being bought, its quantity, and what it comes to, with your [offer at checkout](/guides/upselling.md#a-last-offer-at-checkout) under the items. |
| `coupon` | The box a discount code goes in. |
| `email` | Where the order is sent. |
| `billing` | The billing address, for a method that asks for one. |
| `pay` | The Pay button. |

A kit has one of `checkout` and `payment`: that piece is the checkout itself, and the others are optional. A piece you leave out is drawn inside it, where the checkout would have it. The exceptions are `summary` and `coupon`, which are only where you put them.

Where a product asks the buyer [questions](/guides/custom-fields.md), the `payment` piece asks them first, on a page of their own, and the `pay` piece says **Continue to Payment**. The `email` and `billing` pieces stay empty until the buyer goes on to the payment methods, where their answers are one line with **Edit**.

## What it sells

```javascript theme={null}
// One product
shoplyKit({ product: "PRODUCT_ID", variant: "VARIANT_ID", quantity: 1 });

// A cart, all from the one store
shoplyKit({
  items: [
    { product: "PRODUCT_ID", variant: "VARIANT_ID", quantity: 1 },
    { product: "ANOTHER_PRODUCT_ID" },
  ],
  coupon: "WELCOME10",
  email: "ada@example.com",
});
```

A line that names no variant is given its product's first. When your own basket changes, name the cart again: `kit.set({ items: [...] })`.

A line can carry what the buyer chose on your page from your [upsells](/guides/upselling.md): `addons`, the IDs of the product's extras they added, and `offer`, the ID of the offer they added the product through. The [storefront SDK](/sdk/reference.md) gives you both.

```javascript theme={null}
shoplyKit({
  items: [
    { product: "PRODUCT_ID", variant: "VARIANT_ID", addons: ["ADDON_ID"] },
    { product: "OFFERED_PRODUCT_ID", offer: "OFFER_ID" },
  ],
});
```

The checkout prices them: an extra the product no longer has is left out, and an offer whose condition the cart no longer meets is charged at the product's own price. An extra you include is in the order whether it is named or not.

## How it looks

```javascript theme={null}
shoplyKit({
  product: "PRODUCT_ID",
  theme: "auto", // "light", "dark" or "auto"
  look: {
    accent: "#12a37f", // the button, the chosen method. Your store's colour if left out.
    text: "#1d2430",
    muted: "#6c7480",
    field: "#ffffff", // what a box or a row is filled with
    line: "#d9d4c8", // its edge
    radius: 4,
    font: "Georgia, serif",
    css: ".shoply-kit-button { text-transform: uppercase }",
  },
});
```

`css` is rules of your own, for these classes and nothing else:

| Class | What it is |
| - | - |
| `.shoply-kit-field` | A box that is typed in or picked from. |
| `.shoply-kit-question` | The name over a box your [custom fields](/guides/custom-fields.md) ask the buyer to fill in. |
| `.shoply-kit-answers` | The line of the buyer's answers to those questions, with **Edit**, over the payment methods. |
| `.shoply-kit-error` | The line under a box that was refused. |
| `.shoply-kit-method` | A payment method. `[aria-checked="true"]` is the one chosen. |
| `.shoply-kit-method-name` | Its name. |
| `.shoply-kit-consent` | The box asking for leave to email the buyer, where your store [asks at checkout](/guides/win-back.md#asking-at-checkout). |
| `.shoply-kit-button` | Pay. |
| `.shoply-kit-line` | A product in the order, with `-line-name` and `-line-price`. |
| `.shoply-kit-addons` | The extras under a product, a tick each. |
| `.shoply-kit-add` | The box of your offer at checkout, under the items. |
| `.shoply-kit-add-button` | Its **Add**. `[aria-pressed="true"]` once it is added. |
| `.shoply-kit-row` | A line of the totals. |
| `.shoply-kit-total` | The total. |
| `.shoply-kit-apply` | The coupon's Apply. |

With `:hover`, `:focus`, `:focus-within`, `:disabled`, `::placeholder` and `@media`. A rule may set how a thing looks: colours, borders, type, spacing, size, shadows, transitions. It may not fetch anything (no `url()`, no `@import`) or move things about (no `position`, `display` or `transform`). Whatever was left out of what you wrote is said in your page's console.

## From your own script

| Call | What it does |
| - | - |
| `kit.place("summary", "#order")` | Put a piece in an element, or move it there. |
| `kit.remove("summary")` | Take a piece away. |
| `kit.set({ items, quantity, addons, offer, coupon, theme, look })` | Change what it sells or how it looks. `quantity`, `addons` and `offer` are for a cart of one product. |
| `kit.pay()` | Press Pay from a button of your own. |
| `kit.on("ready", fn)` | The checkout is drawn. |
| `kit.on("change", fn)` | `fn({ state, total, currency, items, method, coupon })`. Each item is `{ product, variant, quantity }`, with `addons` and `offer` where it has them. |
| `kit.on("problem", fn)` | `fn({ code, message })`: something the buyer has to put right, or that went wrong. |
| `kit.on("paid", fn)` | The order is paid. |
| `kit.destroy()` | Take the whole kit off the page. |

`shoply:paid` is also sent on `window`, as the embed sends it.

> [!WARNING]
>
> `paid` tells your **page**. It carries no order ID and is no proof of payment. Hand over goods of your own when your server receives the [`order.paid` webhook](/guides/webhooks).

## Things to know

* **Your terms are yours to show.** The kit asks no buyer to agree to your store's terms and shows no link to them, since it is on your own site. Put them on your own page.
* **The pieces run on `checkout.shoply.gg`**, in frames. Card details, the buyer's email and the order never touch your page.
* **Analytics** work as they do for the [embed](/guides/embeds.md#your-stores-analytics): load `shoply.js` on your pages and start it with your store's ID.
* Prices, the buyer's currency, coupons and stock are the same as on your Shoply store.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.