> For the complete documentation index, see [llms.txt](https://docs.airdev.co/canvas/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.airdev.co/canvas/3.8/canvas-library/popups/pricing-plans-popup.md).

# Pricing Plans Popup

## Overview

![](/files/akyb4tji4cdbROOEKizp)

Use this popup to display pricing plans with different billing frequencies.

## Structure

This popup includes the following:

* A hidden variable called **var - selection** that captures the user's current selection
* A title text and a collapsible description text that can be hidden.
* A toggle tabs group (**Group Main tab\_text**) with two inner tab options (**Group Inner tab 1\_text** and **Group Inner tab 2\_text**)
  * Clicking on each inner tab group will run a workflow to display the inner tab's group text (e.g. Monthly or Annually) in **Group Main tab\_text** and change the current tab view. 
  * Currently clicking on each tab will just change the "/month" and "/year" text in the repeating group.

![Conditional statement in a text element in the repeating group](/files/Fug5WsI1q7dClMXCDbMb)

* **RepeatingGroup Dummy** displays a list of things
* Clicking on **Button Cancel** and **Button Confirm** will close the popup

## How to set up

* Update the title and description text. 
  * You can hide the description text by selecting **Group Collapsible text** and unchecking the box for *This element is visible on page load*.
* Update the text data sources for **Group Inner tab 1\_text** and **Group Inner tab 2\_text**. Changing the name here will change the toggle tab text.

![](/files/VcbT38LTnV38ka2OVEzp)

* Update **RepeatingGroup Dummy's** data source to the data type you want to display.
  * Update all the inner groups in the repeating group to the new data type
  * Select **Group Inner price\_number**, **Text Basic**, and **Text For hobbyists** and remove all conditional statements on those elements (these are placeholders).
  * Update **var - selection's** data source (this should be the same as the repeating group's data type).
* Add workflow to Button Confirm.

### How to display different content in each tab

* If you want to change a text in the repeating group when the current tab is changed, you should update that text element directly and use the `format as text: yes/no` logic.

![](/files/rjXdjOuTJ2obRROsYEFK)

* If you want to display a completely different set of list for the other tab, you should add a conditional statement to the repeating group similar to the following:

![](/files/iNMJyZoQADo4KFHgDSSV)