Skip to main content

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.

  1. Initialize the react project
npx create-next-app@latest
  1. Install the Nevermined payments library
yarn add @nevermined-io/payments
  1. 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.