电子商务

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

支付处理叠加层

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

Lemon Squeezy

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

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

基本用法

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

将以下 <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/...">
  立即购买
</a>
```

Lemon.js

Lemon.js 还提供了额外的行为，例如以编程方式打开叠加层和处理叠加层事件。

阅读 Lemon Squeezy 开发者入门指南了解更多信息。

Paddle

Paddle 是一种数字产品和服务的计费解决方案。它通过一个叠加层或内联结账处理支付、税务和订阅管理。

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

基本用法

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

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

在你的页面 head 或 body 中添加以下两个 <script> 标签：

<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
<script type="text/javascript">
  Paddle.Setup({
    token: '7d279f61a3499fed520f7cd8c08' // 请替换为客户端 token
  });
</script>

通过添加 paddle_button 类，将页面上的任何元素变成 Paddle 结账按钮：
src/pages/my-product-page.astro
```
<a href="#" class="paddle_button">立即购买</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
    }
  ]'
>
  立即购买
</a>

Paddle.js

与其通过 HTML 数据属性传递数据，不如使用 JavaScript 向结账叠加层发送数据，以便传递多个属性并实现更大的自定义化。你还可以使用内联结账创建升级工作流程。

阅读更多关于使用 Paddle.js 构建内联结账的信息。

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

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

Snipcart

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

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

基本用法

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

完整的指导，包括设置你的 Snipcart 商店，请参见 Snipcart 安装文档。

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

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

在任何 HTML 元素上添加 class="snipcart-add-item" 属性，例如 <button>，点击时可以将商品添加到购物车。同时包括其他数据元素，用于 Snipcart 常见商品属性如价格和描述，以及任何可选字段。

<button
  class="snipcart-add-item"
  data-item-id="astro-print"
  data-item-price="39.99"
  data-item-description="一个装裱好的 Astro 标志印刷品。"
  data-item-image="/assets/images/astro-print.jpg"
  data-item-name="Astro 印刷品"
  data-item-custom1-name="框架颜色"
  data-item-custom1-options="棕色|银色[+10.00]|金色[+20.00]"
  data-item-custom2-name="配送说明"
  data-item-custom2-type="textarea"
>

  加入购物车
</button>

添加一个带有 snipcart-checkout 类的 Snipcart 结账按钮，以打开购物车并允许访客通过结账模态框完成购买。
src/pages/my-product-page.astro
```
<button class="snipcart-checkout">点击这里结账</button>
```

Snipcart JavaScript SDK

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

这使你能够执行如下操作：

检索当前 Snipcart 会话的相关信息，并对购物车执行特定操作。
监听即将到来的事件并动态触发回调。
监听状态变化并接收购物车状态的完整快照。

查看 Snipcart 文档了解更多关于如何将 Snipcart 集成到你的 Astro 项目中的所有选项。

`astro-snipcart`

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

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

社区资源

实践经验：使用 Astro 构建电子商务商店？

创建 GitHub Issue

发送反馈

电子商务

支付处理叠加层

Lemon Squeezy

基本用法

Lemon.js

Paddle

基本用法

Paddle.js

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

Snipcart

基本用法

Snipcart JavaScript SDK

`astro-snipcart`

社区资源