电子商务
使用 Astro,你可以构建多种电子商务选项,从结账链接到托管支付页面,再到使用支付服务 API 构建整个商店前台。
支付处理叠加层
段落标题 支付处理叠加层一些支付处理服务(例如 Lemon Squeezy、Paddle)添加了支付表单,允许你的客户在你的网站上进行购买。这些可以是托管的叠加层或嵌入在你网站的某个页面中。它们可能提供一些基本的自定义或网站品牌化,并且可以作为脚本、按钮或外部链接添加到你的 Astro 项目中。
Lemon Squeezy
段落标题 Lemon SqueezyLemon Squeezy 是一个全能型的支付和订阅平台,支持多币种、全球税务合规、PayPal 集成等功能。它允许你通过账号仪表板创建和管理数字产品和服务,并提供用于结账过程的产品 URL。
基础的 Lemon.js JavaScript 库 允许你通过结账链接销售你的 Lemon Squeezy 产品。
基本用法
段落标题 基本用法以下是在 Astro 页面中添加 Lemon Squeezy “立即购买”元素的示例。点击此链接将打开结账页面,并允许访客完成单次购买。
-
将以下
<script>
标签添加到页面的head
或body
中: -
在页面上创建一个锚点标签,链接到你的产品 URL。点击时包含类
lemonsqueezy-button
以打开结账叠加层。
Lemon.js
段落标题 Lemon.jsLemon.js 还提供了额外的行为,例如以编程方式打开叠加层和处理叠加层事件。
Paddle
段落标题 PaddlePaddle 是一种数字产品和服务的计费解决方案。它通过一个叠加层或内联结账处理支付、税务和订阅管理。
Paddle.js 是一个轻量级的 JavaScript 库,让你使用 Paddle 构建丰富、集成的订阅计费体验。
基本用法
段落标题 基本用法以下是在 Astro 页面中添加 Paddle “立即购买”元素的示例。点击此链接将打开结账页面,并允许访客完成单次购买。
在 Paddle 批准你的默认支付链接域名(你自己的网站)之后,你可以将页面上的任何元素通过使用 HTML 数据属性转变为触发结账叠加层的触发器。
-
在你的页面
head
或body
中添加以下两个<script>
标签: -
通过添加
paddle_button
类,将页面上的任何元素变成 Paddle 结账按钮: -
添加一个
data-items
属性来指定你的产品的 PaddlepriceId
和quantity
。你也可以选择性地传递额外的支持的 HTML 数据属性来预填充数据、处理结账成功,或者设置你的按钮和结账叠加层的样式:
Paddle.js
段落标题 Paddle.js与其通过 HTML 数据属性传递数据,不如使用 JavaScript 向结账叠加层发送数据,以便传递多个属性并实现更大的自定义化。你还可以使用内联结账创建升级工作流程。
功能齐全的电子商务解决方案
段落标题 功能齐全的电子商务解决方案为了让你的网站购物车和结账流程有更多自定义选项,你可以将更完整的金融服务提供商(例如 Snipcart)连接到你的 Astro 项目。这些电子商务平台还可能与其他第三方服务集成,用于用户账号管理、个性化、库存和分析。
Snipcart
段落标题 SnipcartSnipcart 是一个强大的,以开发者为优先的 HTML/JavaScript 购物车平台。
Snipcart 还允许你与第三方服务集成,例如运输提供商,启用 webhooks 以实现高级的电子商务集成,介于你的购物车和其他系统之间,从多个支付网关(例如 Stripe、Paypal 和 Square)中选择,自定义电子邮件模板,甚至提供现场测试环境。
想要一个预构建的 Snipcart 解决方案吗?查看 astro-snipcart
,一个功能齐全的 Astro 社区模板,包括一个可选的设计系统,准备好让你与现有的 Snipcart 账号集成。
基本用法
段落标题 基本用法以下是在 Astro 页面上配置 Snipcart 结账和添加“添加到购物车”以及“立即结账”按钮元素的示例。这将允许你的访客将产品添加到购物车中,而不会立即被发送到结账页面。
-
在页面的
<body>
元素后添加脚本,如 Snipcart 安装说明中所示。 -
根据 可用的 Snipcart 设置自定义
window.SnipcartSettings
,以控制购物车的行为和外观。 -
在任何 HTML 元素上添加
class="snipcart-add-item"
属性,例如<button>
,点击时可以将商品添加到购物车。同时包括其他数据元素,用于 Snipcart 常见商品属性 如价格和描述,以及任何可选字段。 -
添加一个带有
snipcart-checkout
类的 Snipcart 结账按钮,以打开购物车并允许访客通过结账模态框完成购买。
Snipcart JavaScript SDK
段落标题 Snipcart JavaScript SDKSnipcart JavaScript SDK 允许你以编程方式配置、自定义和管理你的 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 组件),用于创建产品、控制购物车等。查看完整教程了解更多信息。