DEV Community: Joshua Omobola

How to Monetise Your API in Next.js using the x402 Protocol

Joshua Omobola — Wed, 12 Nov 2025 08:28:27 +0000

What if you could charge a few cents every time users access your API? This is almost impossible using payment processors like Stripe and PayPal. Their transaction fees alone make micropayments impossible, not to mention the complex setup needed to get it to work. Plus, you can't ask users to fill in a payment form just to spend half a cent on an API call every time. Nobody is going to do that.

x402 changes this.

x402 is a new payment standard that lets you charge for API access through standard HTTP responses. x402 works without credit cards, sign-ups, or subscriptions. It uses stablecoins on the blockchain to make instant and near-zero fees finally possible.

In this tutorial, you'll build a simple marketplace for premium AI prompts with Next.js. Users will be able to unlock premium AI prompts by paying $0.005 USD per call to your API.

Here’s a demo of what you will build using this guide:

Prefer a video version of this tutorial? Check out How to Monetise your APIs in Next.js with x402 Protocol

What is x402?

x402 is an open payment standard that enables web services and AI agents to charge for API access and content directly over HTTP. It is built on top of the long-reserved HTTP 402 ”Payment Required” status code.

x402 removes the need for API keys, subscriptions, and manual payment processing, enabling any web service to request payment in real time using stablecoins like USDC. With just one line of code, developers can integrate pay-per-use monetisation and receive instant, seamless payments for APIs & digital services.

Core Components of x402

Sellers: People or companies who want to monetise their APIs or content.
Buyers: Developers and AI agents seeking to access paid services without accounts or manual payment flows.
Facilitators: This is a service that verifies and settles payments on behalf of the buyers and sellers. e.g PayAI

How x402 Works

When a client(user) first requests a resource from the server(your app), the server responds with an HTTP 402 Payment Required status code along with payment instructions.

The client then prepares the payment based on these requirements and retries the request, this time including an X-PAYMENT header containing a signed payload.

On receiving this payment proof, the server verifies it through a facilitator service, settles the payment on the blockchain, and finally delivers the requested resource once the payment is confirmed.

Now that you have a good understanding of x402 protocol and how it works under the hood, let's move on to building the demo.

Prerequisites

To follow along with this guide, you will need:

Node.js 22+ installed
Basic knowledge of Next.js fundamentals
MetaMask wallet Chrome extension installed in your browser. You will also need to add the base sepolia network and claim some free USDC testnet tokens from the faucet.

Step 1: Setting up the project

First, create a new Next.js app by running the following command in your terminal:

npx create-next-app@latest x402-prompt-store

The installation will prompt you to select a few options; make sure to accept all the defaults

Next, navigate into the x402-prompt-store directory, and install the dependencies:

// navigate into project
cd x402-prompt-store

// install the packages you need
npm install x402-next x402-fetch viem

Here's what each one does:

x402-next — middleware package for Next.js that intercepts API requests and verifies payments
x402-fetch — client library that automatically handles the payment flow when it sees a 402 status code response
viem — a library that handles blockchain interactions like connecting to wallets & signing transactions.

Step 2: Creating the API routes

Inside of app/api/premium directory, create a new file named route.ts

touch app/api/premium/route.ts

Your file structure should look like this:

 app/
  ├── api/
  │   └── premium/
  │       └── route.ts
  ...

Add the following code to route.ts:

// app/api/premium/route.ts

import { NextRequest } from "next/server";
const PREMIUM_PROMPT = `You are a creative developer who creates stunning UI with motion and interactions. You create eye stunning ui experience with Lovable for Anvil. You are given a prompt and you need to create a lovable UI prompt for Anvil.`;

export async function GET(req: NextRequest) {
  return Response.json({ promptText: PREMIUM_PROMPT });
}

The code above returns the PREMIUM_PROMPT as JSON when it’s called.

You now have a working API endpoint. Start your dev server with npm run dev and visit http://localhost:3000/api/premium in your browser. The output should be the JSON response of the prompt.

Right now, this endpoint is completely free and accessible to anyone. In the next step, you'll add a payment middleware to protect it behind a paywall.

Step 3: Adding a payment paywall to the API

Create middleware.ts at the root of your project, where you will define the payment guard for the API endpoint.

// middleware.ts
import { paymentMiddleware } from 'x402-next';

const SellersWallet = "Replace_with_your_wallet_address"
const facilitatorObj = { 
    url: "https://facilitator.payai.network" as `https://${string}` 
}

// middleware configuration that paywalls the /api/premium route
export const middleware = paymentMiddleware(
  SellersWallet,
  {
    '/api/premium': { 
      price: '$0.005',
      network: "base-sepolia",
      config: {
        description: 'Access to protected premium content'
      }
    },
  },
  facilitatorObj
);

// Configure which paths the middleware should run on
export const config = {
  matcher: [
    '/api/:path*',
  ],
  runtime: "nodejs"
};

Let's break this down:

The code above uses the paymentMiddleware function from x402-next to define the monetised routes. It accepts three parameters:

payTo: The wallet address to receive the payments. R*eplace* SellersWallet with your own wallet address.
routes: Route configurations for the protected endpoints
facilitator: Configuration for the facilitator service that verifies the payments

With these three parameters, you can pretty much configure the monetisation settings for any API in the app.

In this case, every call to api/premium will cost $0.005 USD, and the payment will settle to the SellersWallet on the base-sepolia network.

The matcher config tells Next.js which routes this middleware should run on, in this case, any route under /api/ directory.

Now, when someone requests /api/premium, the middleware returns a 402 status code response with payment details (how much, where to send it, and which blockchain network).

Step 4: Creating the Frontend Interface

Now that you have the API endpoint and paywall middleware in place, let’s add the frontend UI.

Replace the content of app/page.tsx with the following code:

// app/page.tsx

"use client";

import { useState } from "react";
import { wrapFetchWithPayment } from "x402-fetch";
import { createWalletClient, custom } from "viem";
import { baseSepolia } from "viem/chains";

export default function Home() {
  const [loading, setLoading] = useState(false);

  const handlePremiumPromptClick = async () => {
    console.log("Premium prompt clicked");
  };

  return (
      <main className="mx-auto max-w-3xl p-6">
      <h1 className="text-2xl font-semibold mb-4 font-mono">
        THE PROMPT SUPERSTORE
      </h1>
      <ul className="space-y-4">
        {/* Premium */}
        <li className="border p-4 rounded-md">
          <div className="mt-2 text-sm">Premium($0.005)</div>
          <h2 className="text-xl font-medium">
            Creating Lovable UI Prompts for Anvil
          </h2>
          <button
            onClick={handlePremiumPromptClick}
            className="cursor-pointer mt-3 inline-block text-xs bg-amber-500 dark:text-black px-2 py-0.5 font-mono">
            {loading ? "Unlocking..." : "Unlock"}
          </button>
        </li>
      </ul>
    </main>
  );
}

This code above creates a minimal UI with basic tailwind styling that lets users access your AI prompts.

Right now, you have a single premium prompt card, and clicking the "unlock" button calls the handlePremiumPromptClick function, which prints a message to the console.

Now let's implement the payment logic.

Update the handlePremiumPromptClick function with the following code:

// app/page.tsx

const handlePremiumPromptClick = async () => {
    try {
      setLoading(true);

      // Request wallet access
      const [address] = await (window as any).ethereum.request({
        method: "eth_requestAccounts",
      });

      // Create wallet client
      const walletClient = createWalletClient({
        account: address,
        chain: baseSepolia,
        transport: custom((window as any).ethereum),
      });

      // Wrap fetch with payment capability
      const fetchWithPayment = wrapFetchWithPayment(
        fetch as any,
        walletClient as any
      );

      // Make API request & automatically handle payment on 402
      const res = await fetchWithPayment("/api/premium", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      });

      const data = await res.json();
      alert(`Prompt: ${data.promptText}`);

    } catch (error) {
      console.error("Payment error:", error);
      alert("Failed to unlock premium prompt. Please try again.");

    } finally { 
      setLoading(false);
    }
  };

The code above does the following:

Requests the user's wallet address from the browser using the MetaMask wallet extension
Creates a wallet client configured with the baseSepolia testnet
Wraps the native browser fetch with wrapFetchWithPayment() function, which automatically handles payment when receiving a 402 response
Makes a GET request to /api/premium, when the middleware returns 402, the payment flow executes automatically
Displays the premium prompt in an alert on success, or shows an error message if payment fails

Let's test it out.

Step 5: Testing the Paywall

Start the server by running the following command:

npm run dev

Open http://localhost:3000 in your browser, and you should see THE PROMPT SUPERSTORE UI with one premium prompt item card.

When users click the unlock button, the MetaMask wallet will pop up, prompting them to confirm a $0.005 USD payment to access the AI prompt.

Conclusion

That's it! You just learned how to monetise APIs in Next.js using the x402 Protocol. You built a simple AI prompts store that requires users to pay to call your API. This kind of Micropayment is really difficult to do with traditional payment providers like Stripe and PayPal, but with x402, it's effortless.

