This article describes how you can use the to customize how you offer to your site's visitors. We're going to explain how we set up a sample site and the code we added to make it work. Velo Paid Plans API pricing plans The Paid Plans API corresponds to the Pricing Plans app that you add to your site. The app uses the term "pricing plan" while some of the API parameters and properties are based on the term "paidPlan." Note. The customization in this sample includes: Working with dynamic pages and multiple collections. Customizing the order and payment flow by adding lightboxes. Responding to the event of a plan being purchased. Overview In our site we added the following: The Pricing Plans app. When adding the Pricing Plans app, a Plans collection with a list of membership plans for sale was automatically added. A collection for adding more details to each plan, such as testimonials and images. A collection for tracking purchases. A Collection & Repeater page. The repeater displays plans from the Testimonials collection, which references the Plans collection. Visitors can click a button for more details about a plan. See More A Dynamic page. This page displays information from both the Plans collection and the Testimonials collection.  Visitors can click a button to purchase a plan. Buy Now A lightbox that displays before processing with the purchase, and a different lightbox that displays after ordering a free plan. An event for logging successful purchases in a collection. Then we added code to do the following: When a visitor clicks the button, the button's click event handler calls the function to open the dynamic page. See More to() When a visitor clicks the button for a free plan, the button's click event handler calls the function to order the plan and opens a congratulations lightbox. Buy Now orderPlan() When a visitor clicks the button for a plan that costs money, the button's click event handler opens a confirmation lightbox. Buy Now When a visitor clicks , the button's event handler calls the function to order the plan. Yes orderPlan() The function checks if the user is logged in, and if not, prompts for login. When the user is logged in, the function creates, and returns, an object. orderResult A payment procedure is initiated using the ID from the object, causing a payment window to appear. orderResult The visitor enters payment information and completes the transaction. This triggers the event, which returns a object. onPlanPurchased PlanPurchasedEvent An event is logged in a collection. The event is based on the object. PlanPurchasedEvent Here is the Velo Sidebar with the resources we created for this example: This example demonstrates how, with Velo, we can the membership plan flow. We intentionally did not use the standard Plans & Pricing page that is automatically created when adding the Pricing Plans app. Note. customize Before You Start Before you start working with Wix pricing plans in code, make sure you do the following: on your site. We also recommend that you understand the before proceeding. Set up Wix Payments typical payment process to your site. Add the Pricing Plans app Step 1: Set up Collections For this example, we added the Pricing Plans app to set up this collection: A PaidPlans/Plans collection, for membership plans. We manually created these collections: A Testimonials collection, for each plan's testimonials and images. A PlanEvents collection, for logging each successful purchase. You may need to save/publish the site and refresh your browser to view collections in the section of the Velo Sidebar. Note. Databases The PaidPlans/Plans Collection Adding the Wix Pricing Plans app to your site automatically creates the PaidPlans/Plans collection. This collection contains the basic fields necessary to work with pricing plans, such as the plan title, its price, its duration, its benefits, and so on. The Plans collection is read-only. This is what some of the data in our Plans collection looks like. The plan title is saved in the field. Then, a field called is created with similar but unique values. We used the field to link to other collections. Name Slug Slug Additional Collections You can for additional plan details, such as testimonials and an image for each plan. create additional collections In our new Testimonials collection, we added a PlanName that references the field in our Plans collection. The reference field links the testimonials and plan images to the corresponding plan in the Plans collection. reference field Slug This is what some of the data in our Testimonials collection looks like: PlanEvents Collection We created a collection to track successful purchases. We added a text field called to the collection. Data We created code in an page to insert the live data from the PlanPurchasedResult object into the and fields. events.js Title Data This is what some of the live data in our PlanEvents collection looks like, after we have made a few purchases. Step 2: Set up the Collection & Repeater Page We created a new page for displaying all the plans in our collection with a repeater. Design the Page On the Collection & Repeater page, we added: A repeater to display the plans. Text and image elements in the repeater to display the name, price, and picture of each plan. A button in the repeater to display the selected plan using a dynamic page. When we created the dynamic page, we . See More customized its URL A dataset connected to our Testimonials collection for connecting data in the collection to the repeater. Because the Testimonials collection has a reference field to our PaidPlans/Plans collection, all the data we need is accessible with this one dataset. When you , you must first connect the repeater to the dataset, and then connect each element in the repeater to the dataset. Note. display data from a collection in a repeater Add Event Handlers In the of the repeater, we added an that will run when the repeater is ready to be loaded. Properties & Events panel onItemReady event handler In the of the button1 element, we added an that will run when the button is clicked. Properties & Events panel See More onClick event handler Code the Page We added the following code to let the visitor select and view a specific plan. wixLocation ;


