Add this code to your functions.php or snippet plugin.
The script selects all HTML elements with the class .donate using document.querySelectorAll(‘.donate‘). These elements are expected to be buttons designated for making donations.
The script reads the value of the data-donate attribute from the clicked button to determine how much the user wants to donate. If the attribute isn’t present, it defaults to €20.
Change the email and name fields according to your needs.
function custom_donate_button_script() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Find all the buttons with the class '.donate' in the document
var donateButtons = document.querySelectorAll('.donate');
// Iterate over each donate button
donateButtons.forEach(function(button) {
// Add click event listener to each donate button
button.addEventListener('click', function() {
// Get the donate amount from the button's data-donate attribute
var donateAmount = button.getAttribute('data-donate') || '20'; // Default to 20 if attribute is missing
// Create a new form element
var form = document.createElement('form');
form.action = 'https://www.paypal.com/donate';
form.method = 'post';
form.target = '_top';
// Set the form's innerHTML with dynamic amount based on the clicked button
form.innerHTML = `
<input type="hidden" name="business" value="[email protected]">
<input type="hidden" name="no_recurring" value="0">
<input type="hidden" name="item_name" value="STELP e. V.">
<input type="hidden" name="item_number" value="STELP Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="amount" value="${donateAmount}">
<img alt="" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif">
`;
// Append the form to the document body
document.body.appendChild(form);
// Submit the form
form.submit();
// Optionally, remove the form after submission
form.remove();
});
});
});
</script>
<?php
}
add_action('wp_footer', 'custom_donate_button_script');
example HTML;
<!-- Donation Buttons Example --> <button class="donate" data-donate="10">Donate €10</button> <button class="donate" data-donate="20">Donate €20</button> <button class="donate" data-donate="50">Donate €50</button> <button class="donate" data-donate="100">Donate €100</button>