How to Install CryptoCadet Pay Button in Javascript

Integrating the CryptoCadet pay button into your website allows for a seamless cryptocurrency payment process. This guide simplifies the process of adding the button using pure JavaScript, suitable for various platforms including Shopify, Squarespace, and any HTML page.

Step 1: Access the Build Tab

• Location: In CryptoCadet, navigate to the Build tab to find script options tailored to different tech stacks.

• Selection: Most users will opt for the JavaScript option for its versatility across website editors

Step 2: Copy the Script Tag

• Action: Copy the provided JavaScript snippet. This script tag is designed for easy insertion into your site's code.

<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>
               

At the time of writing, the current version is 2.2.0. Please be sure to update the version to the latest.

Step 3: Insert the Script into Your HTML

• Placement: Paste the script tag into the HTML file where you wish to display the pay button.

• Example: For a basic HTML page, include the script tag within the body or head section as appropriate.

Step 4: Configure the Script Tag

• API Key: Replace the placeholder in the script with your actual API key, available in your CryptoCadet settings.

• Product Key: Use the unique identifier for your product as the product key in the script.

• Email and Shipping Address Options:

  • Set these to require (all lowercase) or null if you do not need to collect this information.

  • It's recommended to collect emails for sending purchase confirmations unless anonymity is a priority.

Step 5: Customizing the Button

• Label: Customize the button text (e.g., "Pay with Crypto").

• Container Selector: If you wish the button to appear within a specific div, assign an ID to that div and reference it in the container selector parameter.

Step 6: Apply Custom Styles (Optional)

• Styling: To apply the styles, add a style attribute within the head of the HTML. For standard styling, ensure the style parameter is set to match the provided version number.

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

Step 7: Apply Custom Styles (Optional)

• Styling: To alter the button's appearance, you can style attributes as a string within the style property of the CryptoPayButton.