> 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: wix-pricing-plans-frontend



## Article: Introduction

## Article Link: https://dev.wix.com/docs/velo/apis/wix-pricing-plans-frontend/introduction.md

## Article Content:

# Introduction
Using the Pricing Plans API, you can build a customized membership plan experience.


 ### Set up pricing plans

 First, set up a site to:

 * Accept payments as described in [About Accepting Payments](https://support.wix.com/en/article/about-accepting-payments).

 * Offer membership plans as described in [About Pricing Plans](https://support.wix.com/en/article/about-pricing-plans).
   When setting up a site to accept pricing plans, define the plans you want to offer with either
   [the Pricing Plans app](https://support.wix.com/en/article/creating-a-plan-in-pricing-plans) or the Pricing Plans APIs ([Velo](https://dev.wix.com/docs/velo/apis/wix-pricing-plans-backend/introduction.md) | [SDK](https://dev.wix.com/docs/sdk/backend-modules/pricing-plans/introduction.md)).


 When plans are set up, you can use the API to:
 + Get information about pricing plans.
 + Let site members order a plan directly, as if they were using the Pricing Plans app.
 + Let site members order a plan using your own customized process.
 + Let site members cancel orders that they have purchased.




There are 2 flows for setting up pricing plans: Direct purchases and customized purchases.


> **Note:** To work with the Pricing Plans API, a site needs to be published.



 ### Direct order of a pricing plan

 Direct ordering mirrors the ordering of a plan using the Pricing Plans app.
 For standard pricing plan processing, call `startOnlinePurchase()` ([SDK](https://dev.wix.com/docs/sdk/frontend-modules/pricing-plans/checkout/start-online-purchase.md) | [Velo](https://dev.wix.com/docs/velo/apis/wix-pricing-plans-frontend/checkout/start-online-purchase.md)).



 The following outlines the steps in a direct order lifecycle:

 1. Get and display a list of membership plans from one of the following:
    * A dataset connected to the Plans collection.
    * A query on the Plans collection.
 1. A *logged-in* site member selects a membership plan by clicking the plan or a button. If the member is not logged in, the
    sign up page is automatically displayed.
 1. The corresponding event handler calls `startOnlinePurchase()` ([SDK](https://dev.wix.com/docs/sdk/frontend-modules/pricing-plans/checkout/start-online-purchase.md) | [Velo](https://dev.wix.com/docs/velo/apis/wix-pricing-plans-frontend/checkout/start-online-purchase.md)) to handle all stages of buying the plan (selecting, ordering, and payment):
    * If the plan is free, the plan is immediately ordered and is considered paid for. The `wixPayStatus` is `Successful`.
    * If the plan is not free, the plan is ordered but not yet paid for and the `wixPayStatus` is `Pending` and the order's `status` is `DRAFT`. The site member fills in contact
      details and selects a payment method. Once payment is completed, the `wixPayStatus` is `Successful` and the order's `status` is `ACTIVE`.
 1. Handle additional updates when a plan is successfully purchased using
    `onOrderPurchased()` ([SDK](https://dev.wix.com/docs/sdk/backend-modules/pricing-plans/orders/on-order-purchased.md) | [Velo](https://dev.wix.com/docs/velo/events-service-plugins/pricing-plans/events/on-order-purchased.md)).




 ### Customized pricing plan purchases

 This flow lets buyers (logged-in site members) order and pay for a plan
 using a customized flow.
 You customize the entire process of selecting, requesting, and
 paying for a plan. You can add elements, such as confirmation lightboxes and forms, to customize the buyer's experience.


 To let the buyer order a plan, call `createOnlineOrder()` ([SDK](https://dev.wix.com/docs/sdk/frontend-modules/pricing-plans/checkout/create-online-order.md) | [Velo](https://dev.wix.com/docs/velo/apis/wix-pricing-plans-v2/orders/create-online-order.md)).


 The following outlines the steps for customizing the pricing plan purchase:

 1. Get and display a list of membership plans from one of the following:
    * A dataset connected to the Plans collection.
    * A query on the Plans collection.
 1. A *logged-in* site member selects a membership plan by clicking the plan or a button. If the member is not logged in, the
    signup page is automatically displayed.
 1. The corresponding event handler calls `createOnlineOrder()` ([SDK](https://dev.wix.com/docs/sdk/frontend-modules/pricing-plans/checkout/create-online-order.md) | [Velo](https://dev.wix.com/docs/velo/apis/wix-pricing-plans-v2/orders/create-online-order.md)) to handle the initial order of the plan.
 1. The site member uses a series of customized elements you created, such as lightboxes, and forms, to continue ordering/purchasing.
 1. The site member uses [Wix Pay](https://www.wix.com/velo/reference/wix-pay-frontend) to complete the purchase.
 1. Handle additional updates when a plan is successfully purchased using
    `onOrderPurchased()` ([SDK](https://dev.wix.com/docs/sdk/backend-modules/pricing-plans/orders/on-order-purchased.md) | [Velo](https://dev.wix.com/docs/velo/events-service-plugins/pricing-plans/events/on-order-purchased.md)).


### Import pricing plan modules

 For ordering pricing plans, import `wixPricingPlansFrontend` from the `wix-pricing-plans-frontend` module.



   ```javascript
   import wixPricingPlansFrontend from 'wix-pricing-plans-frontend';
   ```