Adjusting Your Blocks App to Different Pricing Plans

Wix Blocks is open to all Wix Studio users. To get access to Blocks, join Wix Studio.

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. For example, 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.

Before you begin adjusting your app to different pricing plans, define your business model in the Wix Developers Center.

Note:

  • For each plan, you can also add a free trial.
  • If you want to add in-app purchases (also known as one-time payments), you must add a Dashboard page and add OAuth.
  • If you already published your app, and now you want to test the app with your pricing plans, create a test coupon.

Configuring the pricing settings in the Wix Developers Center is only a first step. Now, you need to adjust your app to handle these pricing plans with your own logic and user interface (UI). This includes two main steps:

  1. Create a different UI for the different plans
  2. Code how your app behaves with the different plans

More optional steps can include:

  1. Make some configuration adjustments
  2. Customize your panels
  3. Change the installation settings

Example application

Here is an example application that uses pricing plans. You can click Build in Blocks, to create your own copy of this application.

This example application gives you:

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

The template does not give you the following (define them on your own):  

  • Pricing settings in the Wix Developers Center
  • Installations settings

Step 1 | Creating a user interface (UI) for the different plans

Since your app needs to behave differently to users according to their different pricing plans, the first thing you should understand is what the different users see. You can do this through a multi-state box, which gives you different user inteface with no code at all. Alternatively, you can delete and restore elements with the delete() and restore() functions.

Should I use a mutli-state box or delete() and restore() ?

  • If you want a completely different behavior in the different plans, it's best to choose a multi-state box. 
  • If most of the behavior is similar, and you want to modify just several specific elements - use delete() and restore().

Step 2 | Code

Use the following in your widget code to impact your widget's behavior. 

Your app's JWT

When your Blocks app is installed on a site, it generates a Jason Web Token (JWT) for that app instance. The JWT has two fields that are important for this process: 

  • appDefId: Your app's ID
  • vendorProductId: The ID of the pricing plan in use, as you configured in the Wix Developers Center. If there is no plan, this ID is null.

getDecodedAppInstance()

This function is part of the wix-application module and is used for parsing your app's JWT.

First, import the wix-application module in order to process this information. 

Then, use getDecodedAppInstance() to save the vendorProductId and use it in your app's logic:

Copy
1
import wixApplication from 'wix-application';
2


3
$w.onReady(async function () {
4
    instance = await wixApplication.getDecodedAppInstance();
5
    plan = instance.vendorProductId;
6
 //You configured vendorProductId in the Wix Developers Center. 
7
 //If there is no plan, the value is null. 
8
 // Now, add your logic for the different plans
9
});
10


11
$widget.onPropsChanged((oldProps, newProps) => {
12
});

Note: You can also import wix-application in your app's backend files.

Step 3 | Configuration

Now, you might want to make some changes in the Configuration tab in Blocks. 

You can define certain elements of your widget, such as a grid that helped you layout the elements, as non-selectable. You can also change display names. Make sure to think about all your pricing plans when making these changes. 

Note: Once you define a pricing plan for your app, your widget automatically gets an Upgrade button in its action bar.

Learn more about configuring widget and element display names and behavior.  

Step 4 | Customize your panels

You can get the vendorProductId of the app and show or hide panel elements according to the plan, just as you did in the widget code.

This is done in the code section of your panel in the Panels tab.

Step 5 | App and widget installation settings

Your app installation settings allow you to control what widgets are seen in a site's Add Elements panel, and more options. Make sure to think about all your pricing plans when you go over your installation settings.

Learn more about app and widget installation settings.

Was this helpful?
Yes
No