Tutorial on how to use the Nevermined Payments Protocol in a React app
Initializing the project
For this tutorial we will be using nextjs create our react application.
- Initialize the react project
npx create-next-app@latest
- Install the Nevermined payments library
yarn add @nevermined-io/payments
- Starting the development server
yarn dev
Initialize the payments library
In order to initialize the payments library we need to have the user login to Nevermined. This can
be achieved by calling the connect
method that will redirect the user to the Nevermined for Login
and once the user is returned to the app calling the init
method to finalize the initialization of
the payments library.
/app/page.tsx
'use client'
import { useEffect } from 'react'
import { Payments } from '@nevermined-io/payments'
export default function Home() {
const payments = new Payments({
returnUrl:
'https://docs.nevermined.app/docs/tutorials/integration/nextjs-react-payments#try-it-out',
environment: 'appTesting',
appId: 'app-docs',
version: 'v0.1.4',
})
const onLogin = () => {
payments.connect()
}
useEffect(() => {
payments.init()
}, [])
return (
<main>
<div>
<button onClick={onLogin}>Login</button>
</div>
</main>
)
}
Create a subscription
Once the app is initialized we can start interacting with the Nevermined Payments Protocol. Here is a example for creating a subscription
/app/page.tsx
...
async function createSubscription() {
if (payments.isLoggedIn) {
const { did } = await payments.createSubscription({
name: 'test subscription',
description: 'test',
price: 10000000n,
tokenAddress: '0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d',
duration: 30,
tags: ['test'],
})
}
return (
<main>
<div>
<button onClick={onLogin}>Login</button>
<button onClick={createSubscription}>Create Subscription</button>
</div>
</main>
)
}
Try it out
Full code
For the full nextjs example please check payments-nextjs-example
app/page.tsx
import { useEffect, useState, useRef } from 'react'
import { Payments } from '@nevermined-io/payments'
export default function PaymentsTutorial() {
const [isUserLoggedIn, setIsUserLoggedIn] = useState<boolean>(false)
const [creatingSubscription, setCreatingSubscription] = useState<boolean>(false)
const [did, setDid] = useState<string>('')
const payments = useRef(
new Payments({
returnUrl:
'https://docs.nevermined.app/docs/tutorials/integration/nextjs-react-payments#try-it-out',
environment: 'appTesting',
appId: 'app-docs',
version: 'v0.1.4',
}),
)
const onLogin = () => {
payments.current.connect()
}
const onLogout = () => {
payments.current.logout()
setIsUserLoggedIn(payments.current.isLoggedIn)
}
useEffect(() => {
payments.current.init()
}, [])
useEffect(() => {
if (payments.current.isLoggedIn) {
setIsUserLoggedIn(true)
}
}, [payments.current.isLoggedIn])
async function createSubscription() {
if (payments.current.isLoggedIn) {
setCreatingSubscription(true)
const { did } = await payments.current.createSubscription({
name: 'test subscription',
description: 'test',
price: 10000000n,
tokenAddress: '0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d',
duration: 30,
tags: ['test'],
})
setCreatingSubscription(false)
setDid(did)
}
}
return (
<main>
<div>
{!isUserLoggedIn && <button onClick={onLogin}>{'Log in'}</button>}
{isUserLoggedIn && <button onClick={onLogout}>{'Log out'}</button>}
<button onClick={createSubscription}>Create Subscription</button>
<p>
{creatingSubscription && did === '' ? (
'Creating Subscription, please wait a few seconds...'
) : (
<a href={`https://testing.nevermined.app/subscription/${did}`}>{did}</a>
)}
</p>
</div>
</main>
)
}
In the following link you can find the complete documentation of the library: payments.