> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Framer 插件

> 将 Dodo Payments 结账功能集成到您的 Framer 项目中，使用我们强大的插件。接受可自定义的结账体验的支付。

## 概述

Dodo Payments Framer 插件无缝集成支付处理到您的 Framer 网站中。创建可自定义的结账体验，支持测试和生产环境。

<Card title="Official Plugin" icon="link" href="https://www.framer.com/marketplace/plugins/dodo-payments">
  访问 Framer 市场中的官方 Dodo Payments 插件。
</Card>

## 特性

<CardGroup cols={2}>
  <Card title="Hosted or Overlay Checkout" icon="credit-card">
    选择一个全页流程或与您的站点原生融合的内嵌覆盖层。
  </Card>

  <Card title="Drag-and-Drop Setup" icon="hand-pointer">
    添加组件，粘贴密钥，然后发布。
  </Card>

  <Card title="Instant Digital Delivery" icon="envelope">
    在付款完成后立即发送安全的下载链接或许可证密钥邮件。
  </Card>

  <Card title="Worldwide Coverage" icon="globe">
    六大洲的银行级收单，内置本地支付方式。
  </Card>

  <Card title="Automatic Tax & Invoicing" icon="receipt">
    为每笔订单处理增值税、商品及服务税、销售税和收据。
  </Card>

  <Card title="No-Code Subscriptions" icon="toggle-on">
    轻松开启订阅计划销售你的产品。
  </Card>
</CardGroup>

## 设置指南

<Steps>
  <Step title="Generate API Key">
    访问 [Dodo Payments Dashboard](https://app.dodopayments.com/developer/api-keys)，并创建一个新的 API 密钥。

    <Tabs>
      <Tab title="Live Mode">
        用于具有真实支付处理的生产环境。
      </Tab>

      <Tab title="Test Mode">
        非常适合无真实收费的开发与测试。
      </Tab>
    </Tabs>

    <Check>
      安全地复制您的 API 密钥——下一步将需要它。
    </Check>
  </Step>

  <Step title="Authenticate Plugin">
    1. 打开 Framer 中的 Dodo Payments 插件
    2. 转到认证页面
    3. 粘贴您的 API 密钥
    4. 选择适当的模式（测试或实时）
    5. 点击 **Continue** 进行认证

    <Warning>
      确保您的 API 密钥安全，切勿公开共享。
    </Warning>
  </Step>

  <Step title="Manage Products">
    认证后，您将看到产品列表：

    * **现有产品**：自动显示
    * **没有产品**：点击“产品”旁边的 **加号 (+)** 按钮

    <Info>
      系统会将您重定向到 Dodo Payments 仪表板，在那里创建具有定价、描述和设置的产品。
    </Info>
  </Step>

  <Step title="Add Buy Buttons">
    1. 从可用列表中选择一个产品
    2. 点击 `Add Buy Button` 按钮
    3. 一个带有文本 `Buy {product_name}` 的购买按钮将被添加到画布上

    <Warning>
      如果您没有正确的项目权限，“添加购买按钮”将被禁用。
    </Warning>
  </Step>
</Steps>

## 自定义

<Steps>
  <Step title="Select Checkout Experience">
    选择您偏好的结账体验：

    * **Overlay (Embedded)**：结账作为内嵌覆盖层出现在 Framer 项目中，让用户留在您的网站上。
    * **Hosted**：用户会被重定向到由 Dodo Payments 托管的结账页面，以获得更流畅的体验。
  </Step>

  <Step title="Customize Appearance Options">
    通过以下外观设置自定义结账体验：

    * **Checkout Theme**：在浅色或深色主题之间选择，以匹配您的品牌美感。
    * **Button Label**：自定义文本（例如 “Buy Now”、“Purchase”、“Get Started”）。
    * **Button Styles**：调整颜色、字体、尺寸及其他样式属性。
    * **Return URL**：为用户设置结账后返回的 Framer 页面。
  </Step>
</Steps>

## 故障排除

<AccordionGroup>
  <Accordion title="Authentication Issues">
    **问题**：插件无法认证

    **解决方案**：

    * 验证您的 API 密钥是否正确
    * 确保您使用的是正确的模式（测试/实时）
    * 检查您的网络连接
  </Accordion>

  <Accordion title="Button Creation Issues">
    **问题**：添加购买按钮被禁用

    **解决方案**：

    * 确认您在 Framer 项目中拥有正确的权限
    * 确保您已正确完成认证
    * 尝试刷新插件
  </Accordion>

  <Accordion title="Product Display Issues">
    **问题**：产品未显示

    **解决方案**：

    * 确保您在 Dodo Payments 仪表板中已创建产品
    * 检查您的 API 密钥是否具有正确权限
    * 尝试重新认证
  </Accordion>
</AccordionGroup>