Crossmint : Lofi.land Embedded Checkout Demo

Add Crossmint’s custom embedded checkout, a fully customizable iframe seamlessly integrated onto your website.

Experience the live demo: https://lofi-land.demos-crossmint.com/

🛠️ Getting Started

Follow the setup and installation instructions below to run this demo on your local machine.

📋 Prerequisites

• Node.js: If not installed, download from the Node.js official website.

• Yarn: If not installed, run the following command in your terminal.

  npm install -g yarn

• Crossmint Keys: Obtain these from the Crossmint Dev Console after deploying a collection - https://docs.crossmint.com/docs/create-an-nft-collection

  • Collection ID
  • Project ID

• Dynamic.xyz Environment ID: For authentication. Configure it to support ETH Testnet. Once you have your environment ID setup, navigate to the EVM configurations page in the Dynamic dashboard.

  

💾 Setup & Installation

1. **Clone the Repository **

   git clone https://github.com/divya-ranjn/lofi-land-embedded-demo.git

2. Install the required packages

   First, navigate to the cloned repository & then install dependencies.

   cd lofi.land
   yarn install

3. 🔐 Setting the Environment Variables

   Set up environment variables with the relevant keys.

   You can copy the sample.env file and name the new one .env. Then fill in your values:

   REACT_APP_COLLECTIONID=YOUR_CROSSMINT_COLLECTION_ID or use 6c3b6164-f6cc-42a1-89b8-df942da0fe7a for testing
   REACT_APP_PROJECTID=YOUR_CROSSMINT_PROJECT_ID or use 3eb7d488-1374-4fc8-b0be-ebe6be8a8e2f for testing
   REACT_APP_ENVIRONMENT=YOUR_CROSSMINT_ENVIRONMENT
   REACT_APP_DYNAMIC_ID=YOUR_DYNAMIC_XYZ_ENVIRONMENT_ID
   GENERATE_SOURCEMAP=false

4. ▶️ Running the Demo

   yarn start

   If you followed everything correctly, you should be able to view and experience the demo on your browser.

🆘 Support

If you run into issues or have suggestions, we're here to help:

• Docs: docs.crossmint.com
• Discord: Join Crossmint on Discord
• Twitter: @crossmint