SDKs

React SDK

Drop-in <Paywall /> and <PaywallModal /> components for any React app. SSR safe. Zero config beyond an API key.

Install

bash

npm install @experiwall/react

Provider

Mount the provider once near the root of your app.

tsx

import { ExperiwallProvider } from "@experiwall/react";

<ExperiwallProvider
  apiKey={process.env.NEXT_PUBLIC_EXPERIWALL_KEY!}
  user={{ id: currentUser.id, attributes: { plan: "free" } }}
>
  {children}
</ExperiwallProvider>

<Paywall />

Renders a paywall inline. Useful for upgrade pages, settings screens, or anywhere a full-page paywall makes sense.

tsx

<Paywall paywallId="pro-upgrade" onSuccess={(p) => grant(p)} />

Renders a paywall as an overlay. Controlled by an open prop so it composes with any state machine.

tsx

<PaywallModal
  paywallId="pro-upgrade"
  open={open}
  onClose={() => setOpen(false)}
  onSuccess={(p) => grant(p)}
/>

usePaywall()

Need to drive a custom UI? usePaywall(id) returns the resolved config, the loading state, and a purchase()action.

Tip

Prefer the high-level components when you can. The hook is for advanced cases like in-game overlays, multi-step funnels, or fully custom renderers.