Web component
Put a screen on a page with the uikit-paywall tag, set it up with attributes and properties, and listen for its events.
<uikit-paywall> draws a screen inline from plain HTML. The script build registers it for you. With a bundler, call definePaywallElement() once.
<uikit-paywall placement="pricing" api-key="pk_..."></uikit-paywall>
<script>
const el = document.querySelector('uikit-paywall');
el.products = { annual: { price: 59.99, currency: 'USD', period: 'year' } };
el.onPurchase = async ({ packageId }) => startCheckout(packageId);
el.addEventListener('uikit-purchased', (event) => unlockPro(event.detail.packageId));
</script>function definePaywallElement(tagName = 'uikit-paywall'): void;It is safe to call twice and during server rendering. Pass another name to use your own tag.
Attributes
| Attribute | What it does |
|---|---|
placement | Placement key. |
paywall-id | A published screen's ID. |
src | A URL that returns the screen JSON. |
api-key | Public key. Calls configure for the page. |
api-url | Override the delivery API. |
locale | Language, such as vi_VN. |
color-mode | light, dark or system. |
max-content-width | For example 480px. |
The source is the first that is set: the paywall property, then placement, paywall-id, src. Changing an attribute re-renders.
Properties
| Property | Type |
|---|---|
paywall | PaywallSource. Any source, including JSON. |
products | An object of package ID to ProductInfo. |
customVariables | Values for custom.NAME text. |
visitorAttributes | Attributes for audiences. |
onPurchase, onRestore, onAction, onAnswer, onOpenUrl | The callbacks of Callbacks. |
Setting data properties re-renders (several changes in one tick render once). Callbacks are read when a button is tapped. Setting onRestore for the first time (or clearing it) re-renders because the restore button depends on it. onClose, onSkip and onError are events, not properties. screens and variablesPerPackage are not available on the element.
The element is display: block unless you set a display. It draws inline like mountPaywall: purchases do not remove it.
Events
All events bubble and cross the shadow boundary (composed).
| Event | detail | When |
|---|---|---|
uikit-ready | none | The screen was drawn (not sent when skipped). |
uikit-purchased | { packageId, answers } | onPurchase finished without returning false. |
uikit-restored | none | onRestore finished without returning false. |
uikit-close | { answers } | The close button was pressed. |
uikit-action | { actionId, answers } | A "Run your code" button was pressed and onAction did not return false. |
uikit-answer | { fieldId, value, answers } | An answer changed. |
uikit-skipped | { reason } | Targeting chose to show nothing. |
uikit-error | { error } | A load or renderer error. |
A purchase without an onPurchase property reports UIKit: set element.onPurchase to handle purchase buttons in uikit-error.