wix Plans with lightbox to confirm

Ask the community
,
1

Hi everyone,
I read the pay plans API and found this tutorial.

https://www.wix.com/corvid/reference/wix-paid-plans.html
https://support.wix.com/en/article/corvid-tutorial-using-the-paid-plans-api-to-customize-ordering-and-payment

I decide to use the standard Wix plans, but I would like that before the user pays the plan it can choose to confirm it or not in a lightbox. I tried to write the code below, but it opens the payment first and then the window. Please, can you tell me where I’m wrong?

Thanks in advance

export function BJunior_click(event) { // button to choose a specifica plan
let planjunior = ‘377355e9-a21b-47d8-bd6f-34ec22f21439’ . //assign plan
wixPaidPlans.purchasePlan(planjunior).then(myOrder => { //the specific plan is to pay
wixWindow.openLightbox(“PlanPay”, myOrder) . //open lightbox with two button
.then((myPurchase) => {
if (myPurchase) {
let myOrderId = myPurchase.orderId; //open box to pay
let myWixPayOrderId = myPurchase.wixPayOrderId;
let myWixPayStatus = myPurchase.wixPayStatus;
}
});
})

}

2

If you have followed the tutorial precisely, then in theory the code should have been added so that this happens.

  1. When a visitor clicks the Buy Now button for a free plan, the button’s click event handler calls the orderPlan() function to order the plan and opens a congratulations lightbox.

  2. When a visitor clicks the Buy Now button for a plan that costs money, the button’s click event handler opens a confirmation lightbox.

  3. When a visitor clicks Yes , the button’s event handler calls the orderPlan() function to order the plan.

Also, before you started the tutorial, did you save and publish your website so that Wix Plans could be fully setup with your site?
You may need to save/publish the site and refresh your browser to view collections in the Database section of the Site Structure sidebar.

Exactly the same with the API reference page too.

Note

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

3

So, further reading the tutorial itself, then note that you are using the purchasePlan function in your code posted above, so you are limited to what you can do.
The purchasePlan() function provides a standard payment flow that starts with ordering and automatically continues to payment.

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 orderPlan() function instead of the purchasePlan() function.

  • With orderPlan(), we can control and customize aspects of the order process.

  • With purchasePlan(), we use the standard paid plan functionality as provided with the Wix Paid Plans app. The purchasePlan() 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.
    As part of our customization, we added two lightboxes to our site (to be used in Step 5).

  • The Confirm lightbox displays information about the currently-selected plan, and provides buttons for continuing or canceling the purchase.

  • The Congrats lightbox lets you know that you purchased a free plan.
    In this step, we kept it simple. However, this is the opportunity for you to really customize the process as you like.

4

Finally read the Tip part at the end of the tutorial as use purchasePlan and you don’t use a lightbox as it does it all for you.

Tip : Want to use the standard, “out of the box” Wix flow for letting visitors purchase a plan?

  • Use the the Wix Paid Plans purchasePlan() function in the code instead of the orderPlan() function.

  • No need to call wixPay. The purchasePlan() function does that for you.

I do suggest that if you want to just use Wix Paid Plans and not use the tutorial that was supplied, then you make sure that you fully read and understand the Wix API reference for purchasePlan itself.
https://www.wix.com/corvid/reference/wix-paid-plans.html#purchasePlan

import wixPaidPlans from 'wix-paid-plans';
import wixPay from 'wix-paid-plans';

let planId = // Get the plan ID for a non-free plan

export function myPurchaseButton_click(event) {
  wixPaidPlans.purchasePlan(planId)
    .then( (myPurchase) => {
        let myOrderId = myPurchase.orderId;
        let myWixPayOrderId = myPurchase.wixPayOrderId;
        let myWixPayStatus = myPurchase.wixPayStatus;
    } );
  }


/* myPurchase:
 * {
 *  "orderId": \"b3fb3a4d-c223-4040-8bc3-8dfdefb1bafc\",
 *  "wixPayOrderId": \"06af8fd6-6c82-4b51-bc08-0b556aad6f4f\",
 *  "wixPayStatus": \"Successful"
 * }
 */
5

Hello, @givemeawhisky
you were very clear and I managed to narrow down my problem.
In my case I only have paid plans and the button already identifies the plan (as you can see from the code below). Now I used the function (orderPlan) as suggested, because I want to manage the lightbox before.
But I think that in the tutorial it is not clear the event on the two buttons “pay” or “cancel” in the lightbox.
It seems to me lacking the part that closes the window in one case without completing the subscription and in the other sending to (startPayment)

Can you please check the tutorial on this part and my code?

Many thanks

