> For the complete documentation index, see [llms.txt](https://developer.paddle.com/llms.txt).

# Web monetization starter kit

Production-ready Next.js starter kit for monetizing iOS apps on the web. Includes a customizable landing page, pricing page, paywall, and integrated Paddle Checkout, designed to meet platform approval requirements.

---

A Next.js starter kit for monetizing your iOS app on the web. Ships with a customizable landing page, pricing page, paywall, and integrated checkout — designed to meet Paddle's website requirements for platform approval so you can go live quickly.

{% card-group cols=3 %}
{% card title="GitHub" icon="carbon:logo-github" url="https://github.com/PaddleHQ/paddle-mobile-web-payments-starter" %}
View source code, report issues, and contribute on GitHub.
{% /card %}
{% card title="Live demo" icon="carbon:application-web" url="https://paddle-mobile-web-payments-starter.vercel.app/" %}
Try the starter kit before you get started.
{% /card %}
{% card title="Tutorial" icon="carbon:rocket" url="/get-started/starter-kits/web-monetization" %}
Step-by-step walkthrough from setup to test payment.
{% /card %}
{% /card-group %}

## What's included

- A customizable landing page, pricing page, and paywall.
- A high-converting checkout built with [Paddle Checkout](https://developer.paddle.com/concepts/sell/self-serve-checkout.md).
- [shadcn UI components](https://ui.shadcn.com/) so you can theme to match your brand.
- A setup that meets Paddle's website requirements for platform approval.

## Tech stack

| Layer        | Tool                                                                              |
| ------------ | --------------------------------------------------------------------------------- |
| Framework    | [Next.js](https://nextjs.org/)                                                    |
| Hosting      | [Vercel](https://vercel.com/)                                                     |
| Payments     | [Paddle.js wrapper](https://developer.paddle.com/sdks/libraries/paddle-js-wrapper.md)                            |
| Fulfillment  | [RevenueCat](https://www.paddle.com/revenuecat-integration-beta) or [webhooks](https://developer.paddle.com/webhooks/overview.md) |
| Styling      | [Tailwind CSS](https://tailwindcss.com/)                                          |
| Components   | [shadcn/ui](https://ui.shadcn.com/)                                               |

## Requirements

- A [Vercel](https://vercel.com/) account.
- A Git provider (GitHub recommended).
- An Apple Developer account, Xcode, and access to your iOS project (for the in-app integration).
- Node.js v20+ if you plan to develop locally.

## Get started

Deploy the starter kit to Vercel:

[Deploy Paddle web monetization starter kit to Vercel in one-click](https://vercel.com/new/clone?demo-title=Paddle+Mobile+Web+Payments+Starter&demo-description=Starter+project+for+iOS+apps+using+Paddle+checkout+in+Next.js.&demo-url=https%3A%2F%2Fpaddle-mobile-web-payments-starter.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F5fJcPbgzJYPsQCU1xJSKMO%2Ffb9049837adf2718d8e9bf8c987dffdb%2FHaJrngN.png&project-name=Paddle+Mobile+Web+Payments+Starter&repository-name=paddle-mobile-web-payments-starter&repository-url=https%3A%2F%2Fgithub.com%2FPaddleHQ%2Fpaddle-mobile-web-payments-starter&from=templates)

Alternatively, follow [the complete tutorial](https://developer.paddle.com/get-started/starter-kits/web-monetization.md) to deploy the starter kit manually.