전자 상거래

Astro를 사용하면 결제 링크부터 호스팅된 결제 페이지, 결제 서비스 API를 사용한 전체 매장 구축까지 다양한 전자상거래 옵션을 구축할 수 있습니다.

결제 처리 오버레이

일부 결제 처리 서비스 (예: Lemon Squeezy, Paddle)는 고객이 사이트에서 구매할 수 있도록 결제 양식을 추가합니다. 이는 오버레이로 호스팅되거나 사이트의 페이지에 삽입될 수 있습니다. 이는 몇 가지 기본적인 사용자 정의 또는 사이트 브랜딩을 제공할 수 있으며 Astro 프로젝트에 스크립트, 버튼 또는 외부 링크로 추가될 수 있습니다.

Lemon Squeezy

Lemon Squeezy는 다중 통화 지원, 글로벌 세금 준수, PayPal 통합 등을 갖춘 결제 및 구독을 위한 올인원 플랫폼입니다. 계정 대시보드를 통해 디지털 제품 및 서비스를 생성 및 관리할 수 있으며 결제 프로세스를 위한 제품 URL을 제공합니다.

기본 Lemon.js JavaScript 라이브러리를 사용하면 결제 링크를 통해 Lemon Squeezy 제품을 판매할 수 있습니다.

기본 사용법

다음은 Astro 페이지에 Lemon Squeezy “Buy Now” 요소를 추가하는 예시입니다. 이 링크를 클릭하면 결제가 열리고 방문자가 단일 구매를 완료할 수 있습니다.

다음 <script> 태그를 페이지의 head 또는 body에 추가하세요.
src/pages/my-product-page.astro
```
<script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>
```
제품 URL로 연결되는 페이지에 앵커 태그를 만듭니다. 클릭 시 결제 오버레이를 열려면 lemonsqueezy-button 클래스를 포함하세요.
src/pages/my-product-page.astro
```
<a class="lemonsqueezy-button" href="https://demo.lemonsqueezy.com/checkout/...">
  Buy Now
</a>
```

Lemon.js

또한 Lemon.js는 프로그래밍 방식으로 오버레이 열기 및 오버레이 이벤트 처리와 같은 추가 동작을 제공합니다.

자세한 내용은 Lemon Squeezy 개발자 시작 가이드를 읽어보세요.

Paddle

Paddle은 디지털 제품 및 서비스에 대한 결제 솔루션입니다. 오버레이 또는 인라인 체크아웃을 통해 결제, 세금 및 구독 관리를 처리합니다.

Paddle.js는 Paddle을 사용하여 풍부하고 통합된 구독 결제 환경을 구축할 수 있는 경량 JavaScript 라이브러리입니다.

기본 사용법

다음은 Astro 페이지에 Paddle “Buy Now” 요소를 추가하는 예시입니다. 이 링크를 클릭하면 결제가 열리고 방문자가 단일 구매를 완료할 수 있습니다.

기본 결제 링크 도메인 (자신의 웹사이트)이 Paddle에 의해 승인되면 HTML 데이터 속성을 사용하여 페이지의 모든 요소를 결제 오버레이에 대한 트리거로 전환할 수 있습니다.

페이지의 head 또는 body에 다음 두 개의 <script> 태그를 추가하세요.

<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
<script type="text/javascript">
  Paddle.Setup({
    token: '7d279f61a3499fed520f7cd8c08' // 클라이언트 측 토큰으로 대체
  });
</script>

paddle_button 클래스를 추가하여 페이지의 모든 요소를 Paddle Checkout 버튼으로 전환하세요.
src/pages/my-product-page.astro
```
<a href="#" class="paddle_button">Buy Now</a>
```
제품의 Paddle priceId 및 quantity을 지정하려면 data-items 속성을 추가하세요. 지원되는 HTML 데이터 속성을 선택적으로 추가하여 데이터를 미리 채우거나 결제 성공을 처리하거나 버튼 및 결제 오버레이 스타일을 지정할 수도 있습니다.
src/pages/my-product-page.astro
```
<a
  href="#"
  class="paddle_button"
  data-display-mode="overlay"
  data-theme="light"
  data-locale="en"
  data-success-url="https://example.com/thankyou"
  data-items='[
    {
      "priceId": "pri_01gs59hve0hrz6nyybj56z04eq",
      "quantity": 1
    }
  ]'
>
  Buy now
</a>
```

Paddle.js

HTML 데이터 속성을 전달하는 대신 JavaScript를 사용하여 결제 오버레이로 데이터를 보내 여러 속성과 더 많은 사용자 정의를 전달할 수 있습니다. 인라인 체크아웃을 사용하여 업그레이드 워크플로를 생성할 수도 있습니다.

Paddle.js를 사용한 인라인 체크아웃 구축에 대해 자세히 알아보세요.

모든 기능을 갖춘 전자 상거래 솔루션

사이트의 쇼핑 카트 및 결제 프로세스에 대한 추가 사용자 정의를 위해 더 완전한 기능을 갖춘 금융 서비스 제공업체 (예: Snipcart)를 Astro 프로젝트에 연결할 수 있습니다. 이러한 전자 상거래 플랫폼은 사용자 계정 관리, 개인화, 재고 및 분석을 위해 다른 제3자 서비스와 통합될 수도 있습니다.