$w.onReady( { $w( ).onClick( { item = $w( ).getCurrentItem(); slug = item.planName.slug; wixLocation.to( +slug);
  
 })

}) // For navigating to a dynamic page: import from 'wix-location' ( ) function // If the site visitor clicks a plan's See More button, // the browser relocates to that plan's dynamic page. "#button1" ( ) => event, $w let "#dataset1" let // We customized the URL for the plan's page // when we made it dynamic. '/gamePlans/' Step 3: Customize the Purchase of a Plan To demonstrate that we can customize the flow of a paid plan purchase, we will use the function instead of the function. orderPlan() purchasePlan() With , we can control and customize aspects of the order process. orderPlan() With , we use the standard paid plan functionality as provided with the Wix Paid Plans app. The function provides a standard payment flow that starts with ordering and automatically continues to payment. This gives you less opportunity to customize, but requires less coding and design. purchasePlan() purchasePlan() As part of our customization, we added two lightboxes to our site (to be used in Step 5). The lightbox displays information about the currently-selected plan, and provides buttons for continuing or canceling the purchase. Confirm The lightbox lets you know that you purchased a free plan. Congrats In this step, we kept it simple.  However, this is the opportunity for you to really customize the process as you like. Step 4: Set up an Event Handler in the Backend to Log Purchases When a plan is successfully purchased or ordered, an event is triggered. onPlanPurchased In our example, when this event is fired, we log the details about the purchase by inserting the information in our collection. PlanEvents Here is sample backend code that we put in an file. events.js wixData ; { (event.order.price.amount === ) { orderData = { : , : event.order
  };
  wixData.insert( , orderData);

 } { orderData = { : , : event.order
  };
  wixData.insert( , orderData);
 }
} /*****************************
 * Backend code in events.js *
 *****************************/ // For inserting data into a collection. import from 'wix-data' // The onPlanPurchased() event is fired when a plan // is purchased, or a free plan is ordered. // Get the order information // from the event's order object. export ( ) function wixPaidPlans_onPlanPurchased event // The PlanEvents collection has a title field, // in which we insert the type of transaction. // The collection also has a data field, // where we will insert information about the order // from the event's order object (json). if 0 let "title" "Free plan purchased" "data" "PlanEvents" else let "title" "Regular plan purchased" "data" "PlanEvents" Step 5: Customize your Dynamic Page Next we created a new page for displaying each selected plan. Design the Page On this page, we added: Text and image elements to display the details of each plan from the PaidPlans/Plans collection and the Testimonials collection. Two datasets, one for each collection. The Testimonials collection is by planName so that any data displayed from the Testimonials collection matches the currently-displayed plan from the Plans collection. filtered A button to order the plan. Buy Now Add Event Handlers In the Properties & Events panel of the repeater, we added an event handler that will run when the repeater is ready to be loaded. onItemReady In the Properties & Events panel of the button, we added an event handler that will run when the button is clicked. buyNow onClick Buy Now Code the Page The code on our dynamic page consists of five parts: Imports for the used in the rest of the code. APIs An event handler for making sure all page elements are available. onReady() Retrieval of the current plan's data from the Plans collection in a object. currentPlanObject Check if the visitor is logged in. If necessary, the site prompts the visitor to log in. A function for processing the order of free plans and the purchase of plans that cost money. Let's take a look at the code one piece at a time.  At the end of this article, you can see the code in its entirety. The Imports We used the following APIs: - For getting information about the current user and for logging users in and out. wix-users - For lightboxes. wix-window - For ordering and purchasing pricing plans. wix-paid-plans - For processing payments. wix-pay So our importing code looks like this: wixWindow ; wixPay ; wixPaidPlans ; wixUsers ; import from 'wix-window' import from 'wix-pay' import from 'wix-paid-plans' import from 'wix-users' onReady() Event Handler In this example, there is no special setup we need to do for our elements. So we used the standard event handler. onReady() $w.onReady( {
  ...
  ... ...
  ...
} ); => () //Insert code here. getCurrentItem() Function Next, we retrieved the current plan's data from the PaidPlans\Plans collection using the Wix Dataset function with the dynamic dataset on the page. We stored the information in a object variable. Now we have access to the information we need about the plan to continue processing the order or purchase. getCurrentItem currentPlanObject If you copy the code snippet below, make sure to change the dataset name to match your own. $w.onReady( {
  ...
  ...
  
  const currentPlanObject = $w( ).getCurrentItem(); planId = currentPlanObject._id; planPrice = currentPlanObject.price;
  ...
  ... ...
  ...
} ); => () "#dynamicDataset" const const //Insert more code here. onClick() Event Handler Most of the logic in our page is contained in the event handler of the button. onClick() buyNow If you copy the code snippet below, make sure to change the button name to match your own. $w.onReady( {
  ...
  ...
  
  const currentPlanObject = $w( ).getCurrentItem(); planId = currentPlanObject._id; planPrice = currentPlanObject.price;
  ...
  ...
  $w( ).onClick( {

    ... ...
    
  });
  ...
  ... ...
  ...
} ); => () "#dynamicDataset" const const '#buyNow' ( ) => event //Insert code for handling the button click here. //Insert more code here. Check if Logged In We don't want to sell plans to users that are not logged in. So we used the and the property to see if the user is logged in. wixUsers.currentUser loggedIn If the user is not logged in, we used function to ask the user to log in. Then we can call a function that we named to continue. wixUsers.promptLogin() processPlan() If the user is already logged in, we can immediately call the function. processPlan() $w.onReady( { currentPlanObject = $w( ).getCurrentItem(); planId = currentPlanObject._id; planPrice = currentPlanObject.price;

  $w( ).onClick( { user = wixUsers.currentUser; isLoggedIn = user.loggedIn; (!isLoggedIn) {
      wixUsers.promptLogin().then( {
          processPlan(planId, planPrice);
        })
    } {
        processPlan(planId, planPrice);
    }   
  });
}); => () const "#dynamicDataset" const const '#buyNow' ( ) => event let let if => () else Process the Order Now let's look at the function we created, , to get payment for the plan. processPlan() We chose to use the function for processing because we wanted to control and customize the entire order/purchase flow. When is called, and a plan is successfully purchased or ordered, an event is triggered. orderPlan() orderPlan() onPlanPurchased This is where you can enter your own code to customize your own order/purchase flow. In our example, we customized the flow by: If the plan costs money, asking for user confirmation using the Confirm  lightbox. If the user confirms, we call and then process payment with the Wix Pay function. orderPlan() startPayment If the plan is free, using the lightbox to let the user know the plan order is successful. Congrats The order details are contained in the object. orderObject When copying this snippet, make sure to change the names of your lightboxes to match your own. { (myPrice > ) {
    wixPaidPlans.orderPlan(myId).then( {
      wixWindow.openLightbox( , orderObject)
       .then( { (goForIt) {
         wixPay.startPayment(orderObject.wixPayOrderId);
       }
      });
    })
  } {
    wixPaidPlans.orderPlan(myId).then( {
      wixWindow.openLightbox( , orderObject);
    })
  }
} ( ) function processPlan myId, myPrice if 0 => orderObject "Confirm" ( ) => goForIt if else => orderObject "Congrats" All the Code The code in its entirety looks like this: wixWindow ; wixPay ; wixPaidPlans ; wixUsers ;

