# 如何将支付链接添加到落地页

> 分步介绍如何将支付按钮添加到任何落地页。适用于 HTML、React、Webflow、Framer 或任何网站构建器。无需后端代码。
- **Author**: Ayush Agarwal
- **Published**: 2026-03-26
- **Category**: Payments, How-To, No-Code
- **URL**: https://dodopayments.com/blogs/zh/add-payment-link-landing-page

---

要将支付链接添加到落地页，请先在支付服务商的控制面板中创建产品，复制生成的结账 URL，然后将其设置为按钮或文本链接的目标地址。这就是完整的集成流程：无需后端、无需 webhook 服务器，也无需进行税务注册。由于支付链接本质上只是一个 URL，因此它在 HTML、React、Webflow、Framer、WordPress 和 Carrd 中的工作方式完全相同。

大多数指南都把这个过程讲得过于复杂。如果你想了解购买按钮背后的运行机制，我们关于[支付网关工作原理](https://dodopayments.com/blogs/how-payment-gateway-works)的解析会完整介绍整个流程。

在任何网站上接受付款，最简单的方式就是使用支付链接。支付链接是一个能够打开托管结账页面的 URL。它适用于任何网站构建器或框架，包括 HTML、React、WordPress、Webflow、Framer、Carrd、Notion，以及任何允许你添加链接或按钮的平台。

本指南将带你了解如何创建支付链接并将其添加到落地页。我们还会介绍更高级的选项，例如覆盖式结账，让体验更加一体化。

## 为什么使用支付链接？

支付链接是接受付款所需的最小可行产品（MVP）。它省去了复杂集成、服务端代码和数据库管理的需要。当用户点击购买按钮时，他们会被重定向到由 Dodo Payments 托管的安全且高转化率的结账页面。

Dodo Payments 充当[MoR（名义商户）](https://dodopayments.com/blogs/merchant-of-record-for-saas)，这意味着我们会为你处理全球销售税、合规和支付处理。你无需担心欧盟的 VAT 或美国的销售税。如果你不清楚这两种税制之间的区别，[SaaS 的 VAT 与销售税对比](https://dodopayments.com/blogs/vat-vs-sales-tax-saas)将解释它们为何采用不同的计算方式。

支付链接非常适合用于：

- 验证新的产品创意
- 销售数字产品或下载内容
- 接受 SaaS 订阅付款
- 销售活动门票
- 收取服务费用

## 分步操作：5 分钟完成集成

这是最简单的入门方式。不到五分钟，你就能在落地页上创建一个可用的购买按钮。

### 1. 创建产品

首先，登录你的 Dodo Payments 控制面板。进入"Products"部分，然后点击"Add Product"。你可以选择一次性付款或订阅。

填写产品信息，包括名称、描述和价格。你还可以上传产品图片，它会显示在结账页面上。完成后，保存产品。

### 2. 复制支付链接

创建产品后，你会看到与其关联的"Payment Link"。这是一个唯一的 URL，会直接指向该产品专属的结账页面。将此 URL 复制到剪贴板。

### 3. 将按钮添加到落地页

现在，打开你的落地页编辑器。无论你使用的是 Webflow、Framer，还是直接编写 HTML，操作方式都一样。添加一个按钮或文本链接，并将目标 URL 设置为刚刚复制的支付链接。

例如，在纯 HTML 中，你的按钮可能如下所示：

```html
<a
  href="https://checkout.dodopayments.com/buy/pdt_your_product_id"
  class="buy-button"
>
  Buy Now
</a>
```

### 4. 完成

就是这么简单。用户点击按钮后，会进入安全的结账页面。完成付款后，他们会被重定向回你的网站（如果你配置了重定向 URL），或者看到成功提示。

## 支付链接的运行流程

为了了解后台发生了什么，下面是支付链接生命周期的简单示意图。

```mermaid
flowchart LR
    A[Landing Page] -->|"User clicks Buy"| B[Payment Link Opens]
    B --> C[Dodo Hosted Checkout]
    C -->|"Payment Processed"| D[Confirmation Page]
    D -.->|"Optional"| E[Webhook for Fulfillment]
```

用户从落地页开始，点击购买按钮。这会打开支付链接，并将用户重定向到 Dodo 托管的结账页面。付款处理完成后，用户会看到确认页面。你也可以选择让 Dodo Payments 向你的服务器发送 webhook，以触发履约逻辑，例如发送邮件或授予控制面板访问权限。

## 高级功能：覆盖式结账

如果你希望提供更嵌入式的体验，让用户始终留在你的网站上，可以使用[覆盖式结账](https://docs.dodopayments.com/developer-resources/overlay-checkout)。它会在落地页上方以模态窗口的形式打开结账页面。

### 1. 安装 Dodo SDK

要使用覆盖式结账，你需要在页面中引入 Dodo Payments SDK。如果你使用的是 React 等现代框架，可以通过 npm 安装：

```bash
npm install dodopayments-checkout
```

如果你使用的是静态网站，也可以改用 script 标签加载打包后的版本。当前 CDN 路径列在 [Dodo Payments SDK 文档](https://docs.dodopayments.com/developer-resources/dodo-payments-sdks)中，因此请从文档中复制路径，而不是手动固定版本。

### 2. 初始化 SDK

你需要使用配置初始化 SDK。这应该在页面加载时执行一次。

```javascript
DodoPayments.Initialize({
  mode: "live", // Use 'test' for development
  displayType: "overlay",
  onEvent: (event) => {
    console.log("Checkout event:", event);
  },
});
```

### 3. 触发结账

你不需要使用标准链接，而是在用户点击购买按钮时调用一个函数。

```javascript
const handleBuyClick = () => {
  DodoPayments.Checkout.open({
    checkoutUrl: "https://checkout.dodopayments.com/buy/pdt_your_product_id",
  });
};
```

这样会直接在你的页面上打开结账模态窗口，为客户提供无缝体验。

## 针对不同平台的示例

不同的网站构建器有不同的链接和脚本添加方式。下面介绍如何将支付链接添加到最常用的平台。

### Webflow

在 Webflow 中，你可以通过两种方式添加支付链接：

- **简单链接**：添加一个 Button 元素，然后在元素设置的 URL 字段中粘贴支付链接。
- **覆盖式结账**：向页面添加一个"Embed"元素。将 SDK script 标签和初始化代码粘贴到嵌入代码中。然后，为购买按钮设置一个 ID（例如 `buy-button`），并添加脚本，在点击时触发结账。

### Framer

Framer 可以轻松地为任何元素添加链接。

- **简单链接**：选择按钮组件并添加"Link"交互。将支付链接粘贴到 URL 字段中。
- **覆盖式结账**：你可以在 Framer 设置中使用"Custom Code"部分添加 SDK 脚本。然后，使用代码组件触发 `DodoPayments.Checkout.open()` 函数。

### WordPress

WordPress 的灵活性很高。

- **简单链接**：在 Gutenberg 编辑器中使用 Button 区块，然后粘贴支付链接。
- **覆盖式结账**：使用"Insert Headers and Footers"等插件，将 SDK 脚本添加到网站的 header 中。然后，使用"Custom HTML"区块添加按钮和触发脚本。

### React

如果你使用 React 或 Next.js 构建自定义落地页，可以直接使用 SDK。

```tsx
import { DodoPayments } from "dodopayments-checkout";
import { useEffect } from "react";

export default function LandingPage() {
  useEffect(() => {
    DodoPayments.Initialize({
      mode: "live",
      displayType: "overlay",
    });
  }, []);

  const openCheckout = () => {
    DodoPayments.Checkout.open({
      checkoutUrl: "https://checkout.dodopayments.com/buy/pdt_your_product_id",
    });
  };

  return (
    <div>
      <h1>My Awesome Product</h1>
      <button onClick={openCheckout}>Buy Now</button>
    </div>
  );
}
```

## 自定义结账体验

通用的结账页面可能会影响转化率。Dodo Payments 允许你自定义结账体验，使其与你的品牌保持一致。

### 品牌和颜色

你可以在控制面板中设置品牌颜色并上传 logo。这些设置会同时应用于托管结账页面和覆盖式结账模态窗口，确保从落地页过渡到结账页面时自然流畅。

### 传递客户信息

如果你已经知道客户的电子邮件地址（例如，他们刚刚订阅了你的 newsletter），可以将其传递到结账页面，为客户节省时间。只需将 `customer_email` 参数添加到支付链接中：

`https://checkout.dodopayments.com/buy/pdt_id?customer_email=user@example.com`

### 处理重定向

付款成功后，你可能希望将用户发送到"感谢"页面或控制面板。你可以在产品设置中配置重定向 URL，也可以将其作为参数传递到支付链接中。

`https://checkout.dodopayments.com/buy/pdt_id?redirect_url=https://dodopayments.com/success`

## 使用 Webhook 处理付款后的逻辑

支付链接非常适合前端，但付款成功后，你通常还需要在后端执行一些操作。这正是 [webhook](https://docs.dodopayments.com/developer-resources/webhooks) 发挥作用的地方。

Webhook 是一种通知：当某个事件发生时（例如 `payment.succeeded`），Dodo Payments 会将通知发送到你的服务器。你可以利用它来：

- 发送包含下载链接的履约邮件
- 在数据库中创建用户账户
- 授予用户访问私密 Discord 或 Slack 频道的权限
- 更新内部销售控制面板

即使你使用的是无代码技术栈，也可以使用 Zapier 或 Make 等工具接收 webhook，并触发其他应用中的操作。

## 落地页收款的最佳实践

为了最大限度地提高转化率，在落地页中添加支付链接时，请遵循以下最佳实践。

### 1. 使用清晰的行动号召（CTA）按钮

购买按钮应该醒目，并使用清晰的文案。不要使用"Submit"，而应使用"Buy Now""Get Started"或"Join the Community"。确保按钮使用对比色，与页面其他部分区分开来。

### 2. 策略性地放置按钮

不要只在页面底部放置一个按钮。请在多个位置放置 CTA 按钮：

- 首屏主视觉区域（无需滚动即可看到）
- 功能或优势介绍之后
- 定价表中
- 页面最底部

### 3. 展示信任信号

人们通常不愿意在陌生网站上输入信用卡信息。请在购买按钮附近展示信任信号，例如：

- "由 Dodo Payments 提供支持的安全结账"
- 已接受支付方式的图标（Visa、Mastercard、Apple Pay）
- 30 天退款保证徽章
- 客户评价

### 4. 针对移动设备进行优化

你的流量中有很大一部分会来自移动设备。Dodo Payments 的结账页面完全响应式，并针对移动设备进行了优化。请确保你的落地页同样适合移动设备，让整个流程保持顺畅。

## 超越 MVP

使用简单支付链接验证产品后，你可能会想探索更高级的集成选项。

- **[嵌入式支付](https://dodopayments.com/blogs/embedded-payments-saas)**：如果你希望获得真正原生的体验，可以使用我们的[内嵌式结账](https://docs.dodopayments.com/developer-resources/inline-checkout)，将支付表单直接嵌入页面布局中。
- **按用量计费**：如果你正在构建采用计量定价的 SaaS，Dodo Payments 支持原生的[按用量计费](https://dodopayments.com/billing/usage-based-billing)，此时仅靠支付链接已不再足够。
- **许可证密钥**：如果你销售软件，可以使用内置的[许可证密钥管理](https://docs.dodopayments.com/features/license-keys)，自动为客户生成和验证密钥。
- **代理发起的购买**：如果 AI 助手将代表用户购买，[代理支付的 AP2 协议](https://dodopayments.com/blogs/ap2-protocol-agent-payments)介绍了在没有浏览器会话时授权的工作方式。

## 总结

将支付链接添加到落地页，是开始[接受在线付款](https://dodopayments.com/blogs/how-to-accept-online-payments)最快的方式。它无需任何后端代码，并且适用于市场上的所有网站构建器。通过让 Dodo Payments 充当你的 [MoR（名义商户）](https://dodopayments.com/blogs/merchant-of-record-for-saas)，你还可以将全球税务合规和监管障碍交给我们处理。

无论你是在[销售数字产品](https://dodopayments.com/blogs/how-to-sell-digital-products-online)、[销售软件](https://dodopayments.com/blogs/how-to-sell-software-online)，还是在推出新的 SaaS，支付链接方案都能让你专注于最重要的事情：打造优秀产品并找到客户。

准备好开始了吗？立即[注册 Dodo Payments](https://app.dodopayments.com/signup)，几分钟内创建你的第一个支付链接。

## 常见问题

### 什么是支付链接？

支付链接是一个唯一的 URL，会将客户重定向到安全的托管结账页面。企业无需构建自定义结账流程或管理后端服务器，即可通过它接受付款。你可以通过电子邮件、社交媒体分享这些链接，也可以将它们作为按钮添加到落地页中。

### 我可以将支付按钮添加到静态网站吗？

可以。由于支付链接只是一个标准 URL，你可以将其添加到任何使用 HTML、CSS 构建的静态网站，或使用 Jekyll、Hugo、Carrd 等网站构建器创建的网站中。你只需创建一个按钮或链接，并将其目标地址设置为你的 Dodo Payments 链接。

### 在落地页上接受付款需要后端服务器吗？

不需要。使用支付链接的主要优势之一，就是无需后端代码。Dodo Payments 会在我们的安全服务器上处理完整的结账流程、支付处理和税费计算。只有当你希望通过 webhook 自动执行付款后的履约操作时，才需要后端。

### Dodo Payments 会处理支付链接的销售税吗？

会。Dodo Payments 充当 MoR（名义商户），这意味着我们在法律上负责在全球范围内计算、收取和申报销售税及 VAT。这包括美国销售税、欧盟 VAT，以及 220 多个国家和地区的税费。你无需在多个司法管辖区进行税务注册。

### 我可以自定义付款后发生的操作吗？

可以。你可以在 Dodo Payments 控制面板中配置重定向 URL。交易成功后，客户会被自动重定向到你指定的 URL，例如感谢页面、下载区域或应用控制面板。

---

如需了解如何扩大业务规模，请查看我们的[销售数字产品的最佳平台](https://dodopayments.com/blogs/best-platform-sell-digital-products)和[适用于 SaaS 的无代码技术栈](https://dodopayments.com/blogs/no-code-stack-saas-10k-mrr)指南。你也可以查看我们的[定价](https://dodopayments.com/pricing)，了解我们如何在不收取隐藏费用的情况下帮助你增长。
---
- [More Payments articles](https://dodopayments.com/blogs/category/payments)
- [All articles](https://dodopayments.com/blogs)