使用 Gatsby 构建电子商务

相关源文件

• docs/docs/images/plugin-starter-theme-flowchart.png
• docs/docs/images/remote-file-node-blogpost.png
• docs/docs/porting-to-gatsby.md
• docs/docs/query-filters.md
• docs/docs/schema-sift.md
• docs/docs/themes.md
• docs/tutorial/building-a-theme.md
• docs/tutorial/ecommerce-tutorial/index.md
• docs/tutorial/ecommerce-tutorial/stripe-checkout-clientside-functionality.png
• docs/tutorial/prismic-source-graphql-tutorial.md
• starters/blog/package-lock.json
• starters/blog/package.json
• starters/default/package-lock.json
• starters/default/package.json
• starters/gatsby-starter-minimal-ts/package-lock.json
• starters/gatsby-starter-minimal-ts/package.json
• starters/gatsby-starter-minimal/package-lock.json
• starters/gatsby-starter-minimal/package.json
• starters/gatsby-starter-theme-workspace/example/package.json
• starters/gatsby-starter-wordpress-blog/package-lock.json
• starters/gatsby-starter-wordpress-blog/package.json
• starters/hello-world/package-lock.json
• starters/hello-world/package.json

本文详细解释了如何使用 Stripe 作为支付处理器，在 Gatsby 网站中实现电子商务功能。它涵盖了使用 Gatsby 构建安全、高性能电子商务网站的架构、实现模式和最佳实践。

有关通用 Gatsby 插件的信息，请参阅插件生态系统。

概述

Gatsby 凭借其静态站点生成能力、性能优化以及与 Stripe 等支付处理器的无缝集成，为构建电子商务网站提供了出色的平台。在使用 Gatsby 构建电子商务功能时，您可以利用纯客户端结账流程，而无需专用的后端服务器。

使用 Gatsby 构建电子商务的优势

• 安全性：静态站点本身具有较小的攻击面
• 性能：预渲染页面加载迅速，提供出色的用户体验
• 无服务器架构：Stripe 的纯客户端结账无需管理后端服务器
• 成本效益：静态托管通常比动态服务器托管便宜
• 开发者体验：使用 React 和 GraphQL 进行现代 JavaScript 开发

来源：docs/tutorial/ecommerce-tutorial/index.md10-17

架构

Gatsby 电子商务站点通常由用 Gatsby 构建的静态前端和 Stripe 处理的支付后端组成。该架构利用 Stripe 的客户端结账功能，从而避免了对自定义服务器组件的需求。

高层架构

来源：docs/tutorial/ecommerce-tutorial/index.md24-29

结账时的数据流

来源：docs/tutorial/ecommerce-tutorial/index.md24-29 docs/tutorial/ecommerce-tutorial/index.md42-65

与 Stripe 集成

设置 Stripe

要将 Stripe 与您的 Gatsby 站点集成，您需要：

1. 一个 Stripe 账户
2. Stripe 可发布密钥和秘密密钥
3. Stripe.js 库
4. 在 Stripe 控制面板中配置好的产品

此集成利用了 Stripe 的纯客户端结账功能，这意味着您不需要服务器端组件来处理支付。

来源：19-23 67-79

加载 Stripe.js

Stripe.js 应从 Stripe 的服务器安全加载，以符合 PCI 要求。推荐的模式是创建一个仅在需要时才延迟加载 Stripe 的实用函数。

为获得最佳安全实践，请在用户可能开始结账过程的每个页面加载 Stripe.js，而不仅仅是在结账页面本身。这有助于 Stripe 的欺诈检测系统更有效地工作。

来源：43-65

启用纯客户端结账

要使用 Stripe 的纯客户端结账，您需要在 Stripe 控制面板设置中启用它。导航到 Stripe 控制面板中的结账设置，并启用“Client-only integration”（纯客户端集成）选项。

此外，在您的 Stripe 账户设置中设置一个商家名称，以确保结账页面正确品牌化。

来源：80-88

实现模式

根据产品目录的复杂程度，有几种在 Gatsby 站点中实现电子商务功能的模式。

实现比较

来源：90-93

单品结账

对于只有单个产品（如电子书或服务）的简单用例，您可以实现一个点击后重定向到 Stripe Checkout 的按钮。

在这种模式中，价格 ID 直接硬编码在组件中。

来源：94-96

多品结账

对于有多个产品但不需要购物车的站点，您可以创建多个按钮，每个按钮都配置有自己的产品 ID。

然后，您将把此组件用于站点上的每个产品，并传入相应的价格 ID。

来源：94-96

购物车集成

对于需要将多个产品添加到购物车的完整电子商务体验，您需要实现购物车状态管理。

1. 创建购物车上下文或使用 Redux 管理购物车状态
2. 为产品实现“添加到购物车”功能
3. 构建一个显示所选商品的购物车视图
4. 添加一个结账按钮，将所有购物车商品发送到 Stripe Checkout

结账实现将如下所示：

来源：94-96

使用 Gatsby Source Plugin 的动态产品目录

对于产品频繁变更的大型商店，您可以使用 Gatsby Stripe 源插件在构建时查询产品数据。

1. 安装 Gatsby Stripe 源插件
2. 使用您的 Stripe API 密钥对其进行配置
3. 使用 GraphQL 查询产品和价格
4. 动态生成产品页面

这种方法允许您在 Stripe 控制面板中维护产品目录，并让您的 Gatsby 站点在构建时自动反映这些更改。

来源：28

安全考量

客户端安全性

由于电子商务涉及敏感的支付信息，安全性至关重要。

1. 切勿在客户端代码中存储 Stripe 秘密密钥或将其暴露在您的代码库中。
2. 始终从 Stripe 的 CDN 加载 Stripe.js 以符合 PCI 要求。
3. 使用环境变量存储 API 密钥。
4. 如果您使用任何后端 API 端点，请正确配置 CORS。

用于订单履行的 Webhook

对于数字产品交付或订单跟踪，您可以使用 Stripe webhooks。

1. 创建一个无服务器函数（AWS Lambda、Netlify Functions 等）来接收来自 Stripe 的 webhook 事件。
2. 在您的 Stripe 控制面板中配置 webhook 端点。
3. 验证 webhook 签名，以确保事件的合法性。
4. 根据成功的支付事件处理订单履行。

来源：28

最佳实践

1. 测试：在上线前，始终使用 Stripe 的测试模式测试您的结账流程。
2. 性能：仅在需要时延迟加载 Stripe.js，以提高初始页面加载性能。
3. 渐进增强：确保您的站点在没有 JavaScript 的情况下也能工作，然后通过 Stripe 功能进行增强。
4. 错误处理：为 Stripe 重定向和 API 调用实现适当的错误处理。
5. 响应式设计：确保您的结账体验在移动设备上运行良好。
6. 分析：实施转化跟踪以衡量结账性能。

总结

Gatsby 为构建与 Stripe 集成的电子商务站点提供了出色的平台。Gatsby 站点的静态特性，结合 Stripe 的纯客户端结账，可以在无需自定义服务器基础设施的情况下，提供安全、高性能的电子商务体验。

通过遵循本指南中概述的模式和最佳实践，您可以创建从简单的单品站点到具有购物车功能的复杂多品商店的电子商务功能。

对于更高级的电子商务需求，请考虑与 Shopify 等专用电子商务平台集成，或使用 Gatsby 的数据层从任何无头商务解决方案获取产品。

来源：docs/tutorial/ecommerce-tutorial/index.md