$w.onReady( { currentPlanObject = $w( ).getCurrentItem(); planId = currentPlanObject._id; planPrice = currentPlanObject.price;

  $w( ).onClick( { user = wixUsers.currentUser; isLoggedIn = user.loggedIn; (!isLoggedIn) {
      wixUsers.promptLogin().then( {
        processPlan(planId, planPrice);
      })
    } {
      processPlan(planId, planPrice);
    }
 });
}); { (myPrice > ) {
    wixPaidPlans.orderPlan(myId).then( {
      wixWindow.openLightbox( , orderObject)
       .then( { (goForIt) {
         wixPay.startPayment(orderObject.wixPayOrderId);
       }
      });
    })
  } {
    wixPaidPlans.orderPlan(myId).then( {
      wixWindow.openLightbox( , orderObject);
    })
  }
} import from 'wix-window' import from 'wix-pay' import from 'wix-paid-plans' import from 'wix-users' ( ) function const "#dynamicDataset" const const '#buyNow' ( ) => event let let if => () else ( ) function processPlan myId, myPrice if 0 => orderObject "Confirm" ( ) => goForIt if else => orderObject "Congrats" : Want to use the standard, "out of the box" Wix flow for letting visitors purchase a plan? Tip Use the the function in the code instead of the function. purchasePlan() orderPlan() No need to call . The function does that for you. wixPay purchasePlan() API List The following APIs are used in the code in this article. To learn more, see the . API Reference - For ordering and purchasing pricing plans. - For payments. wix-paid-plans wix-pay - Gets information about the current user and for logging users in and out. wix-users - For inserting into collections. wix-data - For navigation. wix-location Previously published at https://support.wix.com/en/article/velo-tutorial-using-the-paid-plans-api-for-pricing-plan-ordering-and-payment

Flow

How To Work with External Database

Velo How-To: API Aggregations

Develop Smarter, Deliver Faster

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How To Use the Paid Plans API for Pricing Plan Ordering

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The API fetch Module as the Way to Accessing 3rd-Party Services

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

The API fetch Module as the Way to Accessing 3rd-Party Services

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps