Hey everyone!
I’m trying to control the visibility of download buttons based on whether a user has an active subscription to my Wix Pricing Plans. The goal is to hide the buttons from non-subscribers and show them to subscribers.
I’ve implemented a backend function (backend/pricingPlans.web.js) that checks a user’s subscription status using the wix-pricing-plans-backend API. This function seems to be working correctly (I’ve added extensive logging).
The problem is on the frontend (page code). I’m getting a TypeError: Cannot read properties of undefined (reading 'getSubscriptionStatus') error, which indicates that the frontend is unable to correctly access or import the getSubscriptionStatus function from the backend module.
Here’s what I’ve tried so far:
- Checked and double-checked the import path (e.g.,
import { getSubscriptionStatus } from 'backend/pricingPlans.web';)
- Verified the function name spelling and capitalization in both frontend and backend.
- Ensured the backend function is correctly exported.
- Used dynamic imports with cache-busting to try to force Wix to load the latest backend module version.
- Tried various ways of accessing the imported function (e.g., destructuring,
backendModule.default.getSubscriptionStatus).
- Removed any potential conflicts by simplifying the page and the code.
- Made sure there are no conflicting imports in
masterPage.js.
- Cleared browser cache and cookies.
Despite all these efforts, the TypeError persists. I’m starting to suspect there might be some underlying issue with how Wix is handling backend module loading or scope.
Has anyone encountered similar issues with Velo and backend modules, especially with dynamic imports or function access? Any suggestions for further troubleshooting or alternative approaches would be greatly appreciated! I can provide code snippets and console output if needed.
Also, I’m using Wix editor, not Wix studio editor.
Thanks in advance for any help!
I’ve used
import { authentication, currentMember } from 'wix-members-frontend';
import { orders } from 'wix-pricing-plans-frontend';
1 Like
I’ve applied your technique, thanks for sharing!
I’ve now encountered another issue in that I’m logging into my site with a subscribed user, however when I check the code, it says the user isn’t subscribed. Could I be writing the code incorrectly?
What is the code that you have used?
It’s difficult to predict what could possibly be causing that error without taking a look at the actual code.
And as Dan highlighted above, there is no need to use any backend function as you are simply querying the pricing plans for the logged in user and not anyone else.
Try out this code which works entirely in the frontend:
import { authentication, currentMember } from 'wix-members-frontend';
import { orders } from 'wix-pricing-plans-frontend';
$w.onReady(async () => {
// Check if member is logged in.
console.log("Checking member's login status...");
const isLoggedIn = authentication.loggedIn();
if (isLoggedIn) {
const loggedInMember = await currentMember.getMember();
console.log("Member is logged in: " + loggedInMember.loginEmail + ". Fetching subscription status...");
let planStatus = await getsubstatus();
if (planStatus == "ACTIVE") {
// User has one or more active subscriptions.
// SHOW YOUR DOWNLOAD BUTTON;
} else {
// No active subscription.
// HIDE YOUR DOWNLOAD BUTTON;
}
} else {
// Handle when member isn't logged in
console.log("Member is not logged in. Cannot fetch subscriptions if not logged in.");
// HIDE YOUR DOWNLOAD BUTTON;
}
});
async function getsubstatus() {
try {
const ordersList = await orders.listCurrentMemberOrders();
let activeOrdersArray = [];
console.log("Fetched orders:", ordersList);
if (ordersList.length === 0) {
console.log("No pricing plans ordered.");
return "NA";
}
ordersList.forEach(item => {
if (item.status === "ACTIVE") {
activeOrdersArray.push(item);
}
});
if (activeOrdersArray.length === 0) {
console.log("No currently ACTIVE plans for this user.");
return "NA";
} else {
console.log("User has ACTIVE plan(s):", activeOrdersArray);
return "ACTIVE";
}
} catch (error) {
console.error("Error fetching member orders:", error);
return "NA";
}
}
1 Like
Thanks for the code. I plugged it into my site and tested it with an account that I just did a subscription with and it’s still coming back as the user hasn’t purchased a pricing plan and no active subscription…which I know is false.
I really don’t know what I’m doing wrong.
ahhhh, I finally got it working! I had to change part of the code to this:
let planStatus = await getsubstatus(subscribedPlanIds);
I don’t see how passing subscribedPlanIds solved the issue as getsubstatus() does not take in any parameters at all(?)
Ofcourse the code I provided is generic and will return as ACTIVE if the user has an active subscription to ANY plan. You can always build upon the logic and add filters to check for specific plans.
Did you modify the function? If you did, post your updated code here so that it can help users looking for a similar solution in the future.
Also testing in Preview mode dosen’t always work properly, so it is recommended to test any logic involving logged in members on the published site itself.
Anyways glad you got it working.
(Also blur out your personal email from the screenshot above. You wouldn’t want to expose it on a public forum)
1 Like
This is the code I used. I’m sure it isn’t perfect, but it’s working for me. I’ve checked it (not with test site) with two logged in users with subscriptions, one logged in user without a subscription and not being logged in as well. The buttons only show for those who are logged in and subscribed.
import wixUsers from 'wix-users';
import { authentication, currentMember } from 'wix-members-frontend';
import { orders } from 'wix-pricing-plans-frontend';
const subscribedPlanIds = [
"plan ID here", //
"plan ID here" //
];
const downloadButtonIds = [
'button7',
'button8',
'button9',
'button10',
'button11',
'button12',
'button13'
];
$w.onReady(async () => {
console.log("Checking member's login status...");
const isLoggedIn = authentication.loggedIn();
if (isLoggedIn) {
const loggedInMember = await currentMember.getMember();
console.log("Member is logged in: " + loggedInMember.loginEmail + ". Fetching subscription status...");
// PASS THE PLAN IDs INTO THE FUNCTION HERE:
let planStatus = await getsubstatus(subscribedPlanIds);
if (planStatus === "ACTIVE") {
console.log("User has an active subscription. Showing download buttons.");
downloadButtonIds.forEach((buttonId) => {
$w(`#${buttonId}`).show();
});
} else {
console.log("No active subscription. Download buttons will remain hidden.");
}
} else {
console.log("Member is not logged in. Cannot fetch subscriptions if not logged in.");
}
});
async function getsubstatus(validPlanIds) {
try {
const ordersList = await orders.listCurrentMemberOrders();
console.log("Fetched orders:", ordersList);
if (ordersList.length === 0) {
console.log("No pricing plans ordered.");
return "NA";
}
const activeOrdersArray = ordersList.filter(item =>
item.status === "ACTIVE" && validPlanIds.includes(item.planId)
);
if (activeOrdersArray.length === 0) {
console.log("No currently ACTIVE plans for this user.");
return "NA";
} else {
console.log("User has ACTIVE plan(s):", activeOrdersArray);
return "ACTIVE";
}
} catch (error) {
console.error("Error fetching member orders:", error);
return "NA";
}
}
1 Like