Letting your users select different plans and pay for them is something that we think might be only one integration to a payment provider and you are done. But there is quite many features that need to developed in your app to have a complete payment ready app.
You will need to add steps when users are signing up, make sure that certain visual components and backend are only visible to specific plans.
This is only the first steps. Later you want to show the user what subscriptions they have and let them upgrade or downgrade. In the early stages you will most probably experiment a lot with features that go in a pricing plan and change prices for them and you want to do all of this smoothly.
It takes an effort to get this done smoothly and then it also needs to be maintained in your codebase. To be honest this is the type of coding i don’t enjoy. Especially when I have built countless apps in different frameworks.
If you have followed our quickstart, you have all the features for a user to signup and log in to your app. In this blog, we’ll show you how to take it one step further and get your app ready for payments. This blog post covers the steps in this tutorial on your documentation.
By the end of this blog, you will be able to:
- Define pricing plans.
- Enable features in your app based on the plans.
- Let your users select and pay for a plan
Preparations
To follow along, you can create a backend from scratch following the backend part of the quickstart. It takes 2 minutes, and you will be ready.
For the front end, you can use this example project. The base of this code is made by Pasquale Vitiello, and you can find the original source here.
We took it, and it took roughly 20 minutes to look at it and add Nblocks to it and adapt it a bit to fit the context of this tutorial.
Download the example code and do npm install, and run it with npm run dev. Make sure that it runs on port 8080 as some Nblocks default settings need this. You can change this by having a look at the following docs.
You should now have a running backend and frontend.
You will also need a stripe account. Create a new one or use an existing one. Make sure that the “test mode” toggle is on to be able to fetch your test keys.
Make sure that test mode is toggled when developing. You can also see that it says “test mode” next to your developer keys.
Go to http://localhost:8080/setup/config and add your stripe credentials.
Press the update credentials button and you will see this modal. Add your stripe keys here. You should now see that the status has changed to.
Creating pricing plans
The first thing we will do is to create pricing plans. This is created in app-configuration.json on the backend in a parameter called businessModel.
Without going into deep details on how we can create pricing plans and all we move forward with an example where we have a “Free” and a “Premium” plan. You can take this piece and replace it with your existing “businessModel” parameter.
“businessModel”: {
“taxes”: [],
“plans”: [
{
“name”: “FREE”,
“prices”: [
{
“region”: “DEFAULT”,
“amount”: 0,
“currency”: “EUR”,
“recurrenceInterval”: “month”
}
]
},
{
“name”: “PREMIUM”,
“prices”: [
{
“region”: “DEFAULT”,
“amount”: 50,
“currency”: “EUR”,
“recurrenceInterval”: “month”
}
]
}
]
},
Configs in application.json needs to be persisted with this command
npx @nebulr-group/nblocks-plugin-tool push-app
After you run it you can go to http://localhost:8080/setup/config page where you will see your plans show up
Exposing features in your app to specific plans
Just by persisting the plans your users will be able to choose between them when signing up. But we also want to make sure that certain features are only exposed to the premium plan.
If you look at the main page of our frontend app you see sidebar menu alternative “Analytics”.
To only expose it to Premium users we need to;
- Hide the menu alternative
- Make sure that the route is not reachable.
- Restrict specific backend calls.
Jump into Sidebar.jsx and find the “Analyticsbutton”. This should only be visible to Premium users so we wrap it with the PlanAccessControllComponent And specify premium in the plans attribute.
{/* <PlanAccessControllComponent plans={[‘PREMIUM’]}> */}
<AnalyticsButton />
{/* </PlanAccessControllComponent> */}
If you go back to your app you see that the menu alternative for analytics is gone.
To restrict the actual route you will use the same component.
Open op Routes.jsx and look for the route with the path analytics.
Now wrap the component like this.
<Route
exact
path=”/analytics”
element={
<AuthGuard>
<PlanAccessGuard plans={[‘PREMIUM’]}>
<Analytics />
</PlanAccessGuard>
</AuthGuard>
}
/>
Now navigate directly to http://localhost:8080/analytics and you will see that it is no longer reachable.
Backend calls can also be connected to payment plans. It is as simple as specifying Roles.
To keep things simple Ihave not created a specific backend call for this frontend to fetch data.
But all you need to do in your own backend is to define your resourcemapping like this in resourceMappings.json.
“/analytics/dashboard”: {
“privilege”: “ANALYTICS_READ”,
“plans”: [“PREMIUM”]
},
You see that routes can have two fields. One that defines the role of the user and one that defines the pricing plan.
You will need to restart your server when making changes in resourceMappings.json.
Trying it out!
You can now try to signup and choose the premium plan. When you need to provide CC numbers use the following.
The user you signed up with should be able to see the premium content.
If you try to signup with the free plan the premium content should be hidden.
If you want to show your plans on your website and let users choose from there you can go to the config and get direct links to each specific plan. The user will then sign in and have the plan preselected.
This not only gets you started really fast but it lets you modify everything fast and also be able to easily try and test different types of payment plans. Something that you most surely will do in the very early stages of your app.