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

# 체크아웃 버튼 블록

> Aftersell Cart 체크아웃 버튼 블록: 구매자를 체크아웃으로 보내는 필수 푸터 CTA예요.

> **Checkout button** 블록은 구매자를 체크아웃으로 안내하는 장바구니 푸터의 기본 클릭 유도 버튼으로, 장바구니에서 체크아웃까지 명확하고 눈에 띄는 경로를 제공해요. 필수 블록이에요.

<div id="behavior">
  ## 동작 방식
</div>

* 버튼은 **현지화된, 마켓에 맞는 체크아웃 URL**을 결정하므로 구매자가 올바른 마켓의 체크아웃으로 이동해요. 결정할 수 없는 경우 표준 `/checkout` 링크로 대체돼요.
* **Go to cart page instead of checkout**이 활성화되면 버튼이 대신 `/cart`로 연결돼요.
* 클릭 시 JavaScript로 이동하므로 테마 자체의 장바구니 처리가 가로챌 수 없으며, 새 탭 열기 의도(Cmd/Ctrl 클릭, 휠 클릭)는 그대로 존중해요.
* 클릭 시 SDK [`checkout` 이벤트](/ko/aftersell/cart/sdk-events)가 발생하며, 이를 구독할 수 있어요.

<div id="settings">
  ## 설정
</div>

| 설정                                      | 제어 대상                                               | 기본값                          |
| --------------------------------------- | --------------------------------------------------- | ---------------------------- |
| **Button label**                        | 텍스트 영역에 입력하는 일반 텍스트 라벨이에요. `{{total_price}}`를 지원해요. | `Checkout • {{total_price}}` |
| **Go to cart page instead of checkout** | 구매자를 체크아웃 대신 `/cart` 페이지로 보내요.                      | 꺼짐                           |

<div id="placement-and-limits">
  ## 배치 및 제한
</div>

* **영역:** 하단.
* **최대 개수:** 장바구니 상태당 1개.
* **상태:** 채워진 장바구니에서만.
* **잠겨 있으며 기본으로 추가돼요.** Checkout button은 제거하거나 숨길 수 없고, 푸터 내에서 위치만 변경할 수 있어요.

<div id="custom-template">
  ## 커스텀 템플릿
</div>

Code 탭에서 [커스텀 템플릿](/ko/aftersell/cart/custom-templates)을 지원하며, 이 블록의 기본 마크업을 여러분의 JSX로 대체해요. 다음은 템플릿이 받는 props예요.

| Prop        | 타입                    | 용도                                                                     |
| ----------- | --------------------- | ---------------------------------------------------------------------- |
| `label`     | `string`              | 정제된 HTML 형태의 버튼 라벨로, `{{total_price}}`가 이미 치환된 상태예요.                   |
| `href`      | `string \| undefined` | 체크아웃 URL이에요. 이동할 곳이 없는 에디터 미리보기에서는 `undefined`예요.                      |
| `isLoading` | `boolean`             | 여기서는 항상 `false`예요: 블록은 로딩 중에는 기본 스켈레톤을 렌더링하고, 장바구니가 준비된 후에만 템플릿을 호출해요. |

<Warning>
  **커스텀 체크아웃 버튼은 체크아웃 추적 기능을 잃어요.** 기본 버튼에는 SDK [`checkout` 이벤트](/ko/aftersell/cart/sdk-events#checkout)를 발생시키고 [장바구니 분석](/ko/aftersell/cart/analytics)을 위한 전환을 기록하는 클릭 핸들러가 연결되어 있어요. 이 핸들러는 커스텀 템플릿에 전달되지 않으므로, `href`만으로 이동하면 두 가지 모두 생략돼요.

  이벤트가 필요하면 이동 전에 `onClick`에서 직접 발생시키세요. 귀속(attribution) 리포팅은 이 방법으로도 복구할 수 없으므로, 정말 다른 마크업이 필요한 경우가 아니라면 [디자인 설정](/ko/aftersell/cart/design-settings)이나 [커스텀 CSS](/ko/aftersell/cart/custom-css)로 기본 버튼의 스타일을 변경하는 것을 권장해요.
</Warning>

`href`에 기본값을 넣지 말고 그대로 렌더링하세요. `href`가 없는 `<a>`는 비활성 상태이며, 이것이 에디터에서 올바른 동작이에요.

<div id="design">
  ## 디자인
</div>

설정 패널의 **Design** 섹션에서 이 블록의 스타일을 지정하세요. 이는 전역 디자인 위에 적용되는 블록별 재정의이며, 비어 있으면 전역 디자인으로 대체돼요.

디자인 설정이 무엇인가요? 자세한 내용은 여기에서 알아보세요: [디자인 설정](/ko/aftersell/cart/design-settings).