javascript - Using the PayPal Donate SDK with my own HTML button - Stack Overflow

I've created a PayPal donation button using their Donate SDK, as documented here:

/

The resulting code looks like this:

<div id="donate-button-container">
<div id="donate-button"></div>
<script src=".js" charset="UTF-8"></script>
<script>
PayPal.Donation.Button({
env:'production',
hosted_button_id:'MY_ID_HERE',
image: {
src:'.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?

====

Edit: here is the rendered HTML generated by the SDK JavaScript:

<div id="donate-button-container">
<div id="donate-button">
<img src=".gif" id="donate-button" style="cursor: pointer;" alt="Donate with PayPal button">
</div>
</div>

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?

====

Edit: here is the rendered HTML generated by the SDK JavaScript:

<div id="donate-button-container">
<div id="donate-button">
<img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" id="donate-button" style="cursor: pointer;" alt="Donate with PayPal button">
</div>
</div>

• javascript
• html
• paypal

Share Improve this question Follow edited Jan 7 at 19:33 GermanKiwi asked Jan 6 at 23:43 GermanKiwiGermanKiwi 4766 bronze badges 5

• The answer would most probably be CSS: Cascading Style Sheets. You would probably get a better answer if you included the resulting markup and styling, and how you'd like it to differ – Phil Commented Jan 6 at 23:47
• 1 Have you seen this page at paypal? – dale landry Commented Jan 7 at 0:17
• @dalelandry I don't think that applies to the donate button – Phil Commented Jan 7 at 0:18
• @dale-landry unfortunately that doesn't apply to the Donate SDK (although I really wish it did!!) – GermanKiwi Commented Jan 7 at 14:21
• FYI looks like Paypal uses donate-button as the ID for the <img> so you should use something different – Phil Commented Jan 7 at 22:38

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

Here's an example of using CSS to completely replace the visual button

#my-donate-button {
  background-color: yellow;
  border: 2px solid orange;
  border-radius: .5rem;
  position: relative;
  padding: 1rem;
  font-weight: 600;
  
  &:hover {
    box-shadow: 0 0 4px 2px #ccc;
  }
    
  & img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    position: absolute;
  }
}

<div id="donate-button-container">
  <button type="button" id="my-donate-button">
    BIG CASH MONEY!
  </button>
</div>

<script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
<script>
PayPal.Donation.Button({
  env: 'sandbox',
  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('#my-donate-button');
</script>

Altering the Paypal <img> to be completely transparent hides it while still allowing it to be clicked. Absolutely positioning it to fill the containing element means it will adhere to the dimensions of that element.

You cannot use other HTML with the PayPal SDK.

Change the line

src:'https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif',

To point to a hosted URL of the image you want to use.