前端静态站点Web框架【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址https://gitcode.com/gh_mirrors/ga/gatsby点击查看免费下载本指南以仓库 examples/ecommerce-tutorial-with-stripe 示例为主体完整讲解如何在一个 Gatsby 站点中通过 Stripe Checkout 接受付款包括 Stripe Dashboard 的前置配置、环境变量的组织方式、gatsby-source-stripe数据源插件如何把 Stripe 的 Price 对象注入 GraphQL 层以及两种收款入口固定商品按钮与多价格商品卡片的前端实现。读完本文你将能独立复现并改造这一电商示例并掌握将 Gatsby 电商站点部署到 Netlify 的完整链路。示例概览一个最小可运行的 Gatsby 电商站点该示例是一个基于 Gatsby 的电商 Starter核心目标正如其package.json中description字段所写Accept payments in your Gatsby site using Stripe Checkout.在 Gatsby 站点中使用 Stripe Checkout 接受付款。它对应 Gatsby 官方电子商务教程的配套代码属于 examples 目录下众多可独立运行的完整示例之一。从目录结构看示例由两部分页面构成首页index.js一个立即购买BUY MY BOOK按钮点击后直接跳转到 Stripe Checkout 完成单笔支付属于最简收款路径进阶示例页advanced.js通过 GraphQL 查询 Stripe 中的 Price 数据动态渲染商品卡片每个商品可切换不同价格如多种货币或套餐属于从数据源驱动商品展示的进阶路径。两者共享同一个 stripejs.js 工具模块完成 Stripe 实例的加载是理解本示例两条主线的关键入口。前置配置在 Stripe Dashboard 开启 Checkout 并创建商品在本地运行之前需要先在 Stripe 后台完成两步配置使用测试环境即可开启仅客户端client-onlyCheckout进入 Stripe Dashboard 的 Checkout 设置页启用该能力站点才能以纯前端方式发起redirectToCheckout跳转。创建商品与价格在 Stripe Dashboard 的测试产品页新建一个产品并为之创建价格。价格 ID形如price_xxx与密钥sk_test_xxx、pk_test_xxx将作为后续环境变量的取值来源。需要说明的是Stripe Dashboard 属于外部服务本仓库不包含其界面代码仓库中通过 netlify.toml 的[template.environment]段给出了三个环境变量的占位示例可用于核对变量命名是否正确。环境变量与本地运行依赖清单先看 package.json示例的核心依赖分三组Stripe 相关stripe/stripe-js浏览器端 Stripe JS SDK、gatsby-source-stripe把 Stripe 数据拉入 Gatsby GraphQL 数据层的源插件Gatsby 基础gatsby本体以及gatsby-image、gatsby-plugin-sharp、gatsby-transformer-sharp图片优化、gatsby-plugin-manifestPWA 清单、gatsby-plugin-react-helmetSEO 元信息、gatsby-source-filesystem本地文件数据源、gatsby-plugin-offline可选离线能力UI 基础react/react-dom、prop-types、react-helmet。脚本方面npm run develop启动开发服务器npm run build执行生产构建npm start等价于npm run developnpm run format使用 prettier 格式化src下所有 JS 文件。配置环境变量示例要求将 Stripe API 密钥写入以.env开头的文件中。仓库中并没有直接给出.env.example文件但通过 gatsby-config.js 的加载逻辑可以还原其约定require(dotenv).config({ path: .env.${process.env.NODE_ENV}, })即dotenv会根据当前的NODE_ENV加载对应的环境文件开发环境加载.env.development构建环境加载.env.production。因此运行前应执行# 复制示例环境文件为开发环境配置 cp .env.example .env.development然后在.env.development中填入自己的 Stripe 测试密钥。结合源码实际使用点环境变量共需三类汇总如下环境变量用途取值来源消费位置STRIPE_SECRET_KEY服务端密钥供gatsby-source-stripe拉取 Price 数据Stripe Dashboardsk_test_xxxgatsby-config.jsGATSBY_STRIPE_PUBLISHABLE_KEY公开密钥浏览器端加载 Stripe.js 用Stripe Dashboardpk_test_xxxstripejs.jsGATSBY_BUTTON_PRICE_ID首页固定购买按钮对应的 Price ID在 Stripe 中创建价格后获得price_xxxcheckout.js需要注意GATSBY_前缀的变量会被 Gatsby 在构建期注入浏览器 bundle因此只能存放可公开的值publishable key、price id绝不能把 secret key 放进GATSBY_变量。配置完成后执行npm install gatsby develop即可在本地开发服务器中看到首页的BUY MY BOOK按钮与进入进阶示例页的链接。数据接入gatsby-source-stripe 与 GraphQL 查询示例与普通静态按钮电商的最大区别在于商品数据不是硬编码而是来自 Stripe 数据源。在 gatsby-config.js 中{ resolve: gatsby-source-stripe, options: { objects: [Price], secretKey: process.env.STRIPE_SECRET_KEY, downloadFiles: false, }, },三个选项的作用分别是objects: [Price]声明需要拉取 Stripe 的 Price 对象。Stripe 的价格模型是产品Product下挂多个价格Price这里只同步 Price再通过其product关联字段读取产品信息secretKey服务端密钥仅用于构建期向 Stripe API 请求数据不会暴露到浏览器端downloadFiles: false不下载 Stripe 上的文件资源加快数据同步。同步完成后Gatsby 数据层会生成allStripePrice节点。进阶示例页 Products.js 使用useStaticQuery查询它query ProductPrices { prices: allStripePrice( filter: { active: { eq: true } } sort: { unit_amount: ASC } ) { edges { node { id active currency unit_amount product { id name } } } } }查询只取active: true的在售价格并按unit_amount升序排列每个 Price 节点通过product关联字段取回产品名称与 ID。随后Products.js在内存中按产品 ID 分组把同一产品的多个价格聚合到product.prices数组中交给 ProductCard.js 渲染。一个值得留意的细节是unit_amount是 Stripe 的最小货币单位分所以 ProductCard.js 中专门用formatPrice做格式化const formatPrice (amount, currency) { let price (amount / 100).toFixed(2) let numberFormat new Intl.NumberFormat([en-US], { style: currency, currency: currency, currencyDisplay: symbol, }) return numberFormat.format(price) }即先除以 100 得到元/美元等主单位再交给Intl.NumberFormat按货币符号格式化显示。收款入口一固定商品按钮redirectToCheckout首页的收款由 checkout.js 实现。其核心是点击按钮后调用 Stripe 的redirectToCheckoutconst stripe await getStripe() const { error } await stripe.redirectToCheckout({ mode: payment, lineItems: [{ price: process.env.GATSBY_BUTTON_PRICE_ID, quantity: 1 }], successUrl: ${window.location.origin}/page-2/, cancelUrl: ${window.location.origin}/, })参数含义mode: payment一次性支付模式区别于subscription订阅模式lineItems结算商品列表这里直接引用环境变量中的固定 Price ID数量为 1successUrl/cancelUrl支付成功与取消后的跳转地址示例分别指向/page-2/和首页。实现上还做了防重复点击处理点击后setLoading(true)禁用按钮并半透明化只有redirectToCheckout返回error时才恢复可用同时在控制台输出console.warn(Error:, error)便于排查。收款入口二数据驱动的商品卡片进阶示例进阶示例页 advanced.js 渲染 Products.js后者产出多个 ProductCard.js 卡片。每张卡片是一个表单产品名取自product.name一个下拉选择框列出该产品的所有价格用formatPrice格式化的显示文案提交时从表单读取用户选中的价格 IDconst price new FormData(event.target).get(priceSelect) const stripe await getStripe() const { error } await stripe.redirectToCheckout({ mode: payment, lineItems: [{ price, quantity: 1 }], successUrl: ${window.location.origin}/page-2/, cancelUrl: ${window.location.origin}/advanced, })与固定按钮版本相比区别仅在于 Price ID 由用户在下拉框中动态选择cancelUrl也相应指向/advanced让取消支付后仍留在商品列表页。Stripe 实例的加载单例模式两个收款入口都复用了 stripejs.js它以单例模式保证整个页面只初始化一次 Stripeimport { loadStripe } from stripe/stripe-js let stripePromise const getStripe () { if (!stripePromise) { stripePromise loadStripe(process.env.GATSBY_STRIPE_PUBLISHABLE_KEY) } return stripePromise } export default getStripeloadStripe是stripe/stripe-js提供的异步加载函数返回一个 Promise模块级变量stripePromise缓存该 Promise后续所有调用无论来自首页按钮还是商品卡片都复用同一次加载结果避免重复加载 Stripe.js 造成的网络开销与初始化竞态。这里传入的正是带GATSBY_前缀的公开密钥安全地存在于浏览器端。部署到 Netlify配置文件解读示例自带 netlify.toml说明这是一份开箱即可部署到 Netlify 的站点配置。文件分两段[build] base / publish public/ command npm run build [template.environment] GATSBY_STRIPE_PUBLISHABLE_KEY Add your Stripe publishable key here: pk_test_xxx GATSBY_BUTTON_PRICE_ID The price id for the one-time purchase product: price_xxx STRIPE_SECRET_KEY Add your Stripe secret key here: sk_test_xxx[build]段base为构建目录仓库根目录command为npm run buildpublish指向 Gatsby 构建产物目录public/[template.environment]段声明 Netlify 站点需要配置的三个环境变量公开密钥、按钮 Price ID、服务端密钥其中STRIPE_SECRET_KEY仅用于构建期数据同步不应在客户端暴露。部署时只需把仓库推送到 Git 平台并与 Netlify 关联然后在 Netlify 站点设置中填入这三个环境变量建议分别配置production与preview上下文即可完成构建与发布。小结本示例的可复用模式梳理整个示例可以提炼出三条可复用到自有 Gatsby 电商项目的模式数据与前端解耦通过gatsby-source-stripe在构建期把 Price/Product 数据拉入 GraphQL 层商品展示页用useStaticQuery消费商品与价格的变化只需在 Stripe 后台维护无需改代码密钥分层管理STRIPE_SECRET_KEY只存在于构建期配置GATSBY_前缀变量承载浏览器端可公开数据配合.env.NODE_ENV按环境加载统一的收款入口所有支付入口收敛到stripe.redirectToCheckout并共享getStripe()单例页面只需关心跳转前禁用按钮、出错后恢复这一交互细节。如需继续深入可对照阅读本仓库中gatsby-source-stripe相关插件机制以及 examples 目录下其他使用gatsby-source-*数据源的示例理解源插件 GraphQL 查询 前端组件这一 Gatsby 数据流的最佳实践。赞分享前端静态站点Web框架【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址https://gitcode.com/gh_mirrors/ga/gatsby点击查看免费下载相关推荐旧Mac怎么免费装新macOSOpenCore Legacy Patcher完整实操型号核对、启动盘制作到驱动补丁一次讲清旧Mac怎么免费装新macOSOpenCore Legacy Patcher完整实操型号核对、启动盘制作到驱动补丁一次讲清 OpenCore Legacy前端静态站点Web框架使用 Gatsby 部署到 Netlify从零配置部署到 gatsby-adapter-netlify 源码级解析使用 Gatsby 部署到 Netlify从零配置部署到 gatsby adapter netlify 源码级解析 本文是面向 Gatsby 开发者的 Net前端静态站点Web框架使用 ADK A2UI v0.9 构建 Gemini Enterprise 演示 Agent从本地运行到 Cloud Run 部署全指南使用 ADK A2UI v0.9 构建 Gemini Enterprise 演示 Agent从本地运行到 Cloud Run 部署全指南 本指南基于仓库中人工智能AI AgentAI 应用前端UI组件上一篇TorchSharp核心组件解析Tensor操作与自动求导机制详解下一篇三步上手 Marketing Skills让 AI 代理搞定 CRO、文案与 SEO 的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考