> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Example App With Pricing

## Article: Example: Adjusting Your Blocks App to Different Pricing Plans

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/publish-blocks-apps-to-the-app-market/example-app-with-pricing.md

## Article Content:

# Example Blocks App With Pricing

<blockquote class="caution">

**Editor compatibility**

Wix Blocks apps aren't supported in the Wix Harmony editor. Existing Blocks apps remain available for purchase on the Wix App Market for Wix Editor and Wix Studio sites. To learn more, see [About Wix Harmony and Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-harmony-and-blocks.md).

</blockquote>

When you [publish your Blocks app in the Wix App Market](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/publish-blocks-apps-to-the-app-market/publish-a-blocks-app-to-the-app-market.md), 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](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/publish-blocks-apps-to-the-app-market/adjust-a-blocks-app-to-different-pricing-plans.md)).


This [example application](https://blocks.wix.com/wix-blocks-new-app-creator?editorType=RESPONSIVE&originTemplateId=a51d653d-8db4-4534-a6f2-824e3a261d97&http_referrer=documentation) elegantly counts up until a desired number (the numbers move like in a slot machine). Click **Release** in Blocks to create your own copy of this application, inspect it and use it as you wish. 

![Gif of how the app looks - numbers running up](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2023/05/31/6cf12e6b-a7dd-40de-a170-a49a64f20444/94afdd14-1a11-4940-a3da-4ed79d58e311.gif)

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](https://dev.wix.com/docs/build-apps/launch-your-app/app-distribution/app-market-guidelines.md) 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 app dashboard

## 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](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/widget-design/about-design-presets.md). 

2. Then, we imported the [`wix-application`](https://www.wix.com/velo/reference/wix-application?utm_source=google&utm_medium=cpc&utm_campaign=13708482663%5E124757113632&experiment_id=%5E%5E530755701296%5E%5E_DSA&gclid=CjwKCAjw8symBhAqEiwAaTA__Opbaej4Mz91N_ANHXR3YdIfGvVBLK50mPCvguckVBrKOJfVxE5FBRoCbekQAvD_BwE) module to our widget code. 

```javascript
import wixApplication from 'wix-application'
```
2. We used `getDecodedAppInstance()` to save the `vendorProductId` ([learn more](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/publish-blocks-apps-to-the-app-market/adjust-a-blocks-app-to-different-pricing-plans.md)). 

3. We used the [`delete()`](https://www.wix.com/velo/reference/$w/panelthumbnails/delete?utm_source=google&utm_medium=cpc&utm_campaign=13708482663%5E124757113632&experiment_id=%5E%5E530755701296%5E%5E_DSA&gclid=CjwKCAjw8symBhAqEiwAaTA__Opbaej4Mz91N_ANHXR3YdIfGvVBLK50mPCvguckVBrKOJfVxE5FBRoCbekQAvD_BwE) and [`restore()`](https://www.wix.com/velo/reference/$w/panelthumbnails/restore?utm_source=google&utm_medium=cpc&utm_campaign=13708482663%5E124757113632&experiment_id=%5E%5E530755701296%5E%5E_DSA&gclid=CjwKCAjw8symBhAqEiwAaTA__Opbaej4Mz91N_ANHXR3YdIfGvVBLK50mPCvguckVBrKOJfVxE5FBRoCbekQAvD_BwE) functions to delete and restore the watermark and icon according to the pricing plan. 

Here is part of the widget code: 

```javascript
let startNum1, startNum2, startNum3, propsData;
const icons = ['#icon1', '#icon2', '#icon3'];
let plan, instance;

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

    switch (plan) {
    case 'basic':
        $w('#watermark').delete();
        icons.forEach(icon => {
            $w(icon).delete();
        })
        break;
    case 'pro':
        $w('#watermark').delete();
        icons.forEach(icon => {
            $w(icon).restore();
        })
        break;
    default:
      $w("#watermark").restore();
      icons.forEach((icon) => {
        $w(icon).restore();
      });
    }
});
```
3. After you got the app to work differently for different pricing plans, you can also make [configuration changes](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-configuration/about-configuration-in-blocks.md) and [installation settings](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/deploy-and-manage-blocks-apps/configure-blocks-installation-settings.md) changes.