Skip to main content

Payments portal

On this page you will integrate your web application with Nblocks Payments portal.
The payments portal exists so you can embedd ready made payments views straight into your app either by using Iframes or redirecting the user to it. This allows you add a paywall and start recieving money through subscriptions from your customers in matter of minutes.

The content of this quickstart

  1. First we'll go through how you will apply a few lines of code to setup your app for paying users.
  2. Secondly, we'll define a simple business model with plans and prices via Nblocks Admin and enable syncing with Stripe.
  3. Lastly we'll be testing this by signing up as a new user where we will selecting a plan and get access to your app.
  1. If you haven't already, sign up for Nblocks and get access to your app id
  2. Completed the Quickstart since we'll be evolving on the token callback handler in this quickstart

Integrating in your code

Step 1. Create subscription button

In this step we will coding a button and component that will redirect the user to the Nblocks hosted Select plan view to manage can manage their current plan and subscription.

There will be two Nblocks endpoints involved when requesting to render the select plan.

  1. First we need to get the handover code which is unique to the user. This is done using /handover/code endpoint.
  2. Then we will use the code to redirect to the select plan view using the /subscription-portal/selectPlan endpoint.
Example code

Create a new component SelectPlan.

import React, { useEffect } from "react";

function SelectPlan() {
const redirectToSelectPlan = async (accessToken) => {

// Replace this with your own APP ID
const APP_ID = "XXX";

// Make the API call to Nblocks
const handoverCodeResult = await fetch(`${APP_ID}`,
method: "POST",
headers: {
"Content-Type": "application/json",
body: JSON.stringify({
).then(res => res.json());

if(handoverCodeResult.code) {
// Redirect to Nblocks Payments

useEffect(() => {
const accessToken = window.localStorage.getItem('access_token');
if (accessToken) {
}, [])

return <div>Loading...</div>

export { SelectPlan }

Add this component to render on the route /selectPlan and create a subscription button that navigates the user to this route.

<ul class="menu">
<a href="/home">Home</a>
<a href="/selectPlan">Subscription</a>

Great! When you render this component the user will be redirected to select plan view.


Nblocks will attach payment information to the access token you recieve on the callback route. If shouldSelectPlan or shouldSetupPayments is set to true you should redirect the user to /selectPlan.

Create plans in Nblocks Admin

When signing up for Nblocks you also got access to Nblocks Admin where you can customize and make changes to your app configuration and access other features.

Go to Nblocks Admin and login.

In this part we'll be creating a feature flag that matches your flag ID in code and define who should have access to it

Step 1. Create a premium plan

Click the payments tab and create a new plan. Call it "Premium", keep free trial disabled and give it a price of 50 EUR a month. We'll subscribe to this plan when we test the integration.

Create premium plan

Now when we have the plans ready, it's time to start enable the Stripe integration so that we can charge credit cards and handle invoicing.

Step 2. Enable syncing with Stripe

Nblocks uses Stripe as the payment provider to facilitate credit card, invoice, wallet and bank transfer payments.

Click the "Providers" tab and click to enable Stripe as a provider. Nblocks will ask for your Stripe Publishable key and Secret key.

Enable Stripe

If you don't have a Stripe account already, go to and register for a new one.

Create stripe account

Inside the Stripe dashboard, navigate to test API keys by clicking the "Developers" button and then "API keys", making sure "Test mode" is enabled.

Why test API keys?

With the test keys, we'll be able to add a non existing test credit card and simulate a successful payment when subscribing to your Premium plan.

Under "Standard keys" you'll find your Publishable key and Secret key. Add them to the Nblocks input and click Save.

Nblocks will now create the required information in your stripe account to enable payments and keep this information in-sync as long as you have the integration enabled.

Test signing up and subscribe to a plan

It's time to see this in action.

1. Start your app

Start your application so that it is accessible on http://localhost:8080

2. Navigate to /login and get redirected to Nblocks Login to signup

Navigate to http://localhost:8080/login. Your code redirects the user to Nblocks Login. Or you can go directly to where APP_ID is your Nblocks app id to start a signup flow.

Nblocks Sign up

3. Select plan

After signing up you're immediately redirected to Select plan that shows you're about to subscribe to the Premium plan.

Select plan scree

Click to continue with the Premium plan and enter your credit card information.

4. Enter payment information

Stripe checkout

Use the test credit card
Number4242 4242 4242 4242Expires12/45CVC123

5. Return to the app

After a succesfull checkout you're redirected back to the app and your subscribing to Premium for 50 Eur / month.