WIX Studio: How to Create a Paywall using WIX Velo

In this tutorial I am demonstrating how to create a paywall on WIX Studio using WIX Velo to ensure if your user does not have a paid subscription, they cannot see the content on your page. However, if your user does have a paid subscription plan, they will be able to see the content.

WIX Studio: How to Create a Paywall using WIX Velo

In this demo, I create a glass effect blur background across the content I want hidden behind the paywall.

The API's we will be using from WIX are the 'wix-members' and the 'wix-paid-plans' api.

Step 1: Create a container with a glass effect and stretch it over your page.

Step 2: Import the API's from WIX.

import { currentMember } from 'wix-members';
import wixPaidPlans from 'wix-paid-plans';

Step 3: Declare the new function in your "onReady" function

$w.onReady(() => {
    GetMember();
});

Step 4: Add the following code to your "GetMember" function.async function

GetMember() {
    const member = await currentMember.getMember();
    if (member) {
        // Retrieve the current member's orders
        let orders = await wixPaidPlans.getCurrentMemberOrders()
        console.log(orders);
        // Check if any order is active
        const hasActiveSubscription = orders.some(order => order.status === 'ACTIVE');
        if (hasActiveSubscription) {
            // User has an active subscription
            console.log('User has an active subscription.');
            $w("#boxPaywall").hide();

        } else {
            // User does not have an active subscription
            console.log('User does not have an active subscription.');
            $w("#boxPaywall").show();
        }
    } else {
        // No user is logged in
        console.log('No user is logged in.');
        $w("#boxPaywall").show();
    }
}

NOTE: Remember to name your container box a rememberable term, for example, in this demo we have named the box "boxPayWall".

This will create you a basic paywall on your WIX website using Velo code using a glass effect to blur the content.

If you have any further questions, please do reach out by contacting us

Contact Me