Calling Paid Plan _id in a variable for repeater button

Ask the community
,
1

Hey Everyone, hope you can help…

I’ve created a repeater linked to a dataset following this tutorial ( https://support.wix.com/en/article/corvid-tutorial-using-the-paid-plans-api-to-customize-ordering-and-payment#step-2-set-up-the-collection-repeater-page ) and it’s been great to learn and dissect. I’ve had variants working well and ‘think’ I understand everything except two lines of code.

If I call directly the _id of my paid plan directly as “3e96ecca-11a5-4c42-9cc3-8ab8af9bbcd6” the button works well and the standard Paid Plans payment lightbox appears as expected… BUT when I try to call it dynamically through my dataset (with a field referencing the Paid Plan database) as per the code below, the button is now dead.

I’m sure it’s a simple fix, and I apologise if my language of communicating the issue is sloppy.
Any help much appreciated,
Darren

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

$w.onReady(function () {

    const currentPlanObject = $w("#dataset1").getCurrentItem();
    const planId = currentPlanObject._id;             
/* ^^ THESE TWO LINES DON'T WORK */
/*  const planId = "3e96ecca-11a5-4c42-9cc3-8ab8af9bbcd6"; 
   ^^ THIS LINE WORKS WELL WHEN REPLACING THE FAULTY ONES ABOVE */ 

    $w('#buyNow').onClick((event) => {
           
        wixPaidPlans.purchasePlan(planId)
            .then((myPurchase) => {
                   let myOrderId = myPurchase.orderId;
                   let myWixPayOrderId = myPurchase.wixPayOrderId;
                   let myWixPayStatus = myPurchase.wixPayStatus;
             });
    });
});
2

having spent more time reading/researching I’m convinced that I’m not calling the _id of the Paid Plan into my variable correctly… I feel so close, yet so far :neutral_face:

3

To answer my own question for anyone searching in future…

Fixes:

  1. added a dataset onReady function
  2. moved currentPlanObject and planId variables inside the onClick event
  3. The button recognises the correct repeater container with the addition of the $w.at() selector function
  4. .paidPlansField in a reference field that calls the Paid Plans collection into my custom database, #dataset1

Full code below.

import wixPay from ‘wix-pay’;
import wixPaidPlans from ‘wix-paid-plans’;

$w.onReady( function () {
$w(‘#dataset1’).onReady(() => {

$w(‘#buyPlan’).onClick((event) => {
let $item = $w.at(event.context);
let currentPlanObject = $item(‘#dataset1’).getCurrentItem();
let planId = currentPlanObject.paidPlansField.roleId;

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