# How to Accept Payments in a Progressive Web App (PWA)

> Guide to adding payment processing to Progressive Web Apps. Avoid app store fees, use web checkout, and handle subscriptions with automatic tax compliance.
- **Author**: Ayush Agarwal
- **Published**: 2026-03-30
- **Category**: Payments, Mobile, How-To
- **URL**: https://dodopayments.com/blogs/accept-payments-pwa

---

Progressive Web Apps (PWAs) represent the ultimate middle ground for modern software delivery. They offer the reach of the web with the user experience of a native mobile application. For developers, the appeal is obvious: no 30% app store tax, no week-long review processes, and the ability to push updates instantly to every user. You build once, and your app works on iOS, Android, and desktop.

However, moving away from the Apple and Google ecosystems means you lose their built-in In-App Purchase (IAP) systems. While this saves you a massive chunk of revenue, it also places the burden of payment processing, tax compliance, and subscription management squarely on your shoulders. You can't just call a native "buy" function and let the operating system handle the rest.

In this guide, we will walk through how to implement a robust, mobile-first payment flow in your PWA using Dodo Payments. We will cover everything from setting up the overlay checkout to handling offline subscription states and global tax compliance.

## Why PWAs are the Future of SaaS Distribution

The traditional app store model is increasingly under fire. Between the high commission rates and the restrictive policies on what you can and cannot sell, many founders are looking for alternatives. PWAs provide that escape hatch.

> Tax compliance is not a one-time setup. It is a moving target. Rates change, thresholds change, and new jurisdictions add digital services taxes every year. Automating this is not optional if you sell globally.
>
> \- Rishabh Goel, Co-founder & CEO at Dodo Payments

