How to get the planId within a Repeater to make Plan Subcriptions

Ask the community
,
1

Dear Velo-Community,

I am currently working with a Repeater that creates items which refer to Plans which can be purchased. I am working with the code provided by Wix to initiate the standard purchasing process for a free plan.

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

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

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

from: purchasePlan - Velo API Reference - Wix.com

I am struggling on how to set the planId here in the code. As i said i am working with a Repeater where you can click on a “Buy”-button on each element (every element represents another plan) to initiate the purchasing process.

893×595 414 KB

Thanks in advance for your help!

2

Hi there @acteevent :raised_hand_with_fingers_splayed:

The best way to do it is to query the plans collection, and populate the repeater, then when clicking on buy now, initiate the payment with the plan ID.

To do so, we need to create or use a backend module to extract the plans since they’re admin-only content.

// Backend web module: plans.jsw
import wixData from 'wix-data';

export function getPlans() {
    return wixData.query('Plans').find({suppressAuth: true}).then((x) => {
        return x.items;
    })
}

Now on the page where you have the repeater.

import { getPlans } from 'backend/plans.jsw';
import wixPay from 'wix-paid-plans';
import wixPaidPlans from 'wix-paid-plans';

$w.onReady(async() => {
    $w('#repeater').onItemReady(($plan, plan) => {
        // Populate the fields
        $plan('#planName').text = plan.name;
        $plan('#planTagline').text = plan.tagline;
        $plan('#planPrice').text = plan.price.toLocaleString();
        
        // prepare the payment button
        $plan('#buyNow').onClick(() => {
            wixPaidPlans.purchasePlan(plan._id);            
        })
    })
    
    await getPlans().then((plans) => {
        $w('#repeater').data = plans;
    })
})

Hope this helps~!
Happy Coding :fire:
Ahmad

3

Thank you for your reply!
In a sense, your code would be the option to the standard payment process as code i think?
I forgot to mention that i have additonal information for my plans saved in a second database (concerning further infos, pictures etc). I connected the Repeater to my second database so that i can add additional information in the elements.
I edited the code but it didnt work and i also didnt get an error message. Can i do this process without linking it directly to the Plans database?

4

@acteevent Either ways, you need a backend module to get the plans.
I suggest that you use the same backend module to get the plans details from your custom collection and combine their data, then return them to the front end and populate your repeater accordingly.

5

@ahmadnasriya Okay. How do i “combine” them exactly? By putting the information into the custom database?