电子商务

使用 Astro，你可以构建多个电子商务选项，从结帐链接到托管支付页面，再到使用支付服务 API 构建整个店面。

¥With Astro, you can build several e-commerce options, from checkout links to hosted payment pages to building an entire storefront using a payment service API.

支付处理覆盖

¥Payment processing overlays

某些支付处理服务（例如 Lemon Squeezy、Paddle）添加了支付表单，以允许你的客户从你的网站购买。这些可以托管覆盖或嵌入到你网站的页面中。这些可能提供一些基本的自定义或网站品牌，并且可以作为脚本、按钮或外部链接添加到你的 Astro 项目中。

¥Some payment processing services (e.g. Lemon Squeezy, Paddle) add a payment form to allow your customer to purchase from your site. These can be hosted overlays or embedded in a page on your site. These may offer some basic customization or site branding, and may be added to your Astro project as scripts, buttons, or external links.

Lemon Squeezy

Lemon Squeezy 是一个用于支付和订阅的一体化平台，具有多币种支持、全球税务合规、PayPal 集成等功能。它允许你通过账户仪表板创建和管理数字产品和服务，并为结帐流程提供产品 URL。

¥Lemon Squeezy is an all-in-one platform for payments and subscriptions with multi-currency support, global tax compliance, PayPal integration and more. It allows you to create and manage digital products and services through your account dashboard and provides product URLs for the checkout process.

基本 Lemon.js JavaScript 库允许你使用结帐链接销售 Lemon Squeezy 产品。

¥The basic Lemon.js JavaScript library allows you to sell your Lemon Squeezy products with a checkout link.

基本用法

¥Basic Usage

以下是将 Lemon Squeezy “立即购买” 元素添加到 Astro 页面的示例。单击此链接将打开结帐并允许访问者完成单次购买。

¥The following is an example of adding a Lemon Squeezy “Buy now” element to an Astro page. Clicking this link will open a checkout and allow the visitor to complete a single purchase.

Add the following <script> tag to your page head or body:
src/pages/my-product-page.astro
```
<script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>
```
Create an anchor tag on the page linking to your product URL. Include the class lemonsqueezy-button to open a checkout overlay when clicked.
src/pages/my-product-page.astro
```
<a class="lemonsqueezy-button" href="https://demo.lemonsqueezy.com/checkout/...">
  Buy Now
</a>
```

Lemon.js

Lemon.js 还提供其他行为，例如以编程方式打开覆盖和处理覆盖事件。

¥Lemon.js also provides additional behavior such as programmatically opening overlays and handling overlay events.

Read the Lemon Squeezy developer getting started guide for more information.

Paddle

Paddle 是数字产品和服务的计费解决方案。它通过覆盖或内联结帐处理付款、税费和订阅管理。

¥Paddle is a billing solution for digital products and services. It handles payments, taxes, and subscription management through an overlay or inline checkout.

Paddle.js 是一个轻量级 JavaScript 库，可让你使用 Paddle 构建丰富、集成的订阅计费体验。

¥Paddle.js is a lightweight JavaScript library that lets you build rich, integrated subscription billing experiences using Paddle.

基本用法

¥Basic Usage

以下是将 Paddle “立即购买” 元素添加到 Astro 页面的示例。单击此链接将打开结帐并允许访问者完成单次购买。

¥The following is an example of adding a Paddle “Buy Now” element to an Astro page. Clicking this link will open a checkout and allow the visitor to complete a single purchase.

在你的默认付款链接域（你自己的网站）被 Paddle 批准后，你可以使用 HTML 数据属性将页面上的任何元素转换为结帐覆盖的触发器。

¥After your default payment link domain (your own website) is approved by Paddle, you can turn any element on your page into a trigger for a checkout overlay using HTML data attributes.

Add the following two <script> tags to your page head or body:

<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
<script type="text/javascript">
  Paddle.Setup({
    token: '7d279f61a3499fed520f7cd8c08' // replace with a client-side token
  });
</script>

Turn any element on your page into a Paddle Checkout button by adding the paddle_button class:
src/pages/my-product-page.astro
```
<a href="#" class="paddle_button">Buy Now</a>
```

Add a data-items attribute to specify your product’s Paddle priceId and quantity. You can also optionally pass additional supported HTML data attributes to prefill data, handle checkout success, or style your button and checkout overlay:

