I’ve created a PayPal donation button using their Donate SDK, as documented here:
https://developer.paypal.com/sdk/donate/
The resulting code looks like this:
<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:'MY_ID_HERE',
image: {
src:'https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif',
alt:'Donate with PayPal button',
}
}).render('#donate-button');
</script>
</div>
When the button is clicked, it opens the donation page in a nice pop-up window, which I really like.
However, this solution uses a small, low-quality GIF image for the button, and I’d prefer to use my own HTML button instead, which I can style to match my website – it would look like this:
<div class="button paypal">Donate with PayPal</div>
However, I have no clue how to replace the GIF image within the provided JavaScript, with my own button.
Can someone kindly help me out here? Is it even possible? Maybe using some kind of JS “on click” action that will cause the PayPal popup window to appear?