For next steps, explore how to deploy to mainnet or implement dynamic pricing based on content value. Fun stuff!

Here's a list of resources I'd recommend you check out about x402:

If you are stuck or have questions, find me on Twitter (@kohawithstuff). I'm always ready to help.

Happy building!

AI benchmarks, explain like i'm five

Joshua Omobola — Mon, 22 Sep 2025 21:39:54 +0000

Agents Payment Protocol, explain like i'm five

Joshua Omobola — Fri, 19 Sep 2025 17:16:36 +0000

x402, explain like i'm five

Joshua Omobola — Thu, 18 Sep 2025 13:29:48 +0000

Context Window, explain like i'm five

Joshua Omobola — Wed, 17 Sep 2025 16:04:32 +0000

Every AI model has a memory — but it’s not endless. That memory space is called the context window, and it decides how much of your instructions, history, and data the AI can actually “see” at once.

ELI5:

AI Agents, explain like i'm five

Joshua Omobola — Wed, 17 Sep 2025 16:00:56 +0000

AI Agents are like digital interns. You give them a task, they think, use tools to do them, remember what they’ve done and loop until the job is done.

ELI5:

Galileo, explain like i'm five

Joshua Omobola — Wed, 17 Sep 2025 15:58:17 +0000

AI agents are powerful, but without reliability they’re just experiments waiting to fail. That’s where Galileo steps in; giving you visibility, protection, and trust in how your AI behaves at every step

Check out Galileo - RunGalileo

Slapp.dev, ship apps without leaving your inbox

Joshua Omobola — Mon, 09 Jun 2025 06:47:50 +0000

This is a submission for the Postmark Challenge: Inbox Innovators.

“People who are crazy enough to think they can build an app with nothing but an email… usually can.”
— Slapp.dev, 2025

We never know when inspiration would hit, it could be when you are writing your morning notes, sending an email to your coworkers or the routine start of day email scour. Inspiration never waits and that's why we are building Slapp.dev

The Resolution

Slapp.dev is a web tool that uses AI Agents unrelentlesly working behind the scenes to build your idea/app right from your mail box. We call the agent, bob.

This workflow creates a new experience where anyone can quickly prototype an idea without needing to switch contexts or maybe even go as far as learning how to code (ewwww!)

We already spend a good amount of time right in our mail boxes, in fact this is a clipped piece from a 2019 article on how many hours American workers spend on email each day. Imagine the numbers we are doing now. crazzy!

Demo

Okay, bob, it's time.

Send an email with your idea to bob@slapp.dev

Grab a cup of coffee or keep on with your morning notes
When your slapp is ready, bob will respond with a link to your new startup/prototype.

That's all you need to do. I'm serious.

Side notessss:

Bob will send you a link or prompt you to create an account. You can decide not too but bob will be happy if you do

✦ links

Code Repository

https://github.com/kohasummons/Slapp

How I Built It

Slapp.dev runs on a hand‑picked stack:

NestJS (backend)
Next.js
Supabase + Primsa
Redis + Bull - worker picks off the slapp builds and sees it to completion rotating the agents.
Gemini 2.5Pro Flash - Google's latest multimodal AI model that powers our code generation engine
Postmark – inbound email parser that is the heartbeat of our “email‑first” UX.

TLDR.

Postmark captures emails and fires it off to my webhook
NestJS processes webhooks
Redis/Bull queues build jobs
Agent use Gemini to generate the code
Prisma manages database operations
Supabase handles auth and storage
Next.js serves the frontend and live app viewer

Future updates

Handle email threading. Found a good resource from postmark on how to do that.

Team

mercythaddeus
koolamusic

ThrashBucket, store and share files anonymously

Joshua Omobola — Mon, 14 Oct 2024 06:56:27 +0000

This is a submission for the The Pinata Challenge

What I Built

Demo

Thrashbucket x Pinata Demo

My Code

More Details

How to use SuperTokens in a VueJS app with your own UI

Joshua Omobola — Wed, 09 Oct 2024 08:00:00 +0000

In this tutorial, you will learn how to add an Email + Password Authentication to a Vue.js application using SuperTokens. We'll build a simple web application where users can sign up with their email and password, relying on SuperTokens for authentication.

Our demo app will use the Email-Password recipe for authentication and a custom authentication user interface (UI) tailored for our users.

Before diving in, let’s look at SuperTokens, its unique architecture, and why it’s a compelling choice.

// Jump to the tutorial section

What is SuperTokens?

SuperTokens is an open-source authentication provider designed to deliver secure user authentication without compromising the experience for both users and developers.

With SuperTokens, developers can efficiently manage user sessions, securely store user data, and implement secure authentication flows using various auth strategies called recipes.

