跳转到内容

电子商务

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

支付处理叠加层

段落标题 支付处理叠加层

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

Lemon Squeezy

段落标题 Lemon Squeezy

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

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

基本用法

段落标题 基本用法

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

  1. 将以下 <script> 标签添加到页面的 head 或 body 中：

    src/pages/my-product-page.astro
    <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>

  2. 在页面上创建一个锚点标签，链接到你的产品 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.js 还提供了额外的行为，例如以编程方式打开叠加层和处理叠加层事件。

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

Paddle

段落标题 Paddle

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

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

基本用法

段落标题 基本用法

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

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

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

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

  2. 通过添加 paddle_button 类，将页面上的任何元素变成 Paddle 结账按钮：

    src/pages/my-product-page.astro
    <a href="#" class="paddle_button">立即购买</a>

  3. 添加一个 data-items 属性来指定你的产品的 Paddle priceId 和 quantity。你也可以选择性地传递额外的支持的 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
        }
      ]'
    >
      立即购买
    </a>

Paddle.js

段落标题 Paddle.js

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

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

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

段落标题 功能齐全的电子商务解决方案

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

Snipcart

段落标题 Snipcart

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

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

基本用法

段落标题 基本用法

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

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

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

    src/pages/my-product-page.astro
    <body></body>
    <script>
      window.SnipcartSettings = {
        publicApiKey: "YOUR_API_KEY",
        loadStrategy: "on-user-interaction",
      };
    

      (function()...); // 可从 Snipcart 文档中获取
    </script>

  2. 根据 可用的 Snipcart 设置自定义 window.SnipcartSettings，以控制购物车的行为和外观。

    src/pages/my-product-page.astro
    <script>
      window.SnipcartSettings = {
        publicApiKey: "YOUR_API_KEY",
        loadStrategy: "manual",
        version: "3.7.1",
        addProductBehavior: "none",
        modalStyle: "side",
      };
    

      (function()...); // 可从 Snipcart 文档中获取
    </script>

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

    src/pages/my-product-page.astro
    <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>

  4. 添加一个带有 snipcart-checkout 类的 Snipcart 结账按钮，以打开购物车并允许访客通过结账模态框完成购买。

    src/pages/my-product-page.astro
    <button class="snipcart-checkout">点击这里结账</button>

Snipcart JavaScript SDK

段落标题 Snipcart JavaScript SDK

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

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

  • 检索当前 Snipcart 会话的相关信息，并对购物车执行特定操作。
  • 监听即将到来的事件并动态触发回调。
  • 监听状态变化并接收购物车状态的完整快照。
查看 Snipcart 文档 了解更多关于如何将 Snipcart 集成到你的 Astro 项目中的所有选项。

astro-snipcart

段落标题 astro-snipcart

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

社区资源

段落标题 社区资源
贡献

你有什么想法？

创建 GitHub Issue

向我们的团队发出问题警报的最快方法。

社区
京ICP备15031610号-99