Building A Paid Membership Portal Using Stripe NPM And Velo By Wix – Membership Portal Tutorial

Velo by Wix is an open source development platform which aims to provide accelerated Web Application development tools. I having been using it for more than 2 years now and have built a small web development agency focusing on providing accelerated web application development services to businesses globally.

Membership portals are on the rise so in this blog I am going to teach you how to use the Stripe NPM and Velo By Wix to build a Membership Portal. Note that this is an advanced tutorial and I cannot debug your code if you have any issues. Please post your issues on the Velo Forum.

Creating The Plans On Stripe

Start of by creating a database to hold your subscription plan IDs which you will get from Stripe. If you do not know how to create plans on Stripe then follow the below process.

1. On your Stripe Dashboard’s left hand panel, click on ‘Billing‘ and then click on ‘Products‘. Next on the top right (below the feedback bar) click on ‘+ New‘ to add a new product.

2. Give your product a name and hit the ‘Create Product‘ button on the bottom right of the window.

3. After this you should see the product’s page. Just below the product name on the top left (beside the left hand panel) you should see the button ‘+ Add pricing plan‘. Click that and create a new pricing plan.

4. Once you have done that you will be able to see your newly created pricing plan under the Product’s main page like shown below. Click on your pricing plan (the one you created)

5. Once on the plan page, your plan ID will be found where the red box is located in the following image. Save your plan ID somewhere, we will need it later.

Database Setup

For holding subscription plans:

On your Wix site you will need a database to hold all the subscription plans. Create a database collection and create the following mentioned fields (use the exact field names, as I have typed it for best results)

Database Name: subPlans

1. displayName – TEXT
2. displayPrice – TEXT
3. description – TEXT
4. planId – TEXT (IMP)
5. currency – TEXT

Please note that in the video you might have seen more fields but they are not required. This blog shows you only the required fields with the main field being planId.

For members:

Database Name: payingMembers

1. firstName – TEXT
2. lastName – TEXT
3. email – TEXT
4. customerId – TEXT
5. subscriptionId – TEXT
6. lastFour – TEXT
7. cardType – TEXT
8. subscriptionStatus – TEXT

Please note that in the video you might have seen more fields but they are not required. This blog shows you only the required fields. You will need to tweak the code for your own web app.

After this create a dynamic page for your ‘payingMembers’ database to give your members their own personal dashboard. Give the dynamic page’s URL as my-dashboard/{ID}

Set the ‘payingMembers’ database permissions to the following:

1. Read: Site Member Author
2. Write: Site Member
3. Update: Site Member Author

Displaying The Plans

Now on your site, create a repeater with a button. Link the repeater to the various fields in your database. Now for the button inside your repeater, create an onClick function using the properties panel and insert the following code. The below code will help you open the subscription payment lightbox.

After this we can construct the User Interface for the subscription payment lightbox.

Main Subscription Payment Lightbox Code

The code has been broken up into chunks. We will go through the Backend codes first and then the code on the page. Note that code explanation is provided in the video. First install the Stripe NPM. If you do not know how to install a NPM on Wix see the Managing External Code Libraries with the Package Manager article.

Create a backend .jsw file called ‘stripeProcessor’ Below will be the code you need to copy on this backend .jsw file. Make sure to replace your Stripe Secret API Key on line 5.

Now create a Public .js file and name it ‘stripe‘ Below will be the code. Replace line 5’s API key with your own Stripe account’s Public Key.

Now on the lightbox, insert the following code. See comments for code function and usage. Creating the code for navigation between the multi stage form and handling errors is not shown in this code. This code is purely for creating a card token, creating a customer and subscribing via the Stripe API.

And that is how you code a Membership Portal using Stripe NPM & Velo By Wix. You have the subscriber’s CUSTOMER ID (from Stripe) saved into your database so you can use that to update, change or delete the subscription. Read the Stripe Documentation for details.