Skip to main content

Paywall with StorifyMe

In case you want your Stories and Shorts to work with monetization and paywalls, this is possible with StorifyMe Paywall integration.

StorifyMe Web SDK provides a set of methods and events to manage and interact with paywalls within your application.

Methods​

Show paywall​

This method displays the paywall to the user and can be used as:

widget.paywall.show();

Hide paywall​

This method dismisses the paywall and can be used as:

widget.paywall.hide();

Hide permanently​

This method dismisses the paywall and marks it as completed:

widget.paywall.hide(true);

Get paywall status​

This method retrieves the current status of the paywall and can be used as:

const status = widget.paywall.getStatus();
// Returns: 'triggered', 'completed', or null

Register completion callback​

This method registers a callback function that will be invoked when the user completes the payment:

widget.paywall.onCompleted((data) => {
    console.log('Payment completed:', data);
    // Handle successful payment
});

Register close callback​

This method registers a callback function that will be invoked when the user dismisses the paywall:

widget.paywall.onClose((data) => {
    console.log('Paywall closed:', data);
    // Handle paywall dismissal
});

Events​

You can attach and subscribe to events in order to run logic on your website when something happens in Stories and Shorts regarding Paywall logic.

Please initialize widget manually

In order to be sure that you will receive all the events, eg. onLoad, please first register events and then initialize the widget.

You can mark the widget to be manually loaded with init="manual".

onPaywall()​

onPaywall method is invoked every time a paywall-related action happens. Supported types:

  • PAYWALL_TRIGGERED - Happens when paywall is shown to the user
  • PAYWALL_COMPLETED - Happens when user completes the payment
  • PAYWALL_CLOSED - Happens when user dismisses the paywall
// Get the widget element
const widget = document.querySelector('#widget');

widget.addEventListener('onPaywall', (event) => {
    console.log(event.type); // Type of the paywall action that happened
    console.log(event.detail); // Details for the action that happened
});

// Load widget
widget.load();

API Documentation​

Story Player API​

When the story is directly embedded (not in iframe):

  • window.storifyme.paywall.show() - Show paywall
  • window.storifyme.paywall.hide() - Hide paywall
  • window.storifyme.paywall.getStatus() - Get status ('triggered', 'completed', or null)
  • window.storifyme.paywall.onCompleted(callback) - Register callback for payment completion
  • window.storifyme.paywall.onClose(callback) - Register callback for paywall dismissal

Widget API​

When the story is in iframe (most common scenario):

  • widget.paywall.show() - Show paywall
  • widget.paywall.hide() - Hide paywall
  • widget.paywall.getStatus() - Get status ('triggered', 'completed', or null)
  • widget.paywall.onCompleted(callback) - Register callback for payment completion
  • widget.paywall.onClose(callback) - Register callback for paywall dismissal