Thanks to its open-source philosophy, SuperTokens allows you to self-host the solution on your premises, giving you complete control over your infrastructure—all at no cost. If self-hosting feels like too much work, you can opt for the SuperTokens managed service, where SuperTokens handles all the infrastructure setup, allowing you to focus on shipping your product quickly.

SuperTokens Architecture in 30 seconds

SuperTokens is made up of three components:

Frontend SDK: Renders the auth UI widgets and manages user session tokens automatically
Backend SDK: Adds auth API routes to your backend, like /sign-in, and/sign-up exposed on the same domain as your application's APIs.
SuperTokens Core Service: This HTTP service talks to your database. It also contains the core logic for authentication. You can self-host with your database (with docker or without Docker or host it with a SuperTokens-managed service.

The architecture employed here is unique and different from other auth providers as the backend API layer sits right in the middle of your front end and SuperTokens.

This means that the front end will never talk to the SuperTokens core directly, but rather that any request made will be to the APIs exposed by the backend SDK, which will then talk to the SuperTokens core.

💡 For more information, see this 2-minute video on YouTube by Rishabh Poddar of SuperTokens on how SuperTokens works.

Why SuperTokens?

Open source: SuperTokens is free to use with no limits on the number of users—forever.
An on-premises deployment so that you control 100% of your user data using your database.
An end-to-end solution with login, sign-ups, user, and session management without all the complexities of OAuth protocols.
Ease of implementation and higher security.
Extensibility: Anyone can contribute and make SuperTokens better!
Pre-built UI Components: SuperTokens offers pre-built authentication UI, such as login forms, for quick and easy integration. Alternatively, you can opt to use your custom UI.

Getting Started

Now that we know a little about the underlying technology let's start building.

Prerequisites

Before you begin, you need:

A basic knowledge of JavaScript and Vue.js
Node.js installed on your computer
A SuperTokens account

Project Setup

To reduce the scope of this guide, you will be starting with a repository that already has a few things set up for you:

A Simple Vue.js web application
TailwindCSS for styling and
Vue Router for in app navigation.
An express-based backend

To get started, clone the starter branch from the repository with the following command:

git clone --branch starter <https://github.com/kohasummons/supertokens-vue>
cd supertokens-vue

Your project directory structure will look like the tree below with that setup. The ... indicates omitted files to keep the tree concise.

├── backend
│   ├── ...
│   ├── app.js
└── frontend
    ├── ...
    ├── src
    │   ├── App.vue
    │   ├── components
    │   │   ├── HelloWorld.vue
    │   │   ├── TheButton.vue
    │   ├── main.ts
    │   ├── router
    │   │   └── index.ts
    │   └── views
    │       ├── AboutView.vue
    │       ├── AuthView.vue
    │       ├── HomeView.vue
    │       └── UserView.vue

The backend folder holds the Express.js code for the APIs
The Frontend folder contains code for the Vue.js application

Frontend

Change into the Frontend directory and install the superTokens-web-js dependency

cd frontend/
npm i -s supertokens-web-js

Initializing SuperTokens

Open main.ts and initialize SuperTokens

import SuperTokens from 'supertokens-web-js';
import Session from 'supertokens-web-js/recipe/session';
import EmailPassword from 'supertokens-web-js/recipe/emailpassword'

// Several lines of code are omitted here.

SuperTokens.init({
    appInfo: {
        apiDomain: "<YOUR_API_DOMAIN>", // I use <http://localhost:5175> here
        apiBasePath: "/auth",
        appName: "replace with your app name",
    },

    recipeList: [
        Session.init(),
        EmailPassword.init(),
    ],
});

In this code snippet, we set up session management network interceptors across the entire application. Our front end will now automatically save and attach session tokens to each request made to our API and auto-refresh sessions.

This setup also specifies the type of authentication we want to use—in this case, the EmailPassword recipe. Additional recipes can be added to the recipeList array depending on the project's needs.

The appInfo object allows us to customize our SuperTokens instance for the application, and it needs to be specified both on the frontend and backend. Some of the options it provides include:

appName: The name of your application
apiDomain: The API Domain URL of your backend
apiBasePath: The base path for the API

Add SignIn and SignUp to your application

Great! Let's add the ability for our users to sign up via our custom UI. Head to AuthView.vue and update with the following code:

<script setup lang="ts">
import { signIn, signUp } from "supertokens-web-js/recipe/emailpassword";
// Several lines of code are omitted here.

const onSignUp = async () => {
    try {
        let response = await signUp({
            formFields: [{
                id: "email",
                value: email.value
            }, {
                id: "password",
                value: password.value
            }]
        })

       // handle potential errors
        if (response.status === "FIELD_ERROR") {
            // one of the input formFields failed validaiton
            response.formFields.forEach(formField => {
                if (formField.id === "email") {
                    // Email validation failed
                    window.alert(formField.error)
                } else if (formField.id === "password") {
                    // Password validation failed.
                    // Maybe it didn't match the password strength
                    window.alert(formField.error)
                }
            })
        } else if (response.status === "SIGN_UP_NOT_ALLOWED") {
            // the reason string is a user friendly message
            // about what went wrong.
            window.alert(response.reason)
        } else {
            // sign up successful.
            // navigate to the '/user' page
            router.push({ name: 'user' })
        }
    } catch (err: any) {
        if (err.isSuperTokensGeneralError === true) {
            // this may be a custom error message sent from the API by you.
            window.alert(err.message);
        } else {
            window.alert("Oops! Something went wrong.");
        }
    }
}
</script>

The onSignUp function calls the signIn method from supertokens-web-js SDK which receives the email and password. If authentication is successful, we redirect the user to the "/user" route.

Next, let's handle the SignIn action. Update the AuthView.vue with the following code:

<script setup lang="ts">
// Several lines of code are omitted here.

const onSignIn = async () => {
    if (!email.value || !password.value) return

    try {
        let response = await signIn({
            formFields: [{
                id: "email",
                value: email.value
            }, {
                id: "password",
                value: password.value
            }]
        })

        if (response.status === "FIELD_ERROR") {
            response.formFields.forEach(formField => {
                if (formField.id === "email") {
                    // Email validation failed
                    // (for example, incorrect email syntax).
                    window.alert(formField.error)
                }
            })
        } else if (response.status === "WRONG_CREDENTIALS_ERROR") {
            window.alert("Email password combination is incorrect.")
        } else if (response.status === "SIGN_IN_NOT_ALLOWED") {
            //The reason string is a user-friendly message
            // about what went wrong.
            window.alert(response.reason)
        } else {
            //sign-in successful.
            // navigate to the "/user" page
            router.push({ name: 'user' })
        }
    } catch (err: any) {
        if (err.isSuperTokensGeneralError === true) {
            // this may be a custom error message
            // sent from your API.
            window.alert(err.message);
        } else {
            window.alert("Oops! Something went wrong.");
        }
    }
}
</script>

The SignIn function works similarly to the SignUp function we implemented earlier. We pass the email and password to the SignIn function, check for and handle any errors, and then automatically navigate the user if the action is successful.

Add SignOut to your application

Users who sign in to your application will also need a way to sign out. Let's add a SignOut functionality to the user page.

Open Userview.vue and update with the following code:

//Several lines of code are omitted here
import Session from "supertokens-web-js/recipe/session";

async function onSignOut() {
    await Session.signOut();
    router.push({ name: 'auth' });
}

Backend

While your front end is fully integrated with SuperTokens, it isn't doing anything yet. That's because the front end will never directly talk to the SuperTokens core. Any request from the front end will be sent to the APIs exposed on your backend via the supertokens-node SDK, which will then talk to the SuperTokens core. Let's get our backend up and running.

For a quick backend setup, check out the backend quick setup section in SuperTokens docs.

Change into the Backend directory and install supertokens-node dependency

cd backend
npm i -s supertokens-node

Open app.js and update with the following code

import supertokens from "supertokens-node";
import Session from "supertokens-node/recipe/session/index.js";
import EmailPassword from "supertokens-node/recipe/emailpassword/index.js";
import { verifySession } from "supertokens-node/recipe/session/framework/express/index.js";
import { middleware, errorHandler } from 'supertokens-node/framework/express/index.js';

supertokens.init({
    framework: "express",
    supertokens: {
        // These are the connection details of
        // the app you created on supertokens.com
        connectionURI: `<replace with your URI>`,
        apiKey: `<replace with your apiKey>`,
    },

    appInfo: {
        // learn more: <https://supertokens.com/docs/session/appinfo>
        appName: "replace with your app name",
        apiDomain: "<YOUR_API_DOMAIN>", // I use <http://localhost:5175> here
        websiteDomain: "<YOUR_WEBSITE_DOMAIN>",// I use <http://localhost:5173> here
        apiBasePath: "/auth",
        websiteBasePath: "/auth",
    },

    recipeList: [
        EmailPassword.init(), // initializes signin / sign up features
        Session.init(), // initializes session features
    ]
});

This will initialize the supertokens-node SDK and allow us to customize our authentication flow.
Once again, the recipeList array configures the type of authentication we prefer, similar to how you did on the front end. The appInfo object also behaves like it was on the front end.

Next, let's setup CORS and the SuperTokens middleware and errorHandler:

// several lines have been omitted

// Add `cors` middleware BEFORE the SuperTokens middleware
app.use(cors({
    origin: "<YOUR_WEBSITE_DOMAIN>",
    allowedHeaders: ["content-type", ...supertokens.getAllCORSHeaders()],
    credentials: true
}))

// Add the middleware BEFORE all your routes.
app.use(middleware());

// you can add any other route here.

app.use(errorHandler());

This middleware exposes all the auth-related API routes (like sign-in and sign-up) to the front end..

POST /auth/signup: For signing up a user with email & password
POST /auth/signin: For signing in a user with email & password

Set up your SuperTokens Core Instance

There are two ways to set up your core instance:

Self-Hosting the Core Instance: Self-hosting allows you to use all the open-source features of SuperTokens for free, regardless of "scale”. Everything is managed within your infrastructure, giving you full control over the deployment.
Using the SuperTokens Managed Service:

With this option, SuperTokens takes care of scalability, reliability, and updates on your behalf, significantly reducing your DevOps workload. It offers the same features as the self-hosted version but with the added convenience of on-demand management and infrastructure support.

For the scope of this tutorial, we'll spin a SuperTokens managed service instance.

Create a user account on Supertokens

Select a region and click the deploy button:

After the deployment is complete, the dashboard will look similar to this

Finally, add connectionURI and apiKey of your SuperTokens core to your backend.

Testing it out

Now, we can test everything out.

With both the frontend and backend servers running, open your application URL in the browser. Navigate to the Auth page and sign up or sign in.

You'll be redirected to the User page if the sign-in or sign-up is successful.

The User page in our demo displays some metadata about the user. That is a little task for you to implement. Look through the docs and give it a shot.

Useful Resource: https://supertokens.com/docs/emailpassword/common-customizations/get-user-info#fetching-information-using-the-users-id

Protecting your Frontend Routes

You can keep unauthenticated users away from certain page routes using navigation guards.

To protect the User Page route, Navigate to the router directory and update index.ts with the following code:

import Session from 'supertokens-web-js/recipe/session';

// several omitted lines of code

router.beforeEach(async (to, from, next) => {
  if (to.name === 'user' && !(await Session.doesSessionExist())) {
      next({ name: 'auth' })
  }
    else {
        next();
    }
})

The router.beforeEach function runs before every route is resolved. We’ve added logic to check if a user session exists. If it does, it navigates to the user page; otherwise, it redirects to the auth page, prompting users to sign in.

Conclusion

With this tutorial, you've successfully implemented Email + Password authentication in a Vue.js application using the SuperTokens SDK and a Custom UI. You’ve learned how to set up SuperTokens on both the frontend and backend, create a SuperTokens managed service, and protect your frontend routes using navigation guards in combination with SuperTokens.

To learn more about SuperTokens, check out the SuperTokens Documentation.

A Skeptics Guide to Web5

Joshua Omobola — Wed, 29 Nov 2023 22:51:38 +0000

"Nothing on the Internet belongs to you."

When I made this statement at a recent conference I spoke at, I saw the eager faces of the audience, who already looked at me with curiosity recoil. The Gospel of Web5 came with a shocking revelation, and the truth is often hard to swallow.

Join the Web5Africa Community - https://dub.sh/web5africa-wa

In this piece, my intention is to give you a breakdown of the entire idea behind Web5 without all the technical stuff and really get into the Whats, The Whys, and The Hows.

Hopefully, with all the powers and magic that be, I will be able to get you up to speed.

Before we begin...

Let's take a closer look at the current state of things. The Internet is a big, vast space of people and time. It existed way before the Twitter (X), Facebook, and Reddit of the modern world. The first version of the web, though, could have been more fun. Your current superpowers did not exist. You could not like, share, or even serve your hot takes on stuff you found on the Internet. It was one-sided, ruled by lords called WebMasters, and needed to evolve fast. That first version is what Web1 looked like.

Webmasters put up webpages. You and I consume them no questions asked, and share our 2 cents with friends and families that we can see and touch; there was no way to share that on the Internet.

With the surge in innovation and technology and a thirst for more participation, Web2 has birthed what you have now. The Twitters, The Gmails, OnlyFans, and the whole damn web, for the most part.

When I share this post in the Twitterverse, I expect Twitterns (Twitter Users) to like, share, reply, and hopefully not drag me. That is much more fun than the previous way of things made possible because we now have a form of "Identification" on the web.

Every human can claim a "tag" that will separate his essence from the next person. With this tag, the new webmasters, Google, Facebook, Twitter, et al., can house the data of each person and then use that to enable participation and individuality.

This is what Angie Jones referred to as The Account Model of Web2.

Fast Forward a couple of new techs later and a few billions of revenue from selling your data to the highest bidder; we realised that we need more individual control over how the internet stores our data.

The question was, "How can I have more control over my data, content, and assets securely, boycotting all the new self-ordained webmasters?" The answer to this question was Web3. A fresh new form of the web enabled by the Blockchain where data is cryptographically locked, and every participator has complete authority over the store and intent of their data. The Blockchain is open and decentralised; for the first time, actual data ownership was activated.

With these newfound superpowers, we built a new empire that allowed cross-border inclusion in meaningful things like financial structures and digital ownership, which was a fluke in Web2. So what's next?

A Good Day to Web5...

Once upon a time, Twitter was just "Twitter" and not "X (formerly Twitter)". Twitter handled the @twitter user name on X and shared memes and stingy updates as the overlord pleased. That was a long time ago.

Twitter is rebranding to X and claiming the username @x is part of this new branding effort. Gene Huang handled the @x account. He owned it. He has built his brand around the single-letter username.

However, when the overlord X came calling and sought the username Gene has held on to for more than seven years, you can probably guess what happened next. X claimed the @x username from Gene and assigned him @x12345678998765. A massive drop in dopeness and a clarion call that Nothing on the Internet belongs to you, even your usernames and emails.

The very fabric of your online identity can be ripped away faster than a laser will slice through butter. Crazy!

Hence, Web5. A fresh take on how we build web applications. An act of decoupling where data is not tied to the app we use. A shift towards more individualistic and total ownership of not just your data but also your identity.

What if you can move to a new social network and bring over your data from the previous social network? What if you can also migrate your identity and plug it in and out of services as you please? What if you can store your data and identity in your desired stores? What if? What if? Lots of What-ifs.

We are building towards that future with Web5, where the what-ifs of today are the reality of the day.

What's next...

I made a promise to be as feeble as possible with this piece. The next part of this series will explore how web5 can make all this happen. You can like (tap multiple times) and share this piece. You should leave a comment; I also want to hear your thoughts. My goal remains pure and true: to do all I can to Web5 you.

Until the next time, remember, Nothing on the internet belongs to you.

Love, your favourite neighbourhood devrel.

Resources

📕 What is Web5?

📕 What is the point Web5?

📕 The Illusion of Data Ownership

How to Integrate Pay with Crypto Payment Checkout with Lazerpay

Joshua Omobola — Sat, 29 Oct 2022 15:09:06 +0000

Lazerpay is a blockchain payment system that enables you to seamlessly integrate crypto payments in your apps — or websites. And with the recent surge in web3 adoption, this feels like the right time to offer crypto payment options to your users. Lazerpay makes it ridiculously easy using their API and tools — for example, the Lazerpay checkout script, to integrate a "Pay with Crypto" checkout in your website or apps without writing a single line of blockchain code.

Demo

In this article, I will show you how to integrate a pay with crypto checkout in your app and receive crypto payments from your users. You should read on if you have a personal website with a 'sponsor/donate' page or an e-commerce website.

At the end of this tutorial, you will be able to build your own Lazerpay integrated page and accept various Stablecoins (less volatile form of cryptocurrency). such as:

USDT
DAI
BUSD
USDC

So without further stalling, let's begin! :)

Step 1: Creating a Lazerpay Account

Before we go any further, you need to create a Lazerpay account and grab your unique credentials so you can authenticate your request to the API.

So, navigate to Lazerpay.finance and create your business account.

Step 2: Grabbing your Lazerpay Credentials

Once you've successfully created your account, you can now grab your unique keys and use that to authenticate your request to the lazerpay's API.

So login to your account and on the left navigation panel, click on Settings. Click API keys and Webhook tab. This is where you will find your unique keys.

You will notice two categories of API configurations. The Mainnet API configuration and Testnet API configuration. During development, use the Testnet keys to test lazerpay integration. When you are ready to go to production, that's when you should use the Mainnet keys.

Copy your test public keys to your clipboard as you would be needing it later.

Now that you have your Testnet public keys, toggle the switch at the header of your dashboard to switch to the Testnet (sandbox-ish).

In the live environment, you deal with real crypto assets while the test environment uses Test Tokens which you can get for free from faucets to test your integration.

Step 3: Integrating Lazerpay Checkout

Woohoo! you made it here. Here comes the juicy part of the integration, adding the pay with crypto buttons to process payments on your website.

To demonstrate this, I scaffolded a basic cookie cart app that sells the most delicious cookie you would ever taste. And the coolest part is that you can buy any of the cookies using crypto. Give it a shot, amigo! Okay Okay, We would not build the app in this tutorial but we would look at the core process to build same.

That said if you would love to play around with the cookie cart app code, you can clone the starter template branch and try to implement the functionality yourself.

Let's begin the integration.

First, create a button element that would trigger the payment

<!-- index.html -->
<button class="btn">Pay with Crypto</button>

Then, import the Lazerpay Checkout Script in the head of your index.html

<!-- index.html -->
<!-- Include the Lazerpay Checkout CDN Script-->
<script src="https://cdn.jsdelivr.net/gh/LazerPay-Finance/checkout-build@main/checkout%401.0.1/dist/index.min.js" type="text/javascript"></script>

Now in your app.js file, we can write the code that triggers the lazerpay checkout. We would need a reference to your button element like so:

 // app.js
const payBtn = document.querySelector(".btn");

Then, attach an event listener to the button element that calls the LazerCheckout function on a click event.

//app.js 
// Listen for click events on payBtn
payBtn.addEventListener("click", (e) => {
    e.preventDefault();

    // The CDN injects a `LazerCheckout` method
    // then, Invoke the lazerCheckout method
    LazerCheckout({
        name: "",
        email: "",
        amount: "2.00",
        key: "YOUR_PUBLIC_TEST_KEY",
        currency: "USD",
        onClose: (data) => {
          console.log("onClose:", data);
        },
        onSuccess: (data) => {
          console.log("onSuccess:", data);
        },
        onError: (data) => {
          console.log("onError:", data);
        }
      })
})

The LazerCheckout method accepts an object containing details about the transaction and a number of callback methods. Let's discuss them:

name - Customer name
email - Customer email
amount - Amount to charge the customer
key - Your lazerpay public key which you copied in earlier sections
currency - The currency amount is denominated in. Can be USD, GBP, EUR, AED or NGN.
onClose - The function called when the payment modal closes
onSuccess - The function called when a customer completes a transactions
onError - The function called when a transaction fails

You can explore more options and other ways to configure the transaction on the Lazerpay official docs page.

Now if we run our website or web app and click the button, we can see the lazerpay checkout was triggered successfully.

Step 4: Testing transactions

The next step after successfully integrating the checkout is to test the integration with dummy transactions.

To test transactions, you would need a non-custodial wallet (like MetaMask) to make test payments. There are various tutorials on the internet to learn how to setup MetaMask.

Then you also need a few test tokens. Currently, you can only test using the Tether token(USDT). So grab some USDT from the faucets.

Here's a clip of how I got some USDT from the binance faucet.

Now that you have some test tokens in your wallet, you can use that to initiate a payment transaction.

Here's a clip of how I tested my integration.

As seen above, the transaction has been completed successfully. You can verify that the amount has been received by logging into your Lazerpay Dashboard.

Note: When a payment is successful, Lazerpay sends a DEPOSIT_TRANSACTION webhook event to the webhook URL that you provide. It is highly recommended that you use webhooks to confirm the payment status before delivering value to your customers.

Click on Overview on the left navigation panel, you should see the transaction.

Step 5: Go Live

Once we are satisfied with the testing, we can go live.

To go live, go to your dashboard. Toggle the switch to the main environment.

Now, Under Settings, select the API and Webhooks tab. Copy your public main net keys.

Finally, copy the live/mainnet keys and replace the key option in the object passed to the LazerCheckout function.

payBtn.addEventListener("click", (e) => {
    LazerCheckout({
        ...
        key: "YOUR_PUBLIC_LIVE_KEY",
        ...     
})

And there you go! You are now ready to process real crypto transactions on your website!

Never ever expose your secret keys. Do not commit your secret keys to Git, or use them in client-side code.

How to verify if you went live successfully?

A quick way to tell is to click the pay button and check the pop up.

Testnet

Mainnet/Live

You also get more Stablecoins options when you go live.

Cookie Cart Demo

Code

Conclusion

Offering an option to receive payment in crypto unlocks a new set of superpowers for users of your website or web app. And daily as more people get onboarded to web3, getting paid in crypto would open up your app to tons of new demographics globally. In this article, we explored how to integrate a pay with crypto functionality using the Lazerpay Checkout tool in your website.

I hope you have found this article helpful in powering up your websites for a payment system that accepts crypto. Thanks for reading! Please share if it is helpful in any way! Cheers!

I'd love to connect with you via Twitter | GitHub