sesamy-paywall

A web component that displays a paywall for content, loading paywall settings from a remote URL and supporting different templates (Article, Boxes, Login).

Props/Attributes

• settings-url - URL to fetch paywall settings (required)
• item-src - URL of the content item
• price - Price of the content
• currency - Currency code for the price
• redirect-url - URL to redirect after purchase
• utm-source, utm-medium, utm-campaign, utm-term, utm-content - UTM parameters for tracking
• pass - Pass ID for access

Events

• sesamyPaywallAccessChecked - Emitted after access check, with { hasAccess, paywallId, articleUrl, passes } in detail
• sesamyPaywallProductSelected - Emitted when a product/subscription is selected and the continue button is pressed, with { product, checkoutId, paywallId } in detail
• sesamyPaywallCheckoutRedirect - Emitted before redirecting to checkout, with { checkout, paywallId, paymentMethod } in detail

Basic Usage

<!-- Article paywall -->
<sesamy-paywall
  settings-url="https://api.example.com/paywall/settings"
  item-src="https://example.com/article"
  price="99"
  currency="USD"
>
  <div slot="features">✔️ Unlimited access<br />✔️ Cancel anytime</div>
</sesamy-paywall>

<!-- Login paywall with below-headline slot -->
<sesamy-paywall settings-url="https://api.example.com/paywall/login-settings">
  <div slot="below-headline">Additional content below headline</div>
</sesamy-paywall>

Slots

The sesamy-paywall component provides two main slots for customization:

below-headline

• Purpose: Inserts custom content directly below the paywall headline
• Behavior: The content you provide in this slot will be rendered in addition to the default paywall content, immediately below the headline. Use this for adding extra information, banners, or custom elements

<sesamy-paywall settings-url="https://api.example.com/paywall/login-settings">
  <div slot="below-headline">Special offer for new users!</div>
</sesamy-paywall>

features

• Purpose: Replaces the default features section of the paywall
• Behavior: When you provide content in the features slot, it will completely replace the built-in features list or section. Use this slot to fully customize the list of benefits, features, or selling points shown to the user

<sesamy-paywall settings-url="https://api.example.com/paywall/settings">
  <div slot="features">
    <ul>
      <li>✔️ Unlimited access</li>
      <li>✔️ Cancel anytime</li>
      <li>✔️ Exclusive articles</li>
    </ul>
  </div>
</sesamy-paywall>

TIP

The below-headline slot adds to the paywall, while the features slot replaces the default features section entirely.

Paywall Templates

The component supports different paywall templates that can be configured via the settings-url:

• Article - Designed for single article purchases
• Boxes - Product selection with multiple options
• Login - Simple login gate for registered users