Html Question posted in
Some basic documentation can be found here.

Using the PayPal Donate SDK with my own HTML button

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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search