Introduction

Setting Up Pricing Plans

First, set up your site to:

• Accept payments as described in About Accepting Payments.

• Offer membership plans as described in About Pricing Plans. When setting up your site to accept pricing plans, define the plans you want to offer with either the Pricing Plans app or the Pricing Plans APIs.

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 two flows for setting up pricing plans: Direct purchases and customized purchases.

Note: To work with the Pricing Plans API, you need to publish your site.

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 the startOnlinePurchase() function.

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.
2. 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.
3. The corresponding event handler calls the startOnlinePurchase() function 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.
4. Handle additional updates when a plan is successfully purchased using the onPlanPurchased() event.

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 the createOnlineOrder() function.

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.
2. 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.
3. The corresponding event handler calls the createOnlineOrder() function to handle the initial order of the plan.
4. The site member uses a series of customized elements you created, such as lightboxes, and forms, to continue ordering/purchasing.
5. The site member uses Wix Pay to complete the purchase.
6. Handle additional updates when a plan is successfully purchased using the onOrderPurchased() event.

Importing Pricing Plan Modules

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

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