How to Install CryptoCadet Pay Button in NextJS

Integrating the CryptoCadet pay button into a Next.js project involves a few additional steps compared to a typical React setup. This guide will help you navigate these differences and successfully set up the pay button in your Next.js application.

Step 1: Set Up Your Next.js Project

• Create Project: Use your preferred method to create a Next.js application. You can use npx create-next-app if you’re starting from scratch.

• Navigate: Open your code editor and cd into your project directory.

Step 2: Install Dependencies

• Dependency Installation: Run npm install to ensure all dependencies are up to date.

• Install CryptoCadet Package: Install the @cryptocadet/react-crypto-pay package.

npm install @cryptocadet/react-crypto-pay

Step 3: Create a Pay Button Component

• Create Component Folder: Inside your project's src folder, create a components directory.

• Add PayButton Component: Create a file named CryptoPayButton.jsx in the components folder and paste in the provided component code.

Step 4: Configure Component Props

• API Key: Retrieve your API key from the CryptoCadet settings and add it to the component.

• Product ID: If you haven’t already, create or use an existing product ID from your CryptoCadet account.

• Button Labeling and Styling:

  • Label the button as needed.

  • For styling, due to Next.js specifics, define a custom styles object directly in the component or import it from a styles module.

import {CryptoPayButton} from '@cryptocadet/react-crypto-pay'

               const ComponentName = () => {
               
                 return (
               
                  <CryptoPayButton 
                  apiKey='YOUR_API_KEY'
                  productId='YOUR_PRODUCT_ID'
                  label='BUTTON_TEXT'
                  style={customStyleObject}
                  email='required'
                  shippingAddress='required'
                   />
                      )
               }
               export default ComponentName;
               

Step 5: Implement Dynamic Imports

• Modify index.js:

  • Remove unnecessary code to clean up the file.

  • Use dynamic imports to load your CryptoPayButton component. This is particularly important in Next.js to handle server-side rendering properly.

 import dynamic from 'next/dynamic';

const CryptoPayButton = dynamic(() => import('../components/CryptoPayButton'), {
  ssr: false  
});

function HomePage() {
  return (
    <main>
      <CryptoPayButton />
    </main>
  );
}

export default HomePage;

Step 6: Testing and Validation

• Run Your Project: Use npm run dev or the appropriate command to start your application.

• Verify Functionality: Ensure that the CryptoCadet pay button appears and functions correctly, including the ability to trigger the payment portal.