Tutorial
wixPaidPlans.orderPlan(myId).then(orderObject => {
wixWindow.openLightbox(“Confirm”, orderObject)
.then((goForIt) => {
if (goForIt) {
wixPay.startPayment(orderObject.wixPayOrderId);
}
});

Mycode
export function button3_click(event) {
let myId = ‘377355e9-a21b-47d8-bd6f-34ec22f21439’
wixPaidPlans.orderPlan(myId).then(orderObject => {
wixWindow.openLightbox(“PlanPay”, orderObject) // my lightbox
.then((goForIt) => { // where is the event dell or buy ???
if (goForIt) {
wixPay.startPayment(orderObject.wixPayOrderId);
}
});
})
}

6

You don’t need to change much in this tutorial, so you have changed it too much.

If you go carefully down through step 5 it will show and explain to you how to add the code and what to change etc.

If anything needs to be changed in the code, it will be mentioned in the tutorial that it needs to be changed.

As for the pay or cancel part of the lightbox, then don’t worry as that is all contained within the code already.

If you look at it you can work out what is what with the open lightbox command and the then if go for it, then it starts the Wix Pay start payment function etc, etc.

It does work and runs correct, it just doesn’t look right if you don’t understand it completely.

As part of our customization, we added two lightboxes to our site (to be used in Step 5).

  • The Confirm lightbox displays information about the currently-selected plan, and provides buttons for continuing or canceling the purchase.

  • The Congrats lightbox lets you know that you purchased a free plan.
    In this step, we kept it simple. However, this is the opportunity for you to really customize the process as you like.

So just make sure that you have the two buttons setup on your are you ready lightbox with the confirm one called goForIt.

The Not Yet button you simply utilize the close button of the lightbox itself and change the design of it to whatever design you have for the confirm button so that they match. Then if they choose Not Yet then the lightbox is just closed and they don’t proceed any further with the plan purchase.

Plus, take off the lightboxes ‘X’ close button too as you only need the yes or no buttons on the lightbox.

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 orderPlan() and then process payment with the Wix Pay startPayment function.

  • If the plan is free, using the Congrats lightbox to let the user know the plan order is successful.
    The order details are contained in the orderObject object.
    When copying this snippet, make sure to change the names of your lightboxes to match your own.

function processPlan(myId, myPrice) {
if (myPrice > 0) {
wixPaidPlans.orderPlan(myId).then(orderObject => {
wixWindow.openLightbox("Confirm", orderObject)
.then((goForIt) => {
if (goForIt) {
wixPay.startPayment(orderObject.wixPayOrderId);
}
});
})
} else {
wixPaidPlans.orderPlan(myId).then(orderObject => {
wixWindow.openLightbox("Congrats", orderObject);
})
}
}

Finally just remember that this tutorial has parts of it in the backend, so it won’t work properly when previewing your site.

Hopefully that all makes sense to you.

7

Hello @givemeawhisky ! I’ve followed the tutorial to the letter AND the only steps I took that were not included in the tutorial were those steps that were necessary to follow the suggestions you shared in your super helpful comments here. Those suggestions both involved the Confirm lightbox: I changed the id of my Yes button to #goForIt and I disabled the ‘X’ close the lightbox and enabled the ‘Close Lightbox’ button.

Unfortunately, the #goForIt button is not working as nothing happens when the user clicks “Yes” to confirm that they’re ready to pay. The lightbox pages do not currently contain any code or database connections. Could you take a look at the code on my dynamic page and help me figure out what’s wrong?

import wixWindow from 'wix-window';
import wixPay from 'wix-pay';
import wixPaidPlans from 'wix-paid-plans';
import wixUsers from 'wix-users';

$w.onReady(function () {

 const currentPlanObject = $w("#dynamicDataset").getCurrentItem();
 const planId = currentPlanObject._id;
 const planPrice = currentPlanObject.price;

  $w('#buyNow').onClick((event) => {

 let user = wixUsers.currentUser;
 let isLoggedIn = user.loggedIn;
 if (!isLoggedIn) {
      wixUsers.promptLogin().then(() => {
        processPlan(planId, planPrice);
      })
    } else {
      processPlan(planId, planPrice);
    }
 });
});

function processPlan(myId, myPrice) {

 if (myPrice > 0) {
    wixPaidPlans.orderPlan(myId).then(orderObject => {
      wixWindow.openLightbox("Confirm", orderObject)
       .then((goForIt) => {
 if (goForIt) {
         wixPay.startPayment(orderObject.wixPayOrderId);
       }
      });
    })
  } else {
    wixPaidPlans.orderPlan(myId).then(orderObject => {
      wixWindow.openLightbox("Congrats", orderObject);
    })
  }
}