Search.../

orderPlan( )

Orders a pricing plan.

Description

To process pricing plans on your site, first set up your site to offer pricing plans as described in About Pricing Plans. When setting up your site to accept pricing plans, define the plans you want to offer.

The orderPlan() function returns a Promise that resolves to an OrderResult object when the visitor completes the order process. Use this result only for display purposes.

Ordering a plan places an order for the plan, without actually purchasing it. You can then continue the payment process with the Wix Pay payment method, which applies the plan to the visitor on completion of payment.

To understand how orderPlan() is used in a customized pricing plan lifecycle, see Customized Pricing Plan Purchases.

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

Syntax

function orderPlan(planId: string): Promise<OrderResult>

orderPlan Parameters

NAME
TYPE
DESCRIPTION
planId

string

The plan ID.

Returns

Fulfilled - The created order. Rejected - Error message.

Return Type:

Promise<OrderResult>

Was this helpful?

Order a pricing plan

Code Example

Copy Code
1import wixPaidPlans from 'wix-paid-plans';
2
3let planId = // Get the plan ID
4
5export function myOrderButton_click(event) {
6 wixPaidPlans.orderPlan(planId)
7 .then( (myOrder) => {
8 let myOrderId = myOrder.orderId;
9 let myWixPayOrderId = myOrder.wixPayOrderId;
10 } );
11 }
12
13
14/* myOrder:
15 * {
16 * "orderId": \"b3fb3a4d-c223-4040-8bc3-8dfdefb1bafc\",
17 * "wixPayOrderId": \"06af8fd6-6c82-4b51-bc08-0b556aad6f4f\"
18 * }
19 */
A full order plan scenario

This example demonstrates a customized pricing plans scenario. The customized elements include:

  • An intermediary page that displays all plans before ordering
  • A lightbox

In the interest of simplicity the code does not deal with display considerations or validations that would normally be required to make sure users perform the flow as intended.

The code assumes 2 pages:

  • The plan viewer page lists the plans and lets the visitor pick one.

  • A dynamic page shows one plan's details and lets the visitor order the plan.

The plan viewer page has the following elements:

  • planDataset: Connects the page to the Plans collection.
  • planRepeater: Displays fields for each plan.
  • viewButton: Displays the ordering page for the selected plan.

The dynamic page has the following elements:

  • dynamicDataset: Connects the page to the Plans collection.
  • planName: Text element that displays the plan's name.
  • planDescription: Text element that displays the plan's tagline.
  • orderPlanButton: Performs a request to order the plan.
  • orderCreated: A customized lightbox. The lightbox could, for example, display plan details and ask for additional confirmation.

Code Example

Copy Code
1/****************************************
2* Code on a plan viewer page
3*****************************************/
4// For navigating to a dynamic page:
5import wixLocation from 'wix-location';
6// If the site visitor clicks a plan's button,
7// the browser relocates to that plan's dynamic page,
8// with more details.
9$w.onReady(function () {
10 $w("#viewButton").onClick( (event, $w) => {
11 let slug = $w("#planDataset").getCurrentItem().slug;
12
13 // We customized the URL to the plan's dynamic
14 // page when we created it.
15 wixLocation.to('/my-plans/'+ slug)
16 }));
17});
18
19
20
21/****************************************
22* Code on a plan ordering dynamic page
23*****************************************/
24// For a lightbox:
25import wixWindow from 'wix-window';
26// For Wix Pay, but any payment method is OK:
27import wixPay from 'wix-pay';
28// For pricing plans
29import paidPlans from 'wix-paid-plans';
30
31
32$w.onReady(function () {
33
34 // When the collection is accessible...
35 $w("#dynamicDataset").onReady( () => {
36
37 // Assign the currently-selected plan to currentPlanObject
38 const currentPlanObject = $w("#dynamicDataset").getCurrentItem();
39
40 // Display details about the current plan
41 $w("#planName").text = currentPlanObject.name;
42 $w("#planDescription").text = currentPlanObject.description;
43
44 // Assign the currently-selected plan's ID to planId. This
45 // unique identifier will be used for ordering the plan.
46 const planId = currentPlanObject._id;
47
48
49 // Order the plan by button click
50 $w("orderPlanButton").onClick( (event) => {
51
52 // Provide the plan's ID to the
53 // orderPlan() function. The function returns
54 // an object containing the plan's properties.
55 const order = paidPlans.orderPlan(planId).then(ord => {
56
57 const planWithOrder = {
58 plan: currentPlanObject,
59 order: ord
60 };
61
62 // Use a customized lightbox to continue processing the order.
63 wixWindow.openLightbox("orderCreated", planWithOrder)
64 .then( (data) => {
65 const receivedData = data;
66 });
67
68 });
69 });
70 });
71});
72