Skip to main content

​
概述

Dodo Payments Framer 插件可将您的 Dodo Payments 产品的购买按钮添加到 Framer 网站。每个按钮都会在您的页面上以叠加层形式打开结账页面，或将客户转到托管式结账页面，并支持测试模式或实时模式。

Official Plugin

从 Framer Marketplace 安装 Dodo Payments 插件。

​
特性

Hosted or Overlay Checkout

在您的页面上以叠加层形式打开结账页面，或将客户转到托管式结账页面。

Drag-and-Drop Setup

将 API key 粘贴到插件中，向画布添加购买按钮，然后发布。

Digital Delivery

付款后，通过电子邮件向客户发送下载链接或 license keys。

Worldwide Coverage

通过银行卡、数字钱包和本地支付方式，向 220 多个国家/地区的客户销售。

Automatic Tax & Invoicing

作为 Merchant of Record，Dodo Payments 会计算并缴纳 VAT、GST 和销售税，并为每笔付款开具发票。

No-Code Subscriptions

订阅产品与一次性产品使用相同的购买按钮，无需编写代码。

​
设置指南

1

Generate API Key

在 Dodo Payments 控制面板中，前往 Developer → API Keys，然后点击 Add API Key。您也可以直接打开 API Keys 页面。一个 API key 只能在一种模式下使用。创建 key 之前，请使用侧边栏中的 Live Mode 开关选择模式：
用于生产环境。客户使用真实支付方式付款。
复制 API key 并妥善保管。控制面板只会显示一次，下一步您需要将其粘贴到插件中。
2

Authenticate Plugin

请对 API key 保密。切勿分享或公开发布。
  1. 在 Framer 中打开 Dodo Payments 插件。插件会打开 Authenticate 页面。
  2. 在 API Mode 下选择 Test Mode 或 Live Mode，使其与您的 API key 匹配。
  3. 将 API key 粘贴到 API Key 中。
  4. 点击 Continue。
3

Manage Products

完成身份验证后，插件会在 Products 下列出您所选模式中的产品：
  • Existing products 会自动显示，并分别标记为 One-time 或 Subscription。
  • No products yet：点击 Products 旁边的 Plus (+) 按钮。
Plus (+) 按钮会打开 Dodo Payments 控制面板，您可以在其中创建产品并设置价格、描述及其他设置。
4

Add Buy Buttons

  1. 从列表中选择产品。
  2. 点击 Add Buy Button。
插件会向您的画布添加一个标签为 Buy {product_name} 的购买按钮。在同一产品页面中，Edit 会在 Dodo Payments 控制面板中打开该产品，Show Preview 会打开其结账预览。
如果您没有在 Framer 项目中添加组件和更改组件属性的权限，Add Buy Button 将处于禁用状态。

​
自定义

要更改购买按钮的工作方式，请在画布上选择该按钮，然后在 Framer 中编辑其属性。
1

Select Checkout Experience

设置 Type 以选择结账页面的打开方式：
  • Overlay：结账页面会以叠加层形式在您的 Framer 页面上打开，因此客户可以留在您的网站上。插件会将新按钮的类型设为此类型。
  • Hosted：按钮会链接到 Dodo Payments 托管式结账页面。Link Target 用于设置页面是在新标签页还是当前标签页中打开。
2

Customize Appearance Options

使用以下属性使按钮和结账页面与您的网站相匹配：
  • Checkout Theme：浅色或深色结账页面。
  • Label：按钮文本，例如 “Buy Now”、“Purchase” 或 “Get Started”。
  • 按钮样式：背景颜色、文本颜色、字体、字号、边框圆角和内边距。
  • Return URL：客户完成结账后返回的 Framer 页面或 URL。
  • Environment：Live 或 Test。插件会将其设置为您进行身份验证时使用的模式。

​
故障排除

问题：插件无法完成身份验证。解决方案：
  • 检查您是否粘贴了完整的 API key。
  • 检查 API Mode 是否与创建 key 时使用的模式一致。测试模式的 key 无法在实时模式下使用，实时模式的 key 也无法在测试模式下使用。
  • 检查您的互联网连接。
问题：Add Buy Button 处于禁用状态。解决方案：
  • 检查您在 Framer 项目中的角色是否允许添加组件和更改组件属性。
  • 检查插件是否已完成身份验证。
  • 关闭并重新打开插件。
问题：插件中未显示产品。解决方案：
  • 检查您是否在 Dodo Payments 控制面板中创建了产品。
  • 检查产品是否与 API key 处于相同模式。插件只会列出您进行身份验证时所用模式中的产品。
  • 重新对插件进行身份验证。
最后修改于 2026年9月26日