Example: Adapting Your Blocks App to a Pricing Plan

When you publish your Blocks app in the Wix App Market, you can choose to provide different app behaviors for site-creators with different pricing plans. People who download a free version of your app may get several services, while those who pay for it, get more. This requires creating and managing a system that identifies the user, determines their pricing plan and impacts the app's behavior (learn more about adjusting your Blocks app to a pricing plan).

This example application elegantly counts up until a desired number (the numbers move like in a slot machine). Click Build in Blocks to create your own copy of this application, inspect it and use it as you wish.

Our application has three pricing plans: 

• Basic: Site creators can configure the items.
• Pro: Site creators can also add and change icons. 
• No plan: There is a watermark over everything (note that current App Market guidelines do not allow watermarks. It's only for the sake of our example). 

What you get in the template

Your copy of the application includes:

• The widgets design and code
• The panels and configuration settings

Your copy does not include the following (define them on your own):  

• Installations settings
• Pricing settings in the Wix Developers Center

How to adapt the app to the different pricing plans

Let's dive into the application and see how it was built.

1. The first step was to create the UI in Blocks. We also created 4 different design presets.

2. Then, we imported the wix-application module to our widget code. 

1
import wixApplication from 'wix-application'

1. We used getDecodedAppInstance() to save the vendorProductId (learn more).

2. We used the delete() and restore() functions to delete and restor the watermark and icon according to the pricing plan.

Here is part of the widget code:

1
let startNum1, startNum2, startNum3, propsData;
2
const icons = ['#icon1', '#icon2', '#icon3'];
3
let plan, instance;
4

5
$w.onReady(async function () {
6
    instance = await wixApplication.getDecodedAppInstance();
7
    plan = instance.vendorProductId;
8

9
    switch (plan) {
10
    case null:
11
        $w('#watermark').restore();
12
        icons.forEach(icon => {
13
            $w(icon).restore();
14
        })
15
        break;
16
    case 'basic':
17
        $w('#watermark').delete();
18
        icons.forEach(icon => {
19
            $w(icon).delete();
20
        })
21
        break;
22
    case 'pro':
23
        $w('#watermark').delete();
24
        icons.forEach(icon => {
25
            $w(icon).restore();
26
        })
27
        break;
28
    }
29
});

1. After you got the app to work differently for different pricing pricing plans, you can also make configuration changes and installation settings changes.