Skip to content

Latest commit

 

History

History
195 lines (138 loc) · 11.3 KB

ecommerce.mdx

File metadata and controls

195 lines (138 loc) · 11.3 KB
Raw
title description i18nReady
전자 상거래
Astro 사이트에 전자상거래 옵션을 추가하는 방법 소개
true

import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro' import ReadMore from '/components/ReadMore.astro'

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

결제 처리 오버레이

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

Lemon Squeezy

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

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

기본 사용법

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

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

    <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>

  2. 제품 URL로 연결되는 페이지에 앵커 태그를 만듭니다. 클릭 시 결제 오버레이를 열려면 lemonsqueezy-button 클래스를 포함하세요.

    <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 데이터 속성을 사용하여 페이지의 모든 요소를 결제 오버레이에 대한 트리거로 전환할 수 있습니다.

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

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

  2. paddle_button 클래스를 추가하여 페이지의 모든 요소를 Paddle Checkout 버튼으로 전환하세요.

    <a href="#" class="paddle_button">Buy Now</a>

  3. 제품의 Paddle priceId 및 quantity을 지정하려면 data-items 속성을 추가하세요. 지원되는 HTML 데이터 속성을 선택적으로 추가하여 데이터를 미리 채우거나 결제 성공을 처리하거나 버튼 및 결제 오버레이 스타일을 지정할 수도 있습니다.

    <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) 중에서 선택하고, 이메일을 맞춤 설정할 수 있습니다. 템플릿을 제공하며 라이브 테스트 환경도 제공합니다.

:::tip 대신 사전 구축된 Snipcart 솔루션을 원하시나요? 선택적인 디자인 시스템을 포함하여 모든 기능을 갖춘 Astro 커뮤니티 템플릿인 astro-snipcart를 확인하세요. 기존 Snipcart 계정과 통합할 수 있습니다. :::

기본 사용법

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

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

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

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

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

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

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

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

  3. 클릭 시 장바구니에 항목을 추가하려면 <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>

  4. snipcart-checkout 클래스와 함께 Snipcart 체크아웃 버튼을 추가하여 카트를 열고 손님이 체크아웃 모달로 구매를 완료할 수 있도록 하세요.

    <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 컴포넌트)를 제공합니다. 자세한 내용은 전체 튜토리얼을 참조하세요.

커뮤니티 자료