[React] Accept credit card payment for your NFT Drop colllection using Paper.xyz

The product that we are building:

Before we get into the code, you’d need to:

0. Create a React project using either Next.js or React/Vite
1. Deploy a NFT Drop contract from Thirdweb. Learn how to deploy here
2. Create an account at Paper.xyz
3. Register your NFT Drop contract with Paper. Learn how to do it here.

Each contract registered with Paper has an associated “Paper Contract ID” (Note: it’s not the same as the contract address). Proceed to copy that value, we need it in our front-end.

const PAPER_CONTRACT_ID="********-****-****-****-************"

Once you have completed the step above, head to the Developer Dashboard and copy the API Secret Key. We’ll need this for our React app.

We do not want to expose this key to the front-end. So let’s create a file called .env.local at the root of your project then put this line in the file:

# Don't forget to replace the content with your actual key
PAPER_XYZ_API_KEY="********-****-****-****-************"

Install dependencies:

npm i @thirdweb-dev/react @thirdweb-dev/sdk ethers@^5 @paperxyz/react-client-sdk

Okay, let’s dig into the code:

:warning: If you implement Allowlist in your contract’s claim phrase: You must add Paper’s internal wallet addresses to the allowlist. Otherwise the mint transactions will fail and you would have to reach out to Paper via Discord so that they can help you refund your customers. Check out this link for more info: https://docs.withpaper.com/reference/restrict-calls-to-paperhttps://docs.withpaper.com/reference/restrict-calls-to-paper.