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

# 익스프레스 결제 모듈

> Upcart 드로어에서 기본 체크아웃 버튼 아래에 가속 체크아웃 버튼을 표시하세요.

<div id="overview">
  # 개요
</div>

이 기능을 사용하면 구매자의 저장된 결제 수단을 활용한 더 빠른 체크아웃 경험을 위해 Shopify의 익스프레스 결제 옵션(Shop Pay, Apple Pay, Google Pay 등)을 표시할 수 있어요.

익스프레스 또는 가속 체크아웃 버튼은 재방문 고객이 결제 및 배송 정보를 수동으로 입력하지 않고 더 빠르게 구매를 완료하도록 도와줘요. 이 버튼들은 카트의 **기본 Checkout 버튼 아래**에 나타나며 Shopify가 구동해요.

Upcart는 이 버튼들을 시각적·구조적으로 지원하지만, **동작과 표시 여부는 Shopify가 제어해요**.

📘 자세한 내용은 [Shopify의 가속 체크아웃 문서](https://help.shopify.com/en/manual/payments/accelerated-checkouts)와 [가속 체크아웃 버튼에 대한 Shopify 릴리스 노트](https://shopify.dev/changelog/developer-preview-accelerated-checkout-buttons-on-storefront-now-support-shopify-functions-bundles-and-have-improved-performance)를 참고하세요.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/express-payments-shop-pay-paypal-google.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=dece6cba6c512237980466fd1b02dd87" alt="Upcart 체크아웃 버튼 아래에 있는 Shop Pay, PayPal, Google Pay 익스프레스 버튼" width="600" data-path="images/upcart/express-payments-shop-pay-paypal-google.png" />

<div id="getting-express-payments-to-show">
  # **익스프레스 결제가 표시되도록 하기**
</div>

Upcart 안에 가속 체크아웃 버튼을 표시하려면 Shopify 테마가 이미 스토어프론트에 해당 버튼을 포함하고 있어야 해요. 다음과 같이 할 수 있어요:

1. **테마 코드에 스니펫 추가하기**

   * **Online Store > Themes > Edit Code**로 이동하세요
   * **layout/theme.liquid** 파일을 여세요
   * 여는 `<body>` 태그를 찾으세요 (`</body>`가 아니에요)
   * 그 태그 아래에 다음 코드를 붙여넣으세요:

     ```
     {% if additional_checkout_buttons %} <div style="display: none !important"> {{ content_for_additional_checkout_buttons }} </div> {% endif %}
     ```
2. 파일을 저장하세요

다음은 어떻게 보여야 하는지에 대한 예시예요:

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/express-payments-additional-checkout-buttons-liquid.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=25dd197de897db2a448ed1d15c4a8b1e" alt="theme.liquid의 body 태그 아래에 추가된 additional checkout buttons Liquid 스니펫" width="1076" height="388" data-path="images/upcart/express-payments-additional-checkout-buttons-liquid.png" />

이 작업이 완료되면 Upcart가 익스프레스 결제 옵션을 감지하고 렌더링할 수 있어요.

💡 코드를 직접 편집하고 싶지 않다면 개발자나 [Shopify Expert](https://experts.shopify.com)에게 문의하세요.

<div id="payment-gateways">
  # 결제 게이트웨이
</div>

**Payment gateways** 카드는 **레거시** Express Payments 모듈에 속해요 — 스토어가 아직 이전 버전을 사용 중인 경우에만 보여요. 이 카드는 Upcart가 카트에 표시할 수 있는 익스프레스 게이트웨이를 나열하며, 각각을 켜거나 끄고 표시 순서를 설정할 수 있어요. 여섯 개의 게이트웨이가 나열돼요:

* Shop Pay
* PayPal
* Apple Pay
* Amazon Pay
* Meta Pay
* Google Pay — 나열되지만 **Coming Soon**으로 표시되며 선택할 수 없어요

Google Pay는 의도적으로 보류되어 있어요: 카트가 변경될 때 새로 고침되지 않아서 클릭하기 전에 카트를 편집한 사람에게 오래된 가격을 보여줄 수 있기 때문이에요. 나머지 다섯 개는 활성화하고 순서를 변경할 수 있어요 — 활성화된 게이트웨이는 순서가 있는 목록에 있으며, 각 행 옆의 위아래 화살표로 순서를 변경하고, 비활성화된 게이트웨이는 아래에 있으며 클릭하면 다시 추가돼요.

<Note>
  여기서 게이트웨이를 활성화한다고 해서 표시가 보장되는 것은 아니에요. Shopify 스토어에서 활성화되어 있지 않거나 쇼핑객이 사용 자격이 없으면 실제 카트에서 게이트웨이가 숨겨져요 — 예를 들어 Apple Pay 버튼은 지원되는 기기와 브라우저에서만 표시돼요. 게이트웨이 활성화 방법과 각각의 자격 규칙은 [Shopify의 가속 체크아웃 문서](https://help.shopify.com/en/manual/payments/accelerated-checkouts)를 참고하세요.
</Note>

<div id="accelerated-checkout-buttons-design">
  # 가속 체크아웃 버튼 디자인
</div>

버튼 설정이 완료되면 Upcart 안에서 버튼이 표시되는 방식을 커스터마이징할 수 있어요.

<div id="button-height">
  ## **버튼 높이**
</div>

* **Default button height**와 **Mobile button height**는 각각 **25px에서 55px**까지 별도로 설정돼요
* 각각 같은 값에 연결된 숫자 필드와 슬라이더가 있어요 — 더 편한 쪽을 사용하세요

<div id="checkout-button-alignment">
  ## **체크아웃 버튼 정렬**
</div>

* 익스프레스 버튼의 정렬 방식을 선택하세요:

  * **Left**
  * **Right**
  * **Center**
  * **Space Between**

<div id="row-gap">
  ## **행 간격**
</div>

* 쌓인 버튼 사이의 수직 간격을 **0px에서 40px**까지 설정하세요

<div id="advanced-display-options">
  # **고급 표시 옵션**
</div>

<div id="hide-buyer-consent">
  ## **구매자 동의 숨기기**
</div>

이 옵션을 활성화하면 구독 제품이 카트에 있을 때 일반적으로 표시되는 구매자 동의 메시지를 숨겨요. 관련 정보를 이미 다른 곳에서 제공하고 있다면 시각적 혼잡을 줄이는 데 도움이 될 수 있어요.

<div id="render-cart-in-shadow-dom">
  ## **Shadow DOM에서 카트 렌더링하기**
</div>

Shopify 테마의 CSS가 Upcart의 스타일링을 방해하지 않도록 하려면 이 옵션을 활성화하세요.\
모든 브라우저와 기기에서 일관된 디자인이 보장돼요.

이 옵션을 활성화하면 **Settings > Cart settings > Advanced Settings**의 동일한 설정도 함께 적용돼요.

<div id="theme-compatibility-notes">
  ## **테마 호환성 참고 사항**
</div>

* 이제 Shopify는 가속 체크아웃 버튼에 대해 **엄격한 스타일링 규칙**을 적용해요.
* Upcart의 새 버전은 이 규칙을 완전히 지원하며 Shopify의 스타일링 동작을 따라요.

⚠️ 현재 모듈에서는 상단에 **Revert To Legacy Express Payments** 버튼이 있는 **Revert To Old Version** 배너가 나타나요. 이는 오래된 테마에만 필요해요 — 되돌리면 Shopify 스타일링 이전의 동작으로 돌아가므로, 테마가 정말로 필요로 하지 않는 한 그대로 두세요.

되돌리는 경우에는 이전 모듈에서 저장된 스타일링 옵션을 모두 선택 해제하여 새 버전을 방해하지 않도록 하세요.