Snipcart

Snipcart는 개발자 중심의 강력한 HTML/JavaScript 쇼핑 카트 플랫폼입니다.

또한 Snipcart를 사용하면 쇼핑 공급자와 같은 제3자 서비스와 통합하고, 쇼핑 카트와 다른 시스템 간의 고급 전자 상거래 통합을 위한 웹후크를 활성화하고, 여러 결제 게이트웨이 (예: Stripe, Paypal 및 Square) 중에서 선택하고, 이메일을 맞춤 설정할 수 있습니다. 템플릿을 제공하며 라이브 테스트 환경도 제공합니다.

기본 사용법

다음은 Snipcart 체크아웃을 구성하고 Astro 페이지에 “Add to cart” 및 “Check out now” 버튼 요소를 추가하는 예시입니다. 이렇게 하면 방문자가 결제 페이지로 즉시 이동하지 않고도 장바구니에 제품을 추가할 수 있습니다.

Snipcart 스토어 설정을 포함한 전체 지침은 Snipcart 설치 문서를 참조하세요.

Snipcart 설치 지침에 나와있는 대로 페이지의 <body> 요소 뒤에 스크립트를 추가하세요.

<body></body>
<script>
  window.SnipcartSettings = {
    publicApiKey: "YOUR_API_KEY",
    loadStrategy: "on-user-interaction",
  };

  (function()...); // Snipcart 문서를 참조하세요.
</script>

사용 가능한 Snipcart 설정을 사용하여 window.SnipcartSettings를 맞춤설정하여 장바구니의 동작과 모양을 제어하세요.

<script>
  window.SnipcartSettings = {
    publicApiKey: "YOUR_API_KEY",
    loadStrategy: "manual",
    version: "3.7.1",
    addProductBehavior: "none",
    modalStyle: "side",
  };

  (function()...); // Snipcart 문서를 참조하세요.
</script>

클릭 시 장바구니에 항목을 추가하려면 <button>과 같은 HTML 요소에 class="snipcart-add-item"을 추가하세요. 또한 가격, 설명, 선택 필드 등 일반적인 Snipcart 제품 속성에 대한 기타 데이터 요소도 포함하세요.

<button
  class="snipcart-add-item"
  data-item-id="astro-print"
  data-item-price="39.99"
  data-item-description="A framed print of the Astro logo."
  data-item-image="/assets/images/astro-print.jpg"
  data-item-name="Astro Print"
  data-item-custom1-name="Frame color"
  data-item-custom1-options="Brown|Silver[+10.00]|Gold[+20.00]"
  data-item-custom2-name="Delivery instructions"
  data-item-custom2-type="textarea"
>
  Add to cart
</button>

snipcart-checkout 클래스와 함께 Snipcart 체크아웃 버튼을 추가하여 카트를 열고 손님이 체크아웃 모달로 구매를 완료할 수 있도록 하세요.
src/pages/my-product-page.astro
```
<button class="snipcart-checkout">Click here to checkout</button>
```

Snipcart JavaScript SDK

Snipcart JavaScript SDK를 사용하면 Snipcart 카트를 프로그래밍 방식으로 구성, 사용자 정의 및 관리할 수 있습니다.

이를 통해 다음과 같은 작업을 수행할 수 있습니다.

현재 Snipcart 세션에 대한 관련 정보를 검색하고 카트에 특정 작업을 적용합니다.
들어오는 이벤트를 수신하고 콜백을 동적으로 트리거합니다.
상태 변경을 수신하고 카트 상태의 전체 스냅샷을 수신합니다.

Snipcart를 Astro 프로젝트와 통합하는 모든 옵션에 대한 자세한 내용은 Snipcart 문서를 참조하세요.

`astro-snipcart`

Snipcart 사용을 단순화할 수 있는 두 개의 astro-snipcart 커뮤니티 패키지가 있습니다.

@lloydjatkinson/astro-snipcart Astro 템플릿: 이 Astro 템플릿에는 즉시 사용 가능한 완전한 전자 상거래 솔루션을 위한 선택적 디자인 시스템이 포함되어 있습니다. Snipcart API와 상호 작용할 수 있는 편리한 Astro 기본 방법인 astro-snipcart를 구축한 동기를 포함한 광범위한 자체 문서 사이트에서 자세히 알아보세요.
@Adammatthiesen/astro-snipcart 통합: 이 통합은 astro-snipcart 테마에서 크게 영감을 받았으며 제품 생성, 카트 제어 등을 위해 기존 Astro 프로젝트에 추가할 수 있는 Astro 컴포넌트 (또는 Vue 컴포넌트)를 제공합니다. 자세한 내용은 전체 튜토리얼을 참조하세요.

커뮤니티 자료

실습 경험: Astro로 구축하는 전자상거래 매장?

GitHub Issue 생성

의견 보내기

전자 상거래

결제 처리 오버레이

Lemon Squeezy

기본 사용법

Lemon.js

Paddle

기본 사용법

Paddle.js

모든 기능을 갖춘 전자 상거래 솔루션

Snipcart

기본 사용법

Snipcart JavaScript SDK

`astro-snipcart`

커뮤니티 자료