Date:

Share:

Building a NFT Ticketing app with Paper and Next.js

Related Articles

NFT ticketing is a new method of selling tickets for various events such as concerts, sports games and festivals. In this system, cards are represented as NFTs (non-fungible tokens) which are unique digital assets that cannot be duplicated or exchanged for anything else.

When a participant purchases an NFT card, they are essentially purchasing a one-of-a-kind digital asset. These cards are embedded in blockchains such as Ethereum, making it easy to track ownership and transfer them securely between cardholders. This means that participants no longer have to worry about fake tickets or scams.

Why companies are moving towards NFT ticketing

NFT ticketing is gaining momentum among companies for several significant reasons, including:

  • Enhanced security: NFT ticketing offers a high level of security and authenticity that traditional paper or digital cards cannot match. Each NFT is unique and recorded on the blockchain, making it nearly impossible to counterfeit or duplicate.

  • Potential for increased income: NFTs are digital assets that can be bought, sold and traded on secondary markets, creating the potential for reselling tickets at higher prices.

  • Enhancing the fan experience: NFTs can provide access to exclusive content, such as backstage meet and greets or VIP lounges, and enhance the fan experience. In addition, fans can own their NFT cards as collectibles, providing an unforgettable experience.

  • Environmental sustainability: NFT ticketing can reduce environmental impact by eliminating the need for paper tickets, which is becoming increasingly important for environmentally conscious consumers.

Newspaper is a developer platform for NFT trading. This allows you to accept credit card payments for NFTs, allow users to “log in” to your app with just their email, and release NFTs at scale.

In this tutorial, we will build an NFT ticketing application with Newspaper. You can find the final code of the application Here.

This is what the app will look like:

Prerequisites

Before starting the guide make sure you have the latest version of the Node.js installed on your computer.

Next.js application setup

The first step is to configure a next.js application and install the required dependencies. To do this, you will need to run the command below in your terminal.

mkdir nft-ticketing && cd nft-ticketing && npx create-next-app .

The above command creates a new directory named nft-ticketing Then navigate to this directory and create a next.js app.

While creating the following app, you will be asked if you would like to use Tailwind, be sure to select “Yes” as we will be using Tailwind in this tutorial as well.

The smart contract

You can write and deploy a smart contract using Solidity or Thirdweb. thirdweb is a platform that provides a suite of tools for creators, artists and developers to easily build, launch and manage a Web3 project.

In this guide, we will do both. Using Solidity and thirdweb.

Use of thirdweb

If you prefer to use Solidity, you can safely skip this step. We can use thirdweb to create and deploy an NFT droplet. Contact thirdweb.com And connect your wallet.
Once logged in, navigate to the inquiry page below.

Here select the NFT Drop and click Deploy

Make sure you are on the Polygon Mumbai network. If you are not, you can update the mesh by clicking on the Metamask logo on the top right.

A sidebar will pop up, and you can add information about your NFT, i.e. image, name, symbol, description, royalties and many other fields.

Once you’ve filled it out, you can scroll down and click on “Deploy”. After the contract is deployed, you should see it on your third web dashboard.

Next, navigate to the NFT tab to upload the NFT metadata.

You can batch update multiple NFT metadata or a single upload. In this tutorial, we’ll use a single upload. Click the single upload button and a sidebar should appear. Fill in your NFT’s metadata and then click on ‘Lazy Mint NFT

Finally, navigate to “Claim Terms” by clicking the second option in the sidebar and create a new step for your NFT’s Claim Terms. Here, you can control when the NFTs go down, how much they go up, and more.

Once you have added your NFT information, click “Save Step”. This will trigger a transaction and once completed, you should be able to see a success message.

And that’s it! Copy your contract address from the dashboard as we will need it later.

Using Solidity

If you would like to use Solidity to create an NFT release contract, I would recommend checking out a great tutorial from QuickNode that will help you create an ERC721 contract and deploy it.

Registration of the contract

