How to Install CryptoCadet Pay Button in React

Integrating the CryptoCadet pay button into your React application offers a streamlined process for enabling cryptocurrency payments. This guide will walk you through the steps to install and configure the pay button within a React project.

Step 1: Preparation

• Visit Build Section: Navigate to app.ascendant.finance and locate the installation instructions for React in the build section.

• Project Setup: Ensure your project is set up, using tools like Vite or Create React App.

Step 2: Install Dependencies

• Open Code Editor: Use your preferred code editor, like VS Code.

• Install Package: Run the command to install the CryptoCadet pay button package as specified in the build section.

npm install @cryptocadet/react-crypto-pay

Step 3: Configuration in App.jsx

• Clear Default Code: Open App.jsx and clear any default template code if necessary.

• Import Crypto Pay Button:

import { CryptoPayButton } from '@crypto-cadet/pay-button';

Step 4: Setting Up Props

• API Key: Retrieve your API key from the CryptoCadet settings and include it in the component props.

• Product ID: Assign a unique product ID for each pay button if you're using multiple buttons.

• Button Label: Customize the button label.

 return (
    <>
      <CryptoPayButton 
      apiKey='YOUR_API_KEY'
      productId='YOUR_PRODUCT_ID'
      label='BUTTON_TEXT'
      style={null}
      email='required'
      shippingAddress={null}
      />
    </>
  )

Step 5: Optional Configurations

• Email and Shipping Address: Determine whether these fields are required by setting them to required or leave as an empty string for optional.

• Styling: React allows for overriding default styles. You can create a defaultStyles object and pass it through the style prop to customize the appearance.

Step 6: Launching Your Button

• Run Your Project: Start your application to see the pay button in action.

• Test: Ensure the button appears as expected and prompts the user for wallet connection and other required information.