用途:在 Flowglad 中实现结账会话,用于购买订阅和商品,例如创建升级按钮、引导用户跳转到托管结账页,并基于 pricingModel 展示价格信息。
主要能力:通过 createCheckoutSession 创建结账会话,支持 successUrl、cancelUrl、priceSlug、autoRedirect 等参数;提供 useBilling hook,可获取 loaded、pricingModel、getPrice、getProduct 等。
关键用法:successUrl 与 cancelUrl 必须使用绝对 URL,如 ${window.location.origin}/dashboard?checkout=success&plan=pro,相对 URL 会失败;优先使用 priceSlug 而非 priceId,因为 ID 在不同环境间不同,slug 由用户定义且跨环境一致,且大小写敏感;简单流程可用 autoRedirect: true,需在跳转前做埋点等操作时设为 false,再手动 window.location.href = result.url。
按钮实现:创建会话为异步操作,应设置 isLoading 并在请求期间禁用按钮,防止重复点击;useBilling 在数据加载完成前 loaded 为 false,调用前需检查 loaded,按钮可在 !loaded || isLoading 时禁用并显示对应文案。
价格展示:pricingModel 中价格以最小货币单位(分)存储,需除以 100 后用 Intl.NumberFormat 格式化,并按 intervalUnit 添加 /mo 或 /yr 后缀。
适用场景:订阅升级按钮、购买流程、定价卡片、结账后成功提示。
限制:资料未提供收费、价格、具体依赖版本及安装命令等信息;相对 URL 无法用于托管结账页跳转。