# 如何在渐进式 Web 应用（PWA）中接受支付

> 介绍如何为渐进式 Web 应用添加支付处理。避开应用商店费用，使用 Web 结账，并通过自动税务合规处理订阅。
- **Author**: Ayush Agarwal
- **Published**: 2026-03-30
- **Category**: Payments, Mobile, How-To
- **URL**: https://dodopayments.com/blogs/zh/accept-payments-pwa

---

渐进式 Web 应用（PWA）代表了现代软件交付的理想平衡点。它们兼具 Web 的覆盖范围与原生移动应用的用户体验。对开发者而言，吸引力显而易见：没有 30% 的应用商店抽成，没有长达一周的审核流程，还能即时向所有用户推送更新。你只需构建一次，应用就能在 iOS、Android 和桌面设备上运行；此外，你还可以添加[数字钱包解决方案](https://dodopayments.com/blogs/digital-wallet-solution)，提供接近原生体验的一键结账。

然而，脱离 Apple 和 Google 生态后，你也会失去其内置的应用内购买（IAP）系统。虽然这能为你节省一大笔收入，但支付处理、税务合规和订阅管理也将完全落在你的肩上。你不能简单地调用原生的"购买"函数，再让操作系统处理剩下的一切。

本指南将介绍如何使用 Dodo Payments 在 PWA 中实现稳健、移动优先的支付流程。内容涵盖从设置覆盖式结账，到处理离线订阅状态和全球税务合规的完整流程。

## 为什么 PWA 是 SaaS 全球销售的未来

传统应用商店模式正面临越来越多的质疑。高额的佣金，以及对可售卖内容的诸多限制，让许多创始人开始寻找替代方案。PWA 提供了摆脱这些限制的出口。

> 税务合规不是一次性设置。它是一个不断变化的目标。税率会变，门槛会变，每年还会有新的司法管辖区增加数字服务税。如果你面向全球销售，自动化处理就不是可选项。
>
> \- Rishabh Goel，Dodo Payments 联合创始人兼 CEO

当你[在线销售软件](https://dodopayments.com/blogs/how-to-sell-software-online)时，目标是减少摩擦。原生应用的摩擦很高：用户必须访问商店、完成身份验证、下载应用，然后再打开它。PWA 则可以让用户直接在浏览器中一键"安装"。

一直以来，支付都是最大的挑战。尤其是 Apple，过去一直严格限制提供"数字商品"的 PWA 使用第三方支付系统。但随着法规变化和 Web 标准发展，Web 正在成为商业领域的一等公民。通过选择[名义商户，而不是支付服务商](https://dodopayments.com/blogs/merchant-of-record-vs-payfac)，你可以完全绕过应用商店的守门人，同时依然提供高质量的结账体验。如果你还不熟悉这种模式，可以先了解[什么是名义商户](https://dodopayments.com/blogs/what-is-a-merchant-of-record)。

## PWA 支付架构

在 PWA 中接受支付，需要采用与标准网站略有不同的思维方式。由于 PWA 的设计目标是支持离线使用，并提供类似原生应用的体验，因此支付流程必须具备弹性并实现深度集成。

PWA 支付系统的核心组件包括：

1. **结账界面**：针对移动设备优化的 UI，用于处理卡片输入、数字钱包（Apple Pay/Google Pay）和本地支付方式。
2. **后端处理程序**：用于创建结账会话和处理 Webhook 的安全环境。
3. **Service Worker**：PWA 的"大脑"，可以缓存订阅状态，以支持离线访问。
4. **MoR（名义商户）**：像 Dodo Payments 这样的合作伙伴，负责处理全球销售税（VAT、GST 等）的法律复杂性，让你无需操心。

### 支付生命周期

```mermaid
flowchart TD
    A[PWA Installed on Device] --> B[User Taps Upgrade/Buy]
    B --> C[Backend Creates Checkout Session]
    C --> D[Dodo Overlay Checkout Opens]
    D --> E[User Completes Payment]
    E --> F[Dodo Sends Webhook to Backend]
    F --> G[Backend Updates User Status]
    G --> H[PWA Syncs and Caches Status]
    H --> I[Premium Features Available Offline]
```

## 第 1 步：集成 Dodo Payments SDK

Dodo Payments 提供非常适合 PWA 的[覆盖式结账](https://docs.dodopayments.com/developer-resources/overlay-checkout)。它不会将用户重定向到应用之外，这对于保持"类似应用"的体验至关重要。如果用户被重定向到浏览器标签页，可能会失去已安装 PWA 的使用场景。

首先，在前端项目中安装 SDK：

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

如果你更喜欢在主 HTML 文件中使用 CDN，也可以这样做：

```html
    <!-- Load DodoPayments SDK -->
    <script src="https://dodopayments.com/js/checkout.js"></script>
```

尽早初始化 SDK，最好在主入口文件中完成（例如 `App.tsx` 或 `main.js`）：

```javascript
import { DodoPayments } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "live", // Use 'test' for development
  displayType: "overlay",
  onEvent: (event) => {
    if (event.type === "checkout.success") {
      console.log("Payment successful!", event.data);
      // Trigger a sync with your backend
      refreshUserSubscription();
    }
  },
});
```

## 第 2 步：实现移动优先的结账流程

在 PWA 中，你需要让结账体验类似原生应用的底部弹窗。Dodo 的覆盖式结账会自动处理这一点，并提供能适应移动屏幕的响应式 UI。

当用户点击你的"升级"按钮时，前端应调用后端来创建结账会话。这样既能保护 API 密钥安全，也便于预填客户信息。

### 前端组件

```javascript
const UpgradeButton = () => {
  const handleUpgrade = async () => {
    // 1. Call your backend to get a checkout URL
    const response = await fetch("/api/create-checkout-session", {
      method: "POST",
      body: JSON.stringify({ planId: "pdt_premium_monthly" }),
    });
    const { checkoutUrl } = await response.json();

    // 2. Open the Dodo overlay
    DodoPayments.Checkout.open({
      checkoutUrl: checkoutUrl,
    });
  };

  return (
    <button onClick={handleUpgrade} className="pwa-primary-btn">
      Unlock Premium Features
    </button>
  );
};
```

通过使用面向 SaaS 的[嵌入式支付](https://dodopayments.com/blogs/embedded-payments-saas)，你可以确保用户始终感觉自己处于应用内部。这种连续性是影响移动用户转化率的重要因素。

## 第 3 步：处理 Webhook 和权限开通

支付是异步的。即使覆盖式结账显示"成功"，你也必须等待 Dodo Payments 验证过的 Webhook，然后才能授予高级功能访问权限。这样可以防止"中间人"攻击，避免用户伪造前端成功事件。

后端应监听 `payment.succeeded` 或 `subscription.active` 事件。

```javascript
// Example Node.js/Express webhook handler
app.post("/webhooks/dodo", async (req, res) => {
  const event = req.body;

  switch (event.type) {
    case "subscription.active":
      const subscription = event.data;
      await db.users.update({
        where: { email: subscription.customer.email },
        data: {
          isPremium: true,
          subscriptionId: subscription.subscription_id,
        },
      });
      break;
    // Handle other events like payment.failed or subscription.cancelled
  }

  res.status(200).send("Webhook received");
});
```

如果想深入了解全球支付处理方式，请阅读我们的[如何接受在线支付](https://dodopayments.com/blogs/how-to-accept-online-payments)指南。

## 第 4 步：缓存订阅状态以支持离线使用

PWA 的一项核心特性是支持离线运行。如果用户购买了"Pro"照片编辑器或冥想应用，他们会希望即使在飞机上或地铁里，也能使用这些功能。

你应该将用户的订阅状态存储在 `IndexedDB` 或 `localStorage` 中，并在应用在线时更新它。

### 集成 Service Worker

你可以使用 Service Worker 拦截请求，并检查缓存的订阅状态。

```javascript
// inside your service-worker.js
self.addEventListener("fetch", (event) => {
  if (event.request.url.includes("/api/premium-content")) {
    event.respondWith(
      caches.match("/offline-subscription-status").then((cachedResponse) => {
        if (cachedResponse) {
          return cachedResponse.json().then((status) => {
            if (status.isPremium) {
              return fetch(event.request); // Allow request if premium
            }
            return new Response("Premium access required", { status: 403 });
          });
        }
        return fetch(event.request);
      }),
    );
  }
});
```

这样，即使没有持续的互联网连接，也能确保你的[订阅定价模式](https://dodopayments.com/blogs/subscription-pricing-models)得到执行。

## 第 5 步：处理全球税务与合规

通过 PWA 销售，就意味着面向全球销售。法国用户与日本或纽约用户适用的税务要求不同。如果使用标准支付网关，你需要为每笔交易计算 VAT/GST，在数十个国家注册税号，并按季度申报税务。

这正是 MoR（名义商户）模式成为竞争优势的地方。Dodo Payments 作为法律上的卖方。当英国用户购买你的 PWA 订阅时，Dodo 会计算 20% 的 VAT、收取税款，并将其缴纳给 HMRC。你只需收取结算款。

这种"无需操心"的合规能力对小团队至关重要。与其花费数周编写税务逻辑，不如专注于构建功能。这也是为什么 Dodo 经常被全球化创始人视为[销售数字产品的最佳平台](https://dodopayments.com/blogs/best-platform-sell-digital-products)，并能省去[全球计费](https://dodopayments.com/blogs/global-billing)指南中描述的大部分工作。

## 提升转化率的 PWA 专属技巧

### 1. 使用 Apple Pay 和 Google Pay

移动用户不喜欢输入信用卡号。Dodo 的覆盖式结账自动支持 Apple Pay 和 Google Pay。启用这些方式后，支付摩擦几乎降为零。用户通过生物识别验证，可以在不到五秒内完成从"升级"到"已支付"的操作。

### 2. 实现"添加到主屏幕"提示

PWA 添加到主屏幕后，会显得更加"真实"。使用 `beforeinstallprompt` 事件显示自定义安装横幅。安装应用的用户，转化为付费订阅的可能性明显高于只访问一次 URL 的用户。

### 3. 使用推送通知提醒计费

使用 Web Push API 通知用户支付成功、即将续费或交易失败。这能让你的应用持续保持用户的关注，并降低流失率。

### 4. 优雅处理离线状态

如果用户在离线状态下尝试升级，不要只显示通用错误。应明确说明处理支付需要网络连接，并提供在用户恢复在线后通知他们的选项。

## 对比：PWA 与原生应用商店

| 功能         | PWA + Dodo Payments       | 原生应用商店（IAP） |
| ------------ | ------------------------- | ------------------- |
| **佣金**     | 4% + $0.40                | 15% - 30%           |
| **审核流程** | 即时（无需审核）          | 24 小时 - 7 天      |
| **税务合规** | Dodo 处理（MoR）          | Apple/Google 处理   |
| **支付方式** | 卡片、UPI、钱包、本地方式 | 仅限应用商店账户    |
| **平台覆盖** | iOS、Android、Web、桌面端 | 特定平台            |
| **更新**     | 即时推送                  | 需要商店审核        |

如今，对许多人而言，PWA 提供的[移动优先结账](https://dodopayments.com/blogs/mobile-first-checkout-ai-saas)体验已经与原生应用没有区别，因此 30% 的抽成越来越难以合理化。

## 结语

构建 PWA 是一种掌控销售渠道和收入的战略选择。通过集成 Dodo Payments，你解决了 Web 应用最棘手的问题：如何在全球收款，同时不被税法或应用商店的官僚流程拖慢。

借助覆盖式结账，用户可以获得高级、接近原生的体验。借助 MoR（名义商户）模式，你可以打造合规且可扩展的业务。无论你是在构建微型 SaaS，还是复杂的企业级工具，PWA + Dodo 都是从代码走向全球收入的最快方式。

准备好开始了吗？查看我们的[定价](https://dodopayments.com/pricing)，或深入了解[集成指南](https://docs.dodopayments.com/developer-resources/integration-guide)。

## 常见问题

### 不使用 Apple 的 IAP，我可以在 PWA 中销售数字商品吗？

可以。由于 PWA 在技术上属于网站，因此你可以使用第三方支付处理商。Apple 对 App Store 中的应用有严格规定，但开放 Web 仍然允许你选择自己的支付服务商。使用 Dodo Payments 这样的 MoR（名义商户），可以确保你符合全球贸易法规，同时避开 30% 的应用商店费用。

### 如何处理全球 PWA 用户的销售税？

使用 Dodo Payments 后，你完全无需自行处理。Dodo 会识别用户所在地，计算正确的税费（VAT、GST 或销售税），并将其计入最终价格。随后，Dodo 会向相应政府收取并缴纳税款，覆盖 190 多个国家和地区，让你无需在任何国家自行注册税务，也能面向全球销售。

### 覆盖式结账支持所有移动浏览器吗？

支持。Dodo Payments 覆盖式结账基于现代 Web 标准构建，兼容所有主流移动浏览器，包括 iOS 上的 Safari 和 Android 上的 Chrome。它采用响应式设计，无论设备屏幕尺寸如何，都能提供流畅体验。

### 我可以在 PWA 中提供订阅吗？

当然可以。Dodo Payments 原生支持周期性计费。你可以在控制面板中创建订阅方案，并使用同一个覆盖式结账为用户办理订阅。Dodo 会处理周期性扣款、失败支付的催收管理，并提供客户门户，让用户自行管理订阅。

### 如果用户离线时支付失败，会发生什么？

支付需要有效的互联网连接才能安全处理。如果用户处于离线状态，你的 PWA 应显示友好的提示，说明完成升级需要互联网连接。支付成功且用户再次离线后，你可以使用 Service Worker 缓存，确保设备上的高级权限仍保持有效。

---

_想了解更多优化 SaaS 收入的方法？阅读我们的[订阅定价模式](https://dodopayments.com/blogs/subscription-pricing-models)指南，或了解[SaaS 的名义商户](https://dodopayments.com/blogs/merchant-of-record-for-saas)。_
---
- [More Payments articles](https://dodopayments.com/blogs/category/payments)
- [All articles](https://dodopayments.com/blogs)