When you [sell software online](https://dodopayments.com/blogs/how-to-sell-software-online), your goal is to reduce friction. Native apps have high friction: the user must visit a store, authenticate, download, and then open the app. A PWA can be "installed" directly from the browser with a single tap.

The challenge has always been payments. Apple, in particular, has historically been aggressive about PWAs using third-party payment systems if they offer "digital goods." But as regulations change and web standards evolve, the web is becoming a first-class citizen for commerce. By using a [merchant of record for SaaS](https://dodopayments.com/blogs/merchant-of-record-vs-payfac), you can bypass the app store gatekeepers entirely while still providing a high-quality checkout experience.

## The PWA Payment Architecture

Accepting payments in a PWA requires a slightly different mental model than a standard website. Because PWAs are designed to work offline and feel like native apps, your payment flow needs to be resilient and integrated.

The core components of a PWA payment system include:

1. **The Checkout Interface**: A mobile-optimized UI that handles card entry, digital wallets (Apple Pay/Google Pay), and local payment methods.
2. **The Backend Handler**: A secure environment to create checkout sessions and process webhooks.
3. **The Service Worker**: The "brain" of your PWA that can cache subscription status for offline access.
4. **The Merchant of Record**: A partner like Dodo Payments that handles the legal complexities of global sales tax (VAT, GST, etc.) so you don't have to.

### The Payment Lifecycle

```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]
```

## Step 1: Integrating the Dodo Payments SDK

Dodo Payments offers an [overlay checkout](https://docs.dodopayments.com/developer-resources/overlay-checkout) that is perfect for PWAs. It doesn't redirect the user away from your app, which is critical for maintaining the "app-like" feel. If a user is redirected to a browser tab, they might lose the context of the installed PWA.

First, install the SDK in your frontend project:

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

Or if you prefer using a CDN in your main HTML file:

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

Initialize the SDK as early as possible, ideally in your main entry point (e.g., `App.tsx` or `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();
    }
  },
});
```

## Step 2: Implementing the Mobile-First Checkout

In a PWA, you want the checkout to feel like a native sheet. Dodo's overlay checkout handles this automatically, providing a responsive UI that adapts to mobile screens.

When the user clicks your "Upgrade" button, your frontend should call your backend to create a checkout session. This keeps your API keys secure and allows you to pre-fill customer data.

### Frontend Component

```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>
  );
};
```

By using [embedded payments for SaaS](https://dodopayments.com/blogs/embedded-payments-saas), you ensure that the user never feels like they are leaving your application. This continuity is a major factor in conversion rates for mobile users.

## Step 3: Handling Webhooks and Provisioning

Payments are asynchronous. Even if the overlay says "Success," you must wait for a verified webhook from Dodo Payments before granting access to premium features. This prevents "man-in-the-middle" attacks where a user might try to spoof a successful frontend event.

Your backend should listen for the `payment.succeeded` or `subscription.active` events.

```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");
});
```

For a deeper dive into how this works globally, check out our guide on [how to accept online payments](https://dodopayments.com/blogs/how-to-accept-online-payments).

## Step 4: Caching Subscription Status for Offline Use

One of the defining features of a PWA is its ability to work offline. If a user pays for a "Pro" photo editor or a meditation app, they expect those features to work even when they are on a plane or in a subway.

You should store the user's subscription status in `IndexedDB` or `localStorage` and update it whenever the app is online.

### Service Worker Integration

You can use your service worker to intercept requests and check the cached subscription status.

```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);
      }),
    );
  }
});
```

This ensures that your [subscription pricing models](https://dodopayments.com/blogs/subscription-pricing-models) are enforced even without a persistent internet connection.

## Step 5: Handling Global Tax and Compliance

When you sell via a PWA, you are selling to the world. A user in France has different tax requirements than a user in Japan or New York. If you were using a standard payment gateway, you would need to calculate VAT/GST for every single transaction, register for tax IDs in dozens of countries, and file quarterly returns.

This is where the Merchant of Record (MoR) model becomes a competitive advantage. Dodo Payments acts as the legal seller. When a user in the UK buys your PWA subscription, Dodo calculates the 20% VAT, collects it, and remits it to HMRC. You simply receive your payout.

This "hands-off" compliance is essential for small teams. Instead of spending weeks on tax logic, you can focus on building features. This is why Dodo is often cited as the [best platform to sell digital products](https://dodopayments.com/blogs/best-platform-sell-digital-products) for global-first founders.

This "hands-off" compliance is essential for small teams. Instead of spending weeks on tax logic, you can focus on building features. This is why Dodo is often cited as the [best platform to sell digital products](https://dodopayments.com/blogs/how-to-sell-digital-products-online) for global-first founders.

## PWA-Specific Tips for Higher Conversion

### 1. Use Apple Pay and Google Pay

Mobile users hate typing in credit card numbers. Dodo's overlay checkout automatically supports Apple Pay and Google Pay. When these are available, the friction drops to zero. A user can go from "Upgrade" to "Paid" in under five seconds using biometric authentication.

### 2. Implement "Add to Home Screen" Prompts

A PWA feels more "real" once it's on the home screen. Use the `beforeinstallprompt` event to show a custom install banner. Users who install your app are significantly more likely to convert to a paid subscription than those who just visit the URL once.

### 3. Push Notifications for Billing

Use the Web Push API to notify users about successful payments, upcoming renewals, or failed transactions. This keeps your app top-of-mind and reduces churn.

### 4. Graceful Offline Handling

If a user tries to upgrade while offline, don't just show a generic error. Explain that they need a connection to process the payment and offer to notify them when they are back online.

## Comparison: PWA vs. Native App Store

| Feature              | PWA + Dodo Payments        | Native App Store (IAP)  |
| -------------------- | -------------------------- | ----------------------- |
| **Commission**       | ~5% + $0.50                | 15% - 30%               |
| **Approval Process** | Instant (No review)        | 24 hours - 7 days       |
| **Tax Compliance**   | Handled by Dodo (MoR)      | Handled by Apple/Google |
| **Payment Methods**  | Cards, UPI, Wallets, Local | App Store Account Only  |
| **Platform Reach**   | iOS, Android, Web, Desktop | Platform Specific       |
| **Updates**          | Instant push               | Store review required   |

For many, the [mobile-first checkout](https://dodopayments.com/blogs/mobile-first-checkout-ai-saas) experience provided by PWAs is now indistinguishable from native apps, making the 30% tax harder to justify.

## Conclusion

Building a PWA is a strategic choice to own your distribution and your revenue. By integrating Dodo Payments, you solve the hardest part of the web-app puzzle: how to collect money globally without getting bogged down in tax law or app store bureaucracy.

With the overlay checkout, your users get a premium, native-feeling experience. With the MoR model, you get a compliant, scalable business. Whether you are building a micro-SaaS or a complex enterprise tool, the PWA + Dodo stack is the fastest way to go from code to global revenue.

Ready to start? Check out our [pricing](https://dodopayments.com/pricing) or dive into the [integration guide](https://docs.dodopayments.com/developer-resources/integration-guide).

## FAQ

### Can I sell digital goods in a PWA without using Apple's IAP?

Yes. Because a PWA is technically a website, you are allowed to use third-party payment processors. While Apple has strict rules for apps in the App Store, the open web remains a platform where you can choose your own payment provider. Using a Merchant of Record like Dodo Payments ensures you stay compliant with global trade laws while avoiding the 30% app store fee.

### How do I handle sales tax for global PWA users?

When you use Dodo Payments, you don't have to handle it at all. Dodo identifies the user's location, calculates the correct tax (VAT, GST, or Sales Tax), and includes it in the final price. Dodo then collects and remits that tax to the respective governments. This allows you to sell in 220+ countries and regions without registering for tax in any of them.

### Does the overlay checkout work on all mobile browsers?

Yes. The Dodo Payments overlay checkout is built using modern web standards and is compatible with all major mobile browsers, including Safari on iOS and Chrome on Android. It is designed to be responsive and provides a seamless experience regardless of the device's screen size.

### Can I offer subscriptions in my PWA?

Absolutely. Dodo Payments has native support for recurring billing. You can create subscription plans in your dashboard and use the same overlay checkout to sign users up. Dodo handles the recurring charges, dunning management for failed payments, and provides a customer portal for users to manage their own subscriptions.

### What happens if a user's payment fails while they are offline?

Payments require an active internet connection to be processed securely. If a user is offline, your PWA should show a friendly message explaining that an internet connection is required to complete the upgrade. Once the payment is successful and the user goes back offline, you can use service worker caching to ensure their premium status remains active on the device.

---

*Looking for more ways to optimize your SaaS revenue? Read our guide on [subscription pricing models](https://dodopayments.com/blogs/subscription-pricing-models) or learn about [merchant of record for 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)