If you deployed your smart contract with Thirdweb or using Solidity and Remix manually, you now have the contract address in Polygon Mumbai. The next step is to register the contract Newspaper Dashboard.

Start by signing up for Newspaper. Once you have successfully created an account, go to Checkouts, navigate to Contracts and click on Register Contract. Fill in the required information. If you deployed with thirdweb, select “thirdweb” under contract type; Otherwise, select “Custom”. Finally, click “Register”.

After registering the contract, copy his ID as we will need it later.

the front

Now that we have completed the smart contract section, we can move on to the front end. The first step is to set up authentication.

validation

Authentication plays a vital role in web3 applications. There are various authentication kits such as WalletConnect, and RainbowKit that allow us to add authentication to our app and treatments, connect a wallet and sign messages. However, this post will use of paper Embedded wallet service.

of paper Studded wallet

of paper An embedded wallet service is a simple yet powerful wallet infrastructure that allows applications to create, manage and control their users’ wallets. It is quite different from other wallet services because

  • 💬 Incredibly simple UX: No passwords, jargon or downloads.

  • 🎉 Reproducible: Users can always access their wallets on other authenticated devices.

  • 🔐 Expandable: Email login, social login and next confirmation.

  • 💸 without gas: Users do not need any crypto to interact with the blockchain.

  • 😌 They are not custodial: Private keys cannot be recovered by Paper or any Paper key without user authentication. The sole owner of the wallet is your end user

On Newspaper Dashboard, under Embedded Wallets, click on Authentication Settings and fill in your app details. Then click Save.

Copy the client ID as we will need it later.

Then, in your terminal run the following command to install of paper JavaScript SDK Embedded Wallet Service.

yarn add @paperxyz/embedded-wallet-service-sdk

Then, remove everything inside pages/index.jsx And instead add the following code to it.

import { PaperEmbeddedWalletSdk } from "@paperxyz/embedded-wallet-service-sdk";
import React, { useEffect, useState } from "react";

export default function Home() {
  const [paper, setPaper] = useState();

  useEffect(() => {
    const paper = new PaperEmbeddedWalletSdk({
      clientId: "YOUR_CLIENT_ID",
      chain: "Mumbai",
    });
    setPaper(paper);
  }, []);

  return (
    <div className="m-10">
      <button
        className="bg-blue-400 text-white p-2 rounded-md "
        onClick={() => paper.auth.loginWithPaperModal()}
      >
        Authenticate
      </button>
    </div>
  );
}

In the above section, we import the Newspaper SDK, initialize it with our API key and then in the return function, call loginWithPaperModal One click method.

Be sure to replace YOUR_CLIENT_IDwith your customer ID that you copied earlier from the Newspaper Dashboard.

Save the file, navigate to your browser and open your app on localhost (be sure to start the Next.js development server by running npm run dev).

Click the Verify button, and you should be able to see a modal from Newspaper An SDK that will allow users to log into our app. The good part is that users can easily register with their email or one account and Newspaper Create a wallet for them automatically.

The SDKs support many methods that this guide will not cover, but you can refer to them Here.

NFT Minting

Now that we have completed the validation, we can move on to the NFT minting part.

First, we need to create a link to the shareable checkout, to do this add the following function inside the pages/index.jsx

  const createCheckoutLink = () => {
    const options = {
      method: "POST",
      headers: {
        accept: "application/json",
        "content-type": "application/json",
        Authorization: "Bearer YOUR_API_KEY",
      },
      body: JSON.stringify({
        contractId: "YOUR_CONTRACT_ID",
        title: "Image Dragon is back!",
        description: "The multi-platinum, Grammy-winning band Imagine Dragons...",
        imageUrl: "https://texxandthecity.com/wp-content/uploads/2022/06/unnamed-1.jpg",
        limitPerTransaction: 5,
        redirectAfterPayment: false,
        mintMethod: {
          name: "claimTo",
          args: { _to: "$WALLET", _quantity: "$QUANTITY", _tokenId: 0 },
          payment: { currency: "MATIC", value: "0.001 * $QUANTITY" },
        },
        hideNativeMint: false,
        hidePaperWallet: false,
        hideExternalWallet: false,
        hidePayWithCard: false,
        hidePayWithCrypto: false,
        hidePayWithIdeal: false,
        sendEmailOnTransferSucceeded: true,
        brandDarkMode: false,
        brandButtonShape: "full",
        brandColorScheme: "blue",
      }),
    };

    fetch(
      "https://withpaper.com/api/2022-08-12/shareable-checkout-link",
      options
    )
      .then((response) => response.json())
      .then((response) => {
        const link = JSON.parse(response.data.checkoutUrl);
        openCheckout(response.data.checkoutUrl);
      })
      .catch((err) => console.error(err));
  };

  const openCheckout = (link) =>
    renderPaperCheckoutLink({
      checkoutLinkUrl: `${link}`,
    });