<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 将数据发送到结帐覆盖以传递多个属性和甚至更大的自定义。你还可以使用内联签出创建升级工作流。

¥Instead of passing HTML data attributes, you can send data to the checkout overlay using JavaScript for passing multiple attributes and even greater customization. You can also create upgrade workflows using an inline checkout.

Read more about using Paddle.js to build an inline checkout.

功能齐全的电子商务解决方案

¥Full-featured e-commerce solutions

为了对你网站的购物车和结帐流程进行更多自定义，你可以将功能更全面的金融服务提供商（例如 Snipcart）连接到你的 Astro 项目。这些电子商务平台还可以与其他第三方服务集成，用于用户账户管理、个性化、库存和分析。

¥For more customization over your site’s shopping cart and checkout process, you can connect a more fully-featured financial service provider (e.g. Snipcart) to your Astro project. These e-commerce platforms may also integrate with other third-party services for user account management, personalization, inventory and analytics.

Snipcart

Snipcart 是一个功能强大、以开发者为先的 HTML/JavaScript 购物车平台。

¥Snipcart is a powerful, developer-first HTML/JavaScript shopping cart platform.

Snipcart 还允许你与第三方服务（如运输提供商）集成，启用 webhook 以在购物车和其他系统之间实现高级电子商务集成，从多个支付网关（例如 Stripe、Paypal 和 Square）中进行选择，自定义电子邮件模板，甚至提供实时测试环境。

¥Snipcart also allows you to integrate with third-party services such as shipping providers, enable webhooks for an advanced e-commerce integration between your shopping cart and other systems, choose from several payment gateways (e.g. Stripe, Paypal, and Square), customize email templates, and even provides live testing environments.

基本用法

¥Basic Usage

以下是配置 Snipcart 结帐并将 “添加到购物车” 和 “立即查看” 的按钮元素添加到 Astro 页面的示例。这将允许你的访问者将产品添加到购物车，而不会立即发送到结帐页面。

¥The following is an example of configuring a Snipcart checkout and adding button elements for “Add to cart” and “Check out now” to an Astro page. This will allow your visitors to add products to a cart without being immediately sent to a checkout page.

For complete instructions, including setting up your Snipcart store, please see the Snipcart installation documentation.

Add the script as shown in the Snipcart installation instructions on your page after the <body> element.

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

  (function()...); // available from the Snipcart documentation
</script>

Customize window.SnipcartSettings with any of the available Snipcart settings to control the behavior and appearance of your cart.

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

  (function()...); // available from the Snipcart documentation
</script>

Add class="snipcart-add-item" to any HTML element, such as a <button>, to add an item to the cart when clicked on. Also include any other data elements for common Snipcart product attributes such as price and description, and any optional fields.

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

Add a Snipcart checkout button with the snipcart-checkout class to open the cart and allow guests to complete their purchase with a checkout modal.
src/pages/my-product-page.astro
```
<button class="snipcart-checkout">Click here to checkout</button>
```

Snipcart JavaScript SDK

Snipcart JavaScript SDK 允许你以编程方式配置、自定义和管理 Snipcart 购物车。

¥The Snipcart JavaScript SDK lets you configure, customize and manage your Snipcart cart programmatically.

这允许你执行如下操作：

¥This allows you to perform actions such as:

检索有关当前 Snipcart 会话的相关信息并将某些操作应用于购物车。
监听传入事件并动态触发回调。
监听状态变化并接收购物车状态的完整快照。

See the Snipcart documentation for more information about all the options to integrate Snipcart with your Astro Project.

`astro-snipcart`

有两个 astro-snipcart 社区包可以简化使用 Snipcart。

¥There are two astro-snipcart community packages that can simplify using Snipcart.

@lloydjatkinson/astro-snipcart Astro 模板：此 Astro 模板包含一个可选的设计系统，可提供完整的开箱即用的电子商务解决方案。在其自己的广泛文档站点上了解更多信息，包括构建 astro-snipcart 背后的动机，它为你提供了一种方便的 Astro-native 方式来与 Snipcart API 进行交互。
@Adammatthiesen/astro-snipcart 整合：此集成深受 astro-snipcart 主题的启发，并提供了 Astro 组件（或 Vue 组件），你可以将其添加到现有的 Astro 项目中以创建产品、控制购物车等。请参阅完整教程了解更多信息。

社区资源

¥Community Resources