How to Install CryptoCadet Pay Button in Shopify

Help
Written By Kevan Williams

Integrating the CryptoCadet pay button into your Shopify store allows you to accept cryptocurrency payments smoothly. This guide will walk you through the process of setting up the button directly within the product sections of your Shopify site.

Step 1: Access Your CryptoCadet Dashboard

  • Navigate to Build Section: Log into your CryptoCadet account and go to the build section to begin the setup process.

  • Shopify Beta Installation: Look for the Shopify beta installation instructions which are designed specifically for Shopify platforms.

Step 2: Create a Button Container in Shopify

  • Login to Shopify: Access your Shopify dashboard by logging into your account.

  • Select a Product: Go to the product section where you want to add the CryptoCadet pay button.

  • Edit HTML: In the product description area, click the show HTML icon to switch to HTML view.

  • Insert Div Container: Paste a div tag at the desired location above your product description and assign it an ID (e.g., id="button_container"). This ID will be used to anchor your CryptoCadet button.

<div id='button-container'></div>
/*------Rest of the product description goes below----*/

Step 3: Embed the CryptoCadet Script

  • Copy Script: Back in the CryptoCadet build section, copy the JavaScript script provided for Shopify integration.

  • Paste Script in Shopify: Insert the copied script below the newly created div tag in the HTML editor of your Shopify product page.

  <script type="module">

                  import { cryptoPayButton } from 'https://unpkg.com/@cryptocadet/crypto-pay-vanilla';
                   cryptoPayButton({
                     apiKey: 'YOUR_API_KEY',
                     productId:  'YOUR_PRODUCT_KEY',
                     containerSelector:  'button-container',
                     style: "width: 100%; margin-bottom: 2rem",
                     email: 'required',
                     shippingAddress: 'required',
                     label:  'BUTTON TEXT',
                     lang:'en'
             
                   });
             
                 </script>

Step 4: Configure Script Settings

  • API Key: Retrieve your free API key from the CryptoCadet settings and insert it into the script where indicated.

  • Product ID: If you haven’t already set up a product ID in CryptoCadet, create one. Otherwise, select an existing product ID and add it to the script.

  • Match Div ID: Ensure the div ID in the script matches the ID you assigned to your div container (button_container).

Step 5: Customize Button Appearance and Functionality

  • Style: Adjust the CSS within the script to match your Shopify theme. Pre-formatted styles are provided but can be modified to better fit your site’s design.

  • Email and Shipping Address: Decide whether to require email and shipping addresses based on your products. Insert these options into the script as needed.

  • Button Label: Customize the label of your button (e.g., “Pay with Crypto”).

  • Language Support: Specify the language for your button if needed, choosing from supported options like French, Arabic, Chinese, Spanish, Portuguese, and German.

Step 6: Save and Preview

  • Save Changes: After configuring all settings and ensuring everything is correctly set up, save your changes in Shopify.

  • Preview the Button: Preview your product page to see how the CryptoCadet pay button appears and functions. Verify that the language settings are correct if you have chosen a specific language.

Kevan Williams
Next

Partner Relations