PayPal Button Replacement

Question

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

Answer 1

Give the div an ID of for example mySubmit, remove the image since it is named "submit" which will block submission via script (unless you CLICK it) and do

window.addEventListener('DOMContentLoaded', () => {
  document.getElementById("mySubmit").addEventListener('click', (e) => {
    document.querySelector('form').submit();
  });
});

assuming the paypal form is the first on the page.

Fiddle

IF paypal INSISTS on having a button called submit, you can try hiding the form, change the image to a submit button and use

window.addEventListener('DOMContentLoaded', () => {
  document.getElementById("mySubmit").addEventListener('click', (e) => {
    document.querySelector('[name=submit]').click();
  });
});

where the querySelector will take the first element named submit on the page