Present a screen

present opens a screen over your page or app and finishes when the user is done with it. Use it for upgrade buttons, feature gates, prompts and any moment your own code decides.

function presentPaywall(options: PresentOptions): Promise<PurchaseResult>;

import { configure, presentPaywall } from '@ui-kit/web';

configure({ apiKey: 'pk_...' });

const result = await presentPaywall({
  paywall: { placement: 'upgrade_button' },
  products: {
    monthly: { price: 9.99, currency: 'USD', period: 'month' },
    annual: {
      price: 59.99,
      currency: 'USD',
      period: 'year',
      offer: { price: 0, period: { unit: 'day', count: 7 } },
    },
  },
  onPurchase: async ({ packageId }) => startCheckout(packageId),
});

Where the screen comes fromCopy Anchor Link

See Preload and sources for the JSON format and caching. A JSON source without components_config.base fails: Miniwall: not a screen JSON (expected components_config.base.stack) on mobile, Not a paywall JSON: expected components_config.base on web.

OptionsCopy Anchor Link

Every option is optional (on web, paywall is required).

Source and lookCopy Anchor Link

Prices and textCopy Anchor Link

CallbacksCopy Anchor Link

Details: Callbacks.

TargetingCopy Anchor Link

The resultCopy Anchor Link

answers holds what the user answered (see Answers). skipped means nothing opened; reason is frequency_cap, audience or holdout.

present throws (or the promise rejects) when the screen cannot be loaded, for example a wrong key or no network and no saved copy. Wrap the call in try/catch. See Errors.

try {
  const result = await presentPaywall({ paywall: { placement: 'upgrade_button' }, products, onPurchase });
  switch (result.outcome) {
    case 'purchased': unlockPro(result.packageId); break;
    case 'action': handleAction(result.actionId, result.answers); break;
    default: break; // closed, restored or skipped
  }
} catch (error) {
  console.error('Could not show the screen', error);
}

While it is openCopy Anchor Link

• While your onPurchase, onRestore or onAction runs, the screen shows a busy spinner and ignores further taps, so a double tap cannot start two checkouts.
• A screen with "Go to another screen" buttons moves between screens inside the same presentation. The result arrives once, when the flow ends. The first screen is the one the placement returns, so its A/B test, schedule and audiences apply to the whole flow. See Answers.
• The SDK adds no close button. A screen closes with a button in its design that uses the action Close the screen, or with the platform gestures below. Closing finishes with closed.
• Links open only if they are http, https, mailto, tel or start with a single /.

With a placementCopy Anchor Link

A placement source also applies the placement's setup in the dashboard: which screen, its A/B test, a schedule in force, audiences, frequency limit, holdout and display format. See Placements. Views, closes, purchase taps, purchases, restores, button presses and chosen answers are reported to Analytics unless you set analytics to false. See Events and privacy.

RelatedCopy Anchor Link

• Display modes
• Callbacks
• Purchases and prices
• Embed a screen
• Auto placements