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

# Checkout Button

![Checkout Button preview](https://raw.githubusercontent.com/thedesignmvp/framerfy-assets/refs/heads/main/docs/Checkout%20%20Button.png)

A Shopify checkout trigger component for Framer that reads the current cart from `localStorage`, creates a Shopify cart via the Storefront API, and redirects the user to the Shopify checkout URL.

***

## What It Does

The **Checkout Button** is a wrapper component — it accepts any Framer element as its child and makes it trigger the Shopify checkout flow when clicked. The button itself has no visual style of its own; the appearance is entirely defined by whatever component you place inside it.

Key behaviors at a glance:

* \*\*Reads cart from \*\*`localStorage` — on click, reads the `cart` key from `localStorage`, which is expected to be a JSON array of items with `variantId` and `quantity`.
* **Creates a Shopify cart** — sends a `cartCreate` GraphQL mutation to the Shopify Storefront API with all items in the cart.
* **Redirects to checkout** — opens the Shopify-generated `checkoutUrl` in a new tab once the cart is successfully created.
* **Silent on empty cart** — if the cart is empty or missing, the click does nothing and logs a warning to the console.
* **Accepts any child element** — wraps whatever Framer component or design element you place inside it, so the visual design of the button is completely up to you.

## Property Controls

| Property     | Type               | Description                                                                                                                                                                                                                         |
| :----------- | :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Children** | Component Instance | The Framer component or element that visually represents the button. Click events on this element trigger the checkout flow. Any component can be used — a styled rectangle, a text layer, a component from your assets panel, etc. |

## Notes

* This component requires `window.DOMAIN` and `window.ACCESSTOKEN` to be set globally on the page. Without these, the Shopify API call will fail.
* The cart data must be stored in `localStorage` under the key `cart` as a JSON array. Each item in the array must have a `variantId` (numeric Shopify variant ID) and optionally a `quantity` (defaults to `1` if not provided).
* The checkout URL opens in a **new tab** (`window.open`).
* If the Shopify API returns no checkout URL (e.g. due to an invalid variant ID or API error), the component logs an error to the console and does not redirect.
* This component has no fallback UI for errors — error states are only visible in the browser console.