Paypal Donation Page from a Cwicly button

Hello!

I’m struggling to figure out how I can call the PayPal donation page functions from a Cwicly button.
I’m not too keen on using the default script provided by PayPal since it will make formatting and updates a pain. I’d rather just trigger it from a Cwicly button for better compatibility with the rest of the site.

I’ve went through a few iterations and got some interesting results, but none of the results opened the separate PayPal page to make the donation.

Here is the sample code provided by PayPal:

<div id="donate-button-container">
<div id="donate-button"></div>
<script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
<script>
PayPal.Donation.Button({
env:'production',
hosted_button_id:'*********', //Censored
image: {
src:'https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif',
alt:'Donate with PayPal button',
title:'PayPal - The safer, easier way to pay online!',
}
}).render('#donate-button');
</script>
</div>

So by my thought process, I’ve trimmed out all of the HTML and added just the JS function to a “Click” interaction on my button, also removing the “image:”, since that’s replaced with the Cwicly button.
I’ve also sourced the donation SDK in a code block on the page, so that is taken care of as well.

In the end, I’ve got a code block on my page that renders nothing and just holds the SDK source:

<script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>

Then I’ve got my button, with the id=“donation-button”, which has this custom JS inserted into it as an interaction:

PayPal.Donation.Button({
env:'production',
hosted_button_id:'**********' //Censored
});

I’m assuming this would call a function from the SDK, but that doesn’t appear to be what’s happening. PayPal’s docs don’t have much information on how this is supposed to work, they just explain that the code they provide works and to add it to the site.

Any help or pointers would be much appreciated!

The render method is what actually creates the button in the original script. It essentially outputs the button using the information you supply to the Paypal.Donation.Button constructor into the element specified via the method argument (i.e. #donate-button).

In order to completely use your own UI, you will have to examine exactly what the output from the original script is (the contents of the donate-button div) and then replicate that in Cwicly. I don’t have time now to do that but it should be reasonably straightforward.

Important note: There is a risk in doing this as at any point Paypal may change their SDK, that would result in your code no longer working.

This!

It would probably be easier to maintain/fix button styling than fixing its functionality if the internals of the SDK change and you’re left with a broken button.

Thanks everyone!

I managed to at least get it to open the window, but I must have not supplied it the arguments correctly, because it said my donation page was broken :upside_down_face:

I’ve come up with a new idea that I’ll use instead. They have an option to use a sharable link instead of a button, so I’ll just use the URL to open the page in a new window instead. Should be much simpler and easily updatable.