How to Install CryptoCadet Pay Button in Squarespace

Integrating the CryptoCadet pay button on your Squarespace website allows you to offer cryptocurrency payments seamlessly. This step-by-step guide will demonstrate how to add the pay button, ensuring your setup is functional and stylish.

Step 1: Access CryptoCadet Build Settings

• Navigate: Log into app.ascendant.finance and go to the build section to find JavaScript integration options.

• API Key and Script: Obtain your free API key upon signup, which is necessary for setting up your button.

Step 2: Locate the Correct Section in Squarespace

• Inspect Element: Use your browser’s inspect element tool to identify the specific div where you want to place the button. Look for a div ID starting with 'block'.

• Copy Div ID: Note down or copy the div ID as it will be used to place your button correctly.

Step 3: Code Injection in Squarespace

• Open Squarespace Editor: Navigate to your site’s dashboard, go to "Pages", and locate the utility section for website tools.

• Code Injection Access: Click on "Code Injection" to access the areas where you can input custom scripts.

• Header Section: Paste the JavaScript script provided by CryptoCadet into the header section. This script includes your API key and product ID settings.

• Style: Don’t forget to add the stylesheet <link> tag for the button style.

<link href='https://unpkg.com/@cryptocadet/crypto-pay-vanilla@2.2.0/dist/style.css' rel='stylesheet'>
<script type="module">

                  import { cryptoPayButton } from 'https://unpkg.com/@cryptocadet/crypto-pay-vanilla@2.2.0';
                   cryptoPayButton({
                     apiKey: 'YOUR_API_KEY',
                     productId:  'YOUR_PRODUCT_KEY',
                     containerSelector:  'SOME_DIV_NAME',
                     style: null,
                     email: 'required',
                     shippingAddress: 'required',
                     label:  'BUTTON TEXT'
             
                   });
             
                 </script>
               

Step 4: Customize Button Settings

• Set Product ID: If you don’t have a product ID yet, create one with a name and price in the build section. For existing users, select an available product ID.

• Customize Appearance and Functionality:

  • Style: Modify the button's CSS directly if desired (e.g., changing the button color).

  • Email Requirement: Decide if you want to collect emails (required) or not (null).

  • Shipping Address: Include if necessary, especially for physical products.

Step 5: Insert Custom Styles (Optional)

• Style the Button: Above the script in the code injection area, insert any custom CSS needed to align with your site’s aesthetics.

• Label Customization: Adjust the button text to fit your site's design or call-to-action.

Step 6: Verify and Save Changes

• Check Placement: Ensure the script and styles are correctly entered and the button appears in the desired location on your live site.

• Save: Make sure all changes are saved and the site is refreshed to reflect these updates.

Step 7: Adding Multiple Buttons

• Duplicate Buttons: If you need more than one button, repeat the process for each new product or service, ensuring each has a unique product ID and possibly different styling.

Final Tips

• Double-Check IDs: Make sure all IDs and script details are accurate to avoid errors like misplaced buttons.

• Responsive Check: After installation, verify that the button functions correctly across different devices and browsers to ensure a smooth user experience.