电子商务

使用 Astro，你可以构建多种电子商务方案，从结账链接、托管支付页面，到使用支付服务 API 构建完整的店面。

支付处理浮层

一些支付处理服务（例如 Lemon Squeezy、Paddle）会添加一个支付表单，让你的客户可以在你的网站上购买。这些可以是托管的浮层，也可以嵌入到你网站的页面中。它们可能提供一些基本的定制或网站品牌化功能，并可以作为脚本、按钮或外部链接添加到你的 Astro 项目中。

Lemon Squeezy

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

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

基本用法

以下是将 Lemon Squeezy 的“立即购买”元素添加到 Astro 页面的示例。点击此链接将打开一个结账窗口，并允许访客完成单次购买。

将以下 <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 是一个轻量级的 JavaScript 库，可让你使用 Paddle 构建丰富、集成的订阅计费体验。

基本用法

以下是将 Paddle 的“立即购买”元素添加到 Astro 页面的示例。点击此链接将打开一个结账窗口，并允许访客完成单次购买。

在你的默认支付链接域名（你自己的网站）被 Paddle 批准后，你可以使用 HTML 数据属性将页面上的任何元素变成结账浮层的触发器。

将以下两个 <script> 标签添加到你的页面 head 或 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>

通过添加 paddle_button 类，将页面上的任何元素变成一个 Paddle 结账按钮
src/pages/my-product-page.astro
```
<a href="#" class="paddle_button">Buy Now</a>
```

添加一个 data-items 属性来指定你产品的 Paddle priceId 和 quantity。你还可以选择性地传递额外的支持的 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 项目。这些电子商务平台也可能与其他第三方服务集成，用于用户账户管理、个性化、库存和分析。

Snipcart

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

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

基本用法

以下是配置 Snipcart 结账并向 Astro 页面添加“添加到购物车”和“立即结账”按钮元素的示例。这将允许你的访客将产品添加到购物车，而不会立即被转到结账页面。

有关完整说明，包括设置你的 Snipcart 商店，请参阅 Snipcart 安装文档。

在页面的 <body> 元素之后，添加 Snipcart 安装说明中所示的脚本。

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

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

使用任何可用的 Snipcart 设置来自定义 window.SnipcartSettings，以控制购物车的行为和外观。

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

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

向任何 HTML 元素（例如 <button>）添加 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`

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

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

社区资源

贡献社区赞助