'PayPal Button Replacement

Paypal offers a button with the following code:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="96FKD7W4CCMEE">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

I would prefer to use my own button instead of the paypal "buy now" button offered here. The code for the button I would like is:

<div style="background-color:#000000;color:#ffffff;" class="button"><p align="center" style="font-size:30px;">Purchase</p></div>

.button {
background-color:#64A9FD;
padding:20px;
width:200px;
cursor:pointer; 
opacity:0.8;
}

How can I substitute paypal's button for my own.

What I've Tried:

Nestling my button in between the form start and end tags - paypal's button still showed

Deleting the tag - the button didn't work at all

Deleting the "src=""" in the tag - the alternate text linked me to the destination but clicking the button did not

htmlformsbuttonpaypalhyperlink


Solution 1:[1]

Your button can be reconstructed into a link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=96FKD7W4CCMEE

How to find it: https://www.erienewsnow.com/story/41690386/how-to-get-a-paypal-button-url

Added to your code:

<div onclick="location.href='https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=96FKD7W4CCMEE';" class="button"><p align="center" style="font-size:30px;">Purchase</p></div>

Solution 2:[2]

You can also do this by jQuery. Use this code -

jQuery(document).ready(function(){
   jQuery('input[type="image"][name="submit"][alt]').replaceWith('<input type="submit" name="submit" id="paypal-btn" value="Buy Now" alt="PayPal - The safer, easier way to pay online!">');
});

and in your stylesheet.css put these css code for background image

#paypal-btn{background:url(images-path);
color:transparent;
}

Note: comment the above css code and add your css code given for button.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 nishant

Related Questions