Can I change the Event Listener on PayPal buttons to activate an easter egg and then bring it back to original later?

Question

I am trying to activate an easter egg on my website when someone types a specific amount to donate.

Is there an option to over-ride PayPal button for that? So if the user clicks on Pay With PayPal instead of the PayPal pop up he will get a custom event (opening Bootstrap Modal in my case). And then bring it back to normal if he types a regular amount.

First is it possible? And second, and maybe more important, is it fine by PayPal or they can view it as a security problem?

My code (the paypal part) looks like this:

<script src="https://www.paypal.com/sdk/js?client-id=CLIENT ID"></script>

<div id="paypal-button-container"></div>

<script>
paypal
  .Buttons({
    createOrder: function (data, actions) {
      return actions.order.create({
        purchase_units: [
          {
            amount: {
              value: document.querySelector("#donate-amount").value,
            },
          },
        ],
      });
    },
    onApprove: function (data, actions) {
      return actions.order.capture().then(function (details) {
        let submitForm = document.createElement('form');
        submitForm.method = "POST";
        submitForm.action = "/DonateSucess";
        document.body.appendChild(submitForm);
        submitForm.submit();
      });
    },
  })
  .render("#paypal-button-container"); // Display payment options on your web page

</script>

Answer 1

It's possible with validation using the onClick function and actions.disable() or .enable(), followed by whatever other logic you wish to trigger.

See the documentation at https://developer.paypal.com/docs/checkout/integration-features/validation/ for some examples