Build A Paid Membership Portal On Wix Using Stripe & Corvid

hi guys in this video I’m gonna show you a demonstration of membership portal built using stripe NPM and curve it by Wix in this video I’m going to show you a demonstration and then in the video description you have the link to the blog post which contains the code where you can get the code which has been used on this video now on this video on the site which you see over here you might see a lot of lot of more functionality such as you have
a multi currency paid plan set up but I’m not going to show you all that I’m just going to show you how you can create a customer on your stripe account using the stripe API stripe NPM and save that customers customer ID on your own Wix site database and create a dynamic page which will serve as a member dashboard alright so first of all let’s go ahead and refresh the page okay there we go so as you can see there like a few functions like
automatic counting numbers and stuff but again we’re not going to dive into that and then you have the multi currency paid plan setup and once again we’re not going to dive into that so a person comes here and then click on choose plan now subscription payment window opens up over here the user can see that they are paying this much per month now this is like a demo site for business which allows users to purchase a subscription and buy their
subscription they can plant a number of trees every month but again we’re not going to dive into all that I just want to show you how to create a subscription and see if the customer ID when you stripe dashboard so I go ahead and enter my email over here now this is a multi stage form you can you can google and look on YouTube other coders such as code Queen and weeks training academy on how to create a multi-stage form or something like that I
want me to show you this so continue billing address one two three sweet city New York dork booster countries United States one number one two three four five six seven eight nine all right now cuddle the name this is my name and I’m going to use a stripe test card alright so again this is this thing which you saw automatically the card logo appears something you can code but again I’m not going to dive into that how to do that right alright so
registering you as a customer subscribing please wait and I’ve been redirected to my dashboard on your dashboard what happened in the backend was I mean sorry on the lightbox was that the page after it signed me up it queried a database to get my profile picture based on the first half a bit of my name and then here it’s showing that a member since this much January 2020 and your referral link is something that you know the users get a
personalized referral link I am NOT going to into that on how to create that because you need to have a subscription to a link shortener API and then you can give them a personalized URL and then they can use that URL and take all the sales that will come all the subscription that will come will be attributed to them so it’s like an affiliate program but I’m not going to show you how to do that in this video and then you have again the
three-count based on the plan the user chose the total paid subscription is active the card use you can change card cancel subscription subscription details and all your invoices so next month another invoice will appear over here with the amount of payment that has been mean and if I click the download button you can see on that bottom left side that it will open up a stripe invoice but I’m again I’m not going to show all this I’m just going to
show you how to build the subscription photo by and give you the code for it alright now let’s go ahead and see the blog post so first of all the video which you guys are seeing will be here I’m still creating this blog and for those of you who do not know how to create a plan on stripe I’ve given a small explanation with screenshots on how to first create a product and a pricing plan to that product and then get the plans ID okay and then for
holding the subscription plans you have to setup a database now on this side which I showed it is a lot of stuff in the database but basically you just need the display name display price description of course the plan ID which is important I should write down important over here and then the currency okay and you need to fill in this data for example display name will be plan a display price six point nine nine USD and create the same six point
nine nine USD plan on your stripe dashboard and enter plan ID here new database under this field name fill key give the field is the same name so that you don’t mess up anywhere and for members you need to create a database with the first name last name email customer ID which will store the customer ID from stripe the subscription ID which will store the subscription ID which is returned from stripe the last four of their cards so that I can
display it over here it looks I’ve been cool and give them the option to change card and then the card type or for example Visa MasterCard and then based on that I can display the loop over here and then the subscription status so you will not see the six-point-nine and GBP as you can see that in the test database this demo database I I will not show you how to store the amount and currency but if you need to do that you can put down the currency
and amount on your subscription plan database and then save it on your paying members database after the user has subscribed you can tweak the code for your own web app as you want okay and for the daya paying members database set the permissions for read to site author sorry author site member water sorry site remember this will only allow the person who has inserted the site member who has inserted this item to read it set the write permission
to site member and update your site member author only okay and then for displaying the plan you can just hook up sorry just give me a sec yeah so for your you can set up a repeater and then connect the repeater to the data set of course the data set will be linked to the subscription plans SUV plans and you can just display as you want if you want to learn more about repeaters I think I’ve provided a link somewhere here it is you can click on
this link and read more about repeaters and yeah and this is the code that you will be entering on the so creator creator on click handler for example create a handler on click handler like this click on the button inside the repeater and then click on on click there will be a plus sign instead of a trash bin sign over here and then create the plan I mean sorry create the on click event and after that you entered this code so what this code is
doing first of all as you can see on my website that I have a little gift which is hidden on load and on top of it I have the button so what is it’s doing once the button is clicked the it hides all the other buttons inside the repeater so all three buttons are hidden so the user doesn’t click on anything again because they repeat the lightbox takes a little time to open a few seconds and then it shows the lure animation for only the I container
that it has been clicked for so for example if I click on this continue this loader will show but all the buttons will be hidden you do that by this the first 1 2 3 4 lines of the code and then you get the item the current item which has been clicked from the data set so the data set IDs plans over here as you can see it is set IDs plans you get the item and then you create an object with that you name the object deploy data like I’ve done you
can use any name doesn’t matter and then you use the Vics window dot open lightbox function to open the lightbox name subscribe where all my subscription payment code is located and then if for some reason the user decides to cancel this payment you can have a dot den function to show all the buttons that you just hit in the beginning and hide the loader animation okay and this UK you will need to construct the user interface for the lightbox
yourself so this is the user interface I’m using a multi-state box I have total of four boxes three for collecting information and all right and this is the main subscription beam in lightbox cool so actually there’s like more than 500 lines of code in this slide box but to simplify it I just give you the ones that you will need the code that you will need to create a subscription and save the customer ID so first of all install the stripe in
p.m. so if you’ve not done it click on back not click on back in and the node modules click this here and then click on install a package once you click on install a package this cool small window will open and then search for stripe I cannot see any results because I’ve already installed it you will not see that you will see the result and once you see it you click on this install button over here after that stripe will appear below your node
modules good and yeah if you don’t know how to do it use the link I’ve given in my blog post and then create a back-end orgia step you file so click on back-end in the left-hand panel oh and before all this for the real beginners out there you need to click on safe mode and then over here it will be turn on dave mode so you need to click on that to see all this all right ok let’s continue and the back end click this plus function and click on new
web module ok name your web module what it says over here which is stripe processor and use this code so use this code inside it and make sure on line five of your back end good make sure to replace line five with your stripe it’s saying public but it’s actually the secret key so it’s the secret API key okay you need to do that you need to go in your stripe dashboard and then on the left-hand panel click on developers API keys to get your public
and secret keys okay get that and insert it over here between these two okay after this open your public file like this public holding create a new dot GS file okay and this name the GS file stripe so the full name will be striped OGS and this copy-paste I suppose good and replace line five again with your public API key this time okay so public folder public API key back in folders secret API key now on the lightbox insert this following code so
there’s like I think 100 lines of code which will show you how to you can subscribe let me see if I can show you the actual code just give me a moment all right so this is your code on your lightbox so first of all you input libraries Vic’s window Vic’s location with state rx users and then you input back in file functions that you have created which is stripe token from the public folder to process your card payments sorry to process the card
tokenization and then create custom going create subscription from the backend stripe processor or chase to view all right now under the light box is already function first of all you remember over here we sent the details about the plan so the plan ID to the light box so you need to set it as a variable on the light box so this does exactly that and also sets the currency and then when the subscription button is clicked now over here you can’t
just copy paste this you need to create rules for example good for navigation to the multi-state boxes or slideshows whatever you use and then ruse for example if something on your let’s say something on this is not filled you need to show an error you can’t just let them continue with empty input elements so something like if was the if Street dot value is not valid and don’t let it proceed show an error all right so but over here I’ve directed
np8 card token so this caused the create car token function where it sends all the data the card data which is the Cardinal God name got number one tough expiry year of expiry CVC billing Street billing city building state billing postal code and billing country it sends that and gets a response back from stripe so if something went wrong you need to handle the error as the response ID will be undefined but if it’s not undefined you can proceed
to create a customer now as far as I know if you need to just create a basic one you can just copy paste this and then I mean if you just copy paste this and use the user input elements create the user input elements it’s going to work it’s going to create your customer and then once it gets the response the customer ID it will create your subscription plan so that’s all it is and one subscription plan is created it will sign up your member using
Wix users start register and it will insert the data the first name last name email customer ID subscription ID subscription status and all that data into your paying members database so like I said the paying members database and then it will redirect them to their dashboard so I’ve also written how to create a dynamic page and give the URL as my – dashboard slash curly brackets and in between that Capitol ID and that is how you could a
membership photo using stripe NPM and cover it by Wix now you can this is just a basic one you can enhance it in a lot of ways it’s up to you good luck and if you have any issues just post your issues in the Corbett forum