building a custom paid plan section

Hi Everyone!
I would really appreciate if anyone could give me a hand here :slight_smile:
I’m on a very very tight deadline and there is no much I need to get done, so any pointers are really appreciated!!!

I’ve been trying to make this work:

https://support.wix.com/en/article/velo-tutorial-using-the-paid-plans-api-for-pricing-plan-ordering-and-payment

So far I’ve created beside content:

  • Two collections
    Planestestimonial - #dataset1
    tracking purchases - that corresponds to “PlanEvents” on the example //#tracking (write mode only)
  • button
    #comprar. not connected to anything

ISSUES
On click event on #comprar does not open any lightbox on preview, nor prompts user to log in…
On Click event on #comprar does not save any record on tracking purchases collection

Here is the code I’m using on the dynamic Item page:

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

$w.onReady( () => {

const currentPlanObject = $w( “#dataset1” ).getCurrentItem();
const planId = currentPlanObject._id;
const planPrice = currentPlanObject.price;

$w( ‘#comprar’ ).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);
})
}
}

*/
export function repeater1_itemReady($item, itemData, index) {

}

export function comprar_click(event) {

}

AS FOR THE JS PAGE:
export function multiply(factor1, factor2) {
return factor1 * factor2;
}

// For inserting data into a collection.
import wixData 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 (event.order.price.amount === 0 ) {
let orderData = {
“title” : “Free plan purchased” ,
“data” : event.order
};
wixData.insert( “Tracking purchases” , orderData);

} else {
let orderData = {
“title” : “Regular plan purchased” ,
“data” : event.order
};
wixData.insert( “Tracking purchases” , orderData);
}
}

Thanks!!!

Iz

Hey Iz,

I would need a link to your site, so I could be sure, but I think I see where your issue is.

You mentioned the issue is with the onClick() events on your #comprar element, I can see in your code that you have written out the onClick() event manually;

as well as exported from the properties panel;

Having both of these onClick() events will cause a conflict causing none of them to work.

I suggest deleted the onClick() event from the properties panel, and you should be good to go.

If you have already removed it, or you remove it, and you’re still having the issues please send a link to the site, so I can take a closer look.

Thanks!
Dara

Hi @darak
Thank you for your message.
I’ve already deleted the export function, and still doesn’t call any lightbox, nor tracks on the tracking plans.

Not sure how to share the url here as it is an under construction site (even thou its live), and the page is hidden.

Any pointers on how I can share my web with you will be appreciated.

Thanks

BTW, here is whats happening on the log. Maybe that has something to do with it…

@hola95401 Hey, no worries if the page is hidden. If you can send me the URL to the live site or even the URL to the Editor I can access it. You don’t have to worry about posting it here, only Wix employees can access the Editor.

ok. Great!
www.elruralnetwork.com/home

Hey Iz,

I had a look through the site there and found the cause.

The dynamic page isn’t set up properly, your dynamic dataset is connected to your custom collection “Planestestimonial” but if you are following the tutorial then the dynamic page should be connected to the “PaidPlans/Plans” collection from the Pricing Plans app.

If you create a new dynamic page connected to the correct collection you will be good to go.

Thanks a ton!!!
I’ll be working on it and let you know if I found any issues.

Thank you!!!

Hi @darak !!
So, here’s what Ive done.
Ive started from scratch :slight_smile:

Ive followed the instructions but got some confusion here:

  • A See More button in the repeater to display the selected plan using a dynamic page.
    When we created the dynamic page, we customized its URL .

I wouldn’t like to change the URL

Then:

  • Step 5: Customize your Dynamic Page
    Next we created a new page for displaying each selected plan.

Should I create a new menu page, or just use the paid plans dynamic page?

And finally:
On line 9 (Plan CoCreador)

$w.onReady(function () {

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


So not sure whats going on :frowning:
Can you give me a hand here?

Thank you!!!

I’ve also customized the item page for Plans (slug), but still the congrats or confirm button doesnt seem to work :frowning:

Hey Iz,

  1. This is just referring to setting up the URL for the dynamic page, like choosing which field from the collection will be in the URL, which you have already done, so you don’t need to worry about.

2.  The paid plans dynamic page is fine. 

3. I tried to reproduce this error on your site, but I can't. It works for me when I tested it. 

  1. I also noticed an issue on the “Collection and Repeater” page. You are using the field key planName from the tutorial in the code.

But your actual field key for this is set as nuevoCampo.

Change planName to nuevoCampo in the code here, so the link will work.

Thats great!!!
I could get the lightbox appear!

I have a question… why doesnt the EventsPlan (for tracking purchases), track purchases? Is this something we can only erform on the live site?
is there a way we can test our paying plans without having to actually purchase it?

Thank you!!!

Hey Iz,

Yeah, the plans you have to pay for won’t be tracked unless you actually complete the purchase.

Thanks @darak !

I understand that then there is no way to check the purchase process unless you actually make a real purchase?

I dont understand why on the dynamic page (plans/slug) I cant add any information from the testimonials collection. Any pointers?


as you can see, the paragraphs that are connected to that dataset don’t display any info.

and here it does:

No problem Iz!

Unfortunately, there is no way to test the purchase process without making an actual purchase. A way around this would be to add manual payments as an option that way you could complete a transaction without having to make an actual payment with your card.

I had a look at the page and noticed you haven’t set the filter on your testimonials dataset.

If you set a filter on it and filter it by the nuevoCampo field it’ll work.

I did yesterday!
Not sure whats going on… this has happened tons of times…
One day the settings are ok, and the next they have changed in the editor.
I know this can drive anyone nuts. Specially me!

I’ll get to check all connections (again).

Thank you!!!

So.
I’ve only set the filter, and now the buynow button isnt working…
i haven’t touched the code nor the btn connection

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);
    })
  }
}

Whats going on? :frowning:

It’s still working for me

:frowning:
it isnt for me

this is happening a lot… and its turning to be really confusing.

Hey I checked again and it worked for me for all plans except the “co-creador” one. I checked it on the live site and got this error


Looks like it’s just not popping up because we had both already signed up for this plan.

Is it the same for you? Does the button work on the other two plans? If so you’ll just have to add some extra logic to the code that will run if a user is already signed up for the plan.