connect webpage button with external CRM donation plugin

I am building an event page to collect registrations and donations to the event, using the Kindful fundraising platform (https://theshalomcenter.org/fortyfest). I can use code blocks to put Kindful buttons on the page that connect to donation plug-ins -- these lead to pop-up donation windows that collect the donation without the user leaving the page, which is our desired behavior. However, the button styling that comes from Kindful is not what we want, and they provide information on how to use a code block to customize Squarespace's native buttons so that they will run the plugin that pops up the donation window. 

However, I cannot get that to work. I've tried multiple different variations of what I thought was the correct button ID to insert in Kindful's provided code to make this happen, but nothing works. 

(On our page in progress linked here, you can see first a set of Squarespace buttons, all the same color that don't link to anything. Then there are a series of multi-color buttons that work -- these are the Kindful buttons that bring up the donation plugins. Then there is a horizontal line, below which there is a non-functional code block where I was trying to have a Squarespace button that replicates the Kindful behavior.)

I'm completely stalled on this and would appreciate any help!

------------

Here are the instructions from Kindful on how to handle the code block:

https://support.kindful.com/hc/en-us/articles/115004229767-Install-the-Kindful-Donation-Plugin-on-Squarespace

@NoPlanetB Try adding the code below inside a code block:

<a class="kindful-donate-btn kindful-btn-12d38601-76a2-4850-a506-646c592949e2 sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" id="kindful-donate-btn-12d38601-76a2-4850-a506-646c592949e2" href="#!" >$40/month</a>

Then add the code below under Settings > Developer Tools > Code Injection > Header

<script src="https://shalomcenter-bloom.kindful.com/embeds/12d38601-76a2-4850-a506-646c592949e2/init.js?type=button" data-embed-id="12d38601-76a2-4850-a506-646c592949e2" data-lookup-type="jquery-selector" data-lookup-value="#kindful-donate-btn-12d38601-76a2-4850-a506-646c592949e2" data-styles-off="true"></script>

Let me know how it goes. Thanks!

@Lesum Thanks for the offer of help!

I've added the code. It gives me button on the page, but no functionality.

I should add that that the reason I was trying to get the functionality into the native Squarespace buttons was for a consistency of look. With the existing Squarespace buttons in the upper sections, the buttons are all the same size, regardless of the size of the text inside them.

We would actually be equally happy if we could style the Kindful buttons to be consistent in size and aligned nicely. My CSS skills are too minimal AND rusty too think that through on my own, but is that something that could be accomplished with a little custom CSS? 

@NoPlanetB I tested the button using the modified code on a website, and it appeared as a native Squarespace button along with the intended functionality. I do notice a new button on your page. But it seems that the exact code I outlined in the comment is not present.

We can adjust button styles to maintain a consistent appearance. In that case, the code for styling needs to be altered for each individual button.

Thanks for sticking with me. I double checked the code and it looks like I did enter it as you provided it. (I even had Chat GPT check it to make sure my entries were identical to what I copied from your comment. 🙃)

See screenshots for code as entered. 

@NoPlanetB Sorry I was referring to the first button without styles and completely missed the last button you added. Can you try adding the script within the same code block as the one you added under Code Injection previously? If it's still not working we can try customizing the buttons with CSS.

The last button added is actually what was added with the code you provided. 

The button without styles previously did have styles, like the different colored ones below it -- those are the buttons from Kindful, and they do work with the code I put into the page in the Squarespace code block. (In fact, I was actually wondering if maybe the code-injection code broke that button that now has no styles.)

I'm a bit confused, I'm not sure I understood your instructions of which script to add where.

(also, thank you so much for helping me in real time, but I have to step away from the computer. I will be checking back over the next hours and the weekend! But my next replies won't be coming as quickly.)

@NoPlanetB Sorry about the confusion. I meant to add the entire code below inside a code block:

<a class="kindful-donate-btn kindful-btn-12d38601-76a2-4850-a506-646c592949e2 sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" id="kindful-donate-btn-12d38601-76a2-4850-a506-646c592949e2" href="#!" >$40/month</a>

<script src="https://shalomcenter-bloom.kindful.com/embeds/12d38601-76a2-4850-a506-646c592949e2/init.js?type=button" data-embed-id="12d38601-76a2-4850-a506-646c592949e2" data-lookup-type="jquery-selector" data-lookup-value="#kindful-donate-btn-12d38601-76a2-4850-a506-646c592949e2" data-styles-off="true"></script>

Hi again @Lesum

I tried putting that last code into a code block in the page and I got the same result - a button that looks like our Squarespace button, but no functionality. 

I also experimented with removing the code I had put in the code-injection section, and the result was that the Kindful-provided button that had lost its styling got it back -- ti looks like having that code in the code-injection section breaks the Kindful button styling.

So, going back to where I started, I have two options: #1 is to keep the Kindful-provided buttions (the ones in blue/pink/purple/green on the page now) and work on styling them better with CSS. They function properly, they just don't look great.  Option #2 is to keep our Squarespace buttons (the upper set in yellow/blue) which have our Squarespace styling, and try to figure out how to get them to have the functionality we need (to run the script to pop up the Kindful payment plugin).

At this point it seems option #2 is too complicated (especially within the time I have to complete this page), so I would be so grateful if you or anyone else could help me with styling the second set of buttons so they are all the same size and nicely aligned and spaced (I am having trouble getting them evenly spaced.). In this case I would also need to insert a 5th button that has a similar look to the Kindful buttons but would simply link to another page on our Squarespace site. 

Appreciate your help!!