> 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: Build a Custom Pricing Plans Page
## Article: Build a custom Pricing Plans page
## Article Link: https://dev.wix.com/docs/develop-websites/articles/wix-apps/wix-app-collections/other-apps/wix-pricing-plans/build-a-custom-pricing-plans-page.md
## Article Content:
# Velo: Build a Custom Pricing Plans Page
You can replace your site’s default [Wix Pricing Plans page](https://support.wix.com/en/article/customizing-the-design-of-your-pricing-plans-page) with your own customized version. This enables you to modify or extend the page’s functionality to suit your precise business needs.
To integrate the page into your site’s pricing plans flow and implement its functionality, you need to add code to the page and use Velo APIs.
Your code has to do several things:
- Get data about the available pricing plans.
- Handle UI initialization and interactions.
- Implement any customized business logic.
- Direct users to the next page in the flow.
## Step 1 | Add a custom Pricing Plans page to your site
To create a custom Pricing Plans page, do one of the following:
Wix Studio
1. Click  and then **Start Coding** from the sidebar on the left side of the Editor.
1. Click **Pages**  on the sidebar.
1. On the **Plans & Pricing** (under **Pricing Plans Pages**), click the **More Actions** icon .
1. Click **Replace with custom page**.
1. In the confirmation panel, click **Replace**.
Wix Editor
1. Turn on [Dev Mode](https://support.wix.com/en/article/about-velo-by-wix#to-enable-velo-on-your-site).
1. Click **Pages**  on the left side of the editor.
1. Click **Pricing Plans Pages**, and then on the **Plans & Pricing** page, click .
1. Click **Replace with custom page**.
1. In the confirmation panel, click **Replace**.
## Step 2 | Design your custom page
[Add elements to the page](https://support.wix.com/en/article/wix-editor-adding-and-deleting-elements) to create your business’s customized design and functionality, such as text, buttons, and images.
At a minimum, these elements must:
- Display information about the pricing plans and let the site visitor select the plan.
- Provide an action button that navigates to the next page in the flow (usually the Checkout).
## Step 3 | Add Velo code to your page
1. Use the [`getAppPageData()`](https://www.wix.com/velo/reference/wix-window-frontend/getapppagedata) function to get the [plans object](https://dev.wix.com/docs/velo/api-reference/wix-window-frontend/app-page-data.md) associated with the page, and the [`getPricingPageOptions()`](https://dev.wix.com/docs/velo/api-reference/wix-pricing-plans-frontend/custom-purchase-flow/get-pricing-page-options.md) function to get the options set for the current Plans & Pricing page.
For example:
``` js
import wixWindowFrontend from 'wix-window-frontend';
$w.onReady(async function () {
const { plans } = await wixWindowFrontend.getAppPageData();
const options = await customPurchaseFlow.getPricingPageOptions();
});
```
2. Depending on the functionality you’re developing, implement any business logic that your customized page requires. For example, define all the items in the repeater, such as text and buttons.
3. Add an [event handler](https://support.wix.com/en/article/velo-reacting-to-user-actions-using-events) to the page’s action button so that it navigates to the next page in the flow, which is typically your site’s Checkout. Use the [`navigateToCheckout()`](https://dev.wix.com/docs/velo/api-reference/wix-pricing-plans-frontend/custom-purchase-flow/navigate-to-checkout.md) function and pass the checkout options together with the ID of the plan to buy. The repeater displays plans on the page.
For example:
```js
$w("#repeater").onItemReady(($item, plan) => {
$item("#title").text = plan.name;
$item("#button").onClick(() => {
customPurchaseFlow.navigateToCheckout({
planId: plan._id,
...options.checkout,
});
});
});
$w('#repeater').data = plans;
```
Your custom page can now display the pricing plan’s data and direct site visitors to the next page in the flow.
## Test your code
To receive a populated page data object using `wixWindowFrontend.getAppPageData()` when [testing your code](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/testing-and-troubleshooting-your-code.md), do the following:
1. Create at least 1 pricing plan.
1. Publish a [test site](https://support.wix.com/en/article/about-test-sites).
1. Navigate to the Pricing Plans page in your test site.
1. Return to the editor.