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

# Checkout button block

> The Aftersell Cart Checkout button block: the required footer CTA that sends shoppers to checkout.

> The **Checkout button** block is the primary call-to-action in the cart footer that takes shoppers to checkout, giving them a clear, prominent path from the cart to checkout. It's a required block.

## Behavior

* The button resolves a **localized, market-correct checkout URL**, so shoppers land in the right market's checkout. If that can't be resolved, it falls back to the standard `/checkout` link.
* With **Go to cart page instead of checkout** enabled, the button links to `/cart` instead.
* Clicking navigates via JavaScript so a theme's own cart handling can't intercept it, while still respecting new-tab intents (Cmd/Ctrl-click, middle-click).
* The click emits the SDK [`checkout` event](/aftersell/cart/sdk-events), which you can subscribe to.

## Settings

| Setting                                 | What it controls                                                     | Default                      |
| --------------------------------------- | -------------------------------------------------------------------- | ---------------------------- |
| **Button label**                        | Plain-text label entered in a text area. Supports `{{total_price}}`. | `Checkout • {{total_price}}` |
| **Go to cart page instead of checkout** | Sends shoppers to your `/cart` page instead of straight to checkout. | Off                          |

## Placement and limits

* **Region:** bottom.
* **Maximum:** 1 per cart state.
* **State:** filled cart only.
* **Locked and added by default.** The Checkout button can't be removed or hidden, only repositioned within the footer.

## Custom template

Supports a [custom template](/aftersell/cart/custom-templates) from its Code tab, which replaces this block's built-in markup with your JSX. These are the props it receives.

| Prop        | Type                  | What it's for                                                                                                                 |
| ----------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `label`     | `string`              | The button label as sanitized HTML, with `{{total_price}}` resolved.                                                          |
| `href`      | `string \| undefined` | The checkout URL. `undefined` in the editor preview, where there's nothing to navigate to.                                    |
| `isLoading` | `boolean`             | Always `false` here: the block renders its built-in skeleton during load and only calls your template once the cart is ready. |

<Warning>
  **A custom checkout button loses checkout tracking.** The built-in button attaches a click handler that emits the SDK [`checkout` event](/aftersell/cart/sdk-events#checkout) and records the conversion for [cart analytics](/aftersell/cart/analytics). That handler is not passed to custom templates, so navigating via `href` alone skips both.

  If you need the event, emit it yourself from an `onClick` before navigation. Attribution reporting still can't be recovered this way, so prefer restyling the built-in button with [design settings](/aftersell/cart/design-settings) or [custom CSS](/aftersell/cart/custom-css) unless you truly need different markup.
</Warning>

Render `href` as-is rather than defaulting it. An `<a>` with no `href` is inert, which is the correct behavior in the editor.

## Design

Style this block with its **Design** section in the settings panel. These are per-block overrides that layer on top of your global design and fall back to it when blank.

What are design settings? Learn more here: [Design settings](/aftersell/cart/design-settings).