React

@ui-kit/react wraps the Web SDK for React 18 and later. It is safe to render on the server: the SDK is loaded only in the browser, inside effects and event handlers, and the module is marked 'use client'.

npm install @ui-kit/web @ui-kit/react

Call configure from @ui-kit/web once at startup:

import { configure } from '@ui-kit/web';
configure({ apiKey: 'pk_...' });

The package also re-exports the types Answers, AutoPlacementsOptions, PaywallJson, PaywallOptions, PresentOptions, ProductInfo and PurchaseResult.

PaywallCopy Anchor Link

Draws a screen inline.

import { Paywall } from '@ui-kit/react';

export function Pricing() {
  return <Paywall paywall={{ placement: 'pricing' }} products={products} onPurchase={({ packageId }) => checkout(packageId)} />;
}

Props: every PaywallOptions of mountPaywall, plus className and style for the wrapping div.

• It reloads when paywall, locale, colorMode, products, variablesPerPackage, customVariables, maxContentWidth, attributes or screens change. Each reload is a new view.
• A placement, paywall ID or URL compares by value, so writing paywall={{ placement: 'x' }} inline does not reload. Full JSON compares by reference: keep it in state or a constant.
• Callbacks always use their latest version without reloading. Adding or removing onRestore does reload, because the restore button depends on it.
• Load errors go to onError.

usePaywallCopy Anchor Link

Returns a function that presents a screen over the page.

import { usePaywall } from '@ui-kit/react';

export function UpgradeButton() {
  const present = usePaywall({ products });
  return (
    <button onClick={async () => {
      const result = await present({ paywall: { placement: 'upgrade_button' }, onPurchase: ({ packageId }) => checkout(packageId) });
      if (result.outcome === 'purchased') unlockPro();
    }}>Upgrade</button>
  );
}

usePaywall(defaults?: Partial<PresentOptions>) returns (options: PresentOptions) => Promise<PurchaseResult>. Options of the call override the defaults. The result is the same as presentPaywall.

useAutoPlacementsCopy Anchor Link

Shows the placements that have a trigger while the component is mounted. Render it once, in your root layout.

'use client';
import { useAutoPlacements } from '@ui-kit/react';

export function AutoPlacements() {
  useAutoPlacements({ products, onPurchase: ({ packageId }) => checkout(packageId), onResult: ({ placement, result }) => track(placement, result) });
  return null;
}

Options are read when a screen opens, so prices loaded later are used without restarting. It stops the triggers on unmount. See Auto placements.

RelatedCopy Anchor Link

• Guide: React integration
• Web component
• Callbacks