Wix Blocks: Setting Up and Managing Your App's Pricing

5 min read
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 through the Wix Developers Center, you 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: configure pricing in the Wix Developers Center

Adjust your Blocks app to the pricing plans

Configuring the pricing settings in the Wix Developers Center is only a first step. Now, you need to adjust your app to handle this pricing plan with your own logic and UI. This includes four steps: 
  1. Create a different user interface (UI) for the different plans
  2. Code how your app behaves with the different plans
  3. Optional: make some configuration adjustments
  4. Optional: customize your panels
  5. Optional: change the installation settings
In this article, we use an example app that shows numbers moving upwards, like in a slot machine. 

Gif of how the app looks - numbers running up

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, or through deleting and restoring elements with the delete() and restore() functions.  A multi-state box can give you different user interfaces with no code at all. 
Also, make sure to create clear entry points for site-creators to upgrade your app once they installed it. 

Step 2 | Code

Use the following in your widget code to impact your widget's behavior. 
Import the wix-application module in order to process this information. 
1import wixApplication from 'wix-application'
Use getDecodedAppInstance() to get the vendorProductId and use it in your code logic.
1import wixApplication from 'wix-application';
3$w.onReady(async function () {
4    instance = await wixApplication.getDecodedAppInstance();
5    plan = instance.vendorProductId;
6 //Your 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
11$widget.onPropsChanged((oldProps, newProps) => {
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 the grid, as non-selectable. You can also change display names. Make sure to think about all your pricing plans when making these changes. 

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

Step 4 | Customize your panels

You can get the vendorProductId of the app and show or hide elements in the panel according to the plan in the Panel code, just like 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 panel, and more options. Make sure to think about all your pricing plans when you go over your installation settings. For example, there are some widgets that you might want to hide from the Add Elements panel.

Congratulations, your app is ready to publish! Make sure it stands up to the Wix Developers Center guidelines

Did this help?