In the code above, we use Newspaper API to create a link to the checkout. God createCheckoutLink The function sends a POST request to Newspaper API with parameters such as contract ID, title, description, image URL, and payment options.

God openCheckout The function takes the payment link returned by the API and uses renderPaperCheckoutLink function to display it.

Once the link is created, users can click on it to complete the payment process.

Please make sure to replace the contract ID and API key in the code with your own values.

You can also add the following button to call the createCheckoutLink function.

 

      <button
        className="bg-red-400 text-white p-2 rounded-md ml-5 "
        onClick={() => createCheckoutLink()}
      >
        Checkout
      </button>

Save the file and click the Checkout button in your app. This will open a sidebar using the Newspaper SDK, which allows users to purchase NFT cards.

Now that you understand the process of creating an NFT ticket app, we can update the heroes section to an event page, specifically for an Imagine Dragons concert. Replace the following code in your component’s return function

  return (
    <div class="relative pt-48 pb-12 bg-black xl:pt-60 sm:pb-16 lg:pb-32 xl:pb-48 2xl:pb-56">
      <div class="absolute inset-0">
        <img
          class="object-cover w-full h-full opacity-40"
          src="https://images.hdqwalls.com/wallpapers/imagine-dragons-2017-ib.jpg"
          alt=""
        />
      </div>
      <div class="relative">
        <div class="px-6 mx-auto sm:px-8 lg:px-12 max-w-7xl">
          <div class="w-full lg:w-2/3 xl:w-1/2">
            <h1 class="font-sans text-base font-normal tracking-tight text-white text-opacity-70">
              Join the thousands of fans who will be singing and dancing along to the music
            </h1>
            <p class="mt-6 tracking-tighter text-white">
              <span class="font-sans font-normal text-7xl">Image Dragon</span>
              <br />
              <span class="font-serif italic font-normal text-8xl">
                is back!
              </span>
            </p>
            <p class="mt-12 font-sans text-base font-normal leading-7 text-white text-opacity-70">
              The multi-platinum, Grammy-winning band Imagine Dragons is known for their high-energy performances, hit songs, and impressive stage presence. From "Radioactive" to "Believer," their music has been topping charts and entertaining fans all around the world.
            </p>
            <div class="flex items-center mt-5 space-x-3 sm:space-x-4">
              <button
                onClick={() => createCheckoutLink()}
                class=" inline-flexitems-center justify-center px-5 py-2 font-sans text-base font-semibold transition-all duration-200 border-2 border-transparent rounded-full sm:leading-8 bg-white sm:text-lg text-black hover:bg-opacity-90"
              >
                Book Tickets
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

Save the file, and this is what your application should look like:

What next?

So, you’ve made it this far! That’s awesome and it tells me you’re passionate about creating Web3 apps. This guide was just to help you get started, now I encourage you to make it a real world application. Don’t be afraid to be creative and have fun with it!

Summary

That’s all for this article. I hope you found it useful. If you need any help, feel free to leave a comment or send me a DM Twitter.

Let’s connect Twitter and LinkedIn.

👋 Thanks for reading! See you next time.

Source

Popular Articles