Opaya PI (formerly sagepay) Integration woes

[Calljj]

Thanks, yes, think they got around by using the radio buttons, of which i've already included along the lines of

$('form[name="checkout_payment"]').submit(function(e) {
            if($('#pmt-opayo_pi').is(':checked') || document.getElementById('pmt-opayo_pi').checked == true || (document.querySelector('#pmt-opayo_pi').getAttribute('type') == 'hidden')) {
                e.preventDefault();
                //alert("banana");
                           }
        });

but i think difference is that the opayo's js own file is looking at the submit event of the form (rather than a button click which i think square js looks at) so at the moment its being triggered without me actually having a chance to intercept it, using above code.

from squares zen code where it appears they are playing with the button call for square js code.

const cardButton = document.getElementById('card-button');
            if (document.querySelector("#checkoutOneSubmit")) {
                formButton = document.querySelector("#checkoutOneSubmit");
                zcLog2Console('found checkoutOneSubmit button!');
            } else {
                console.log('using standard paymentSubmit button');
                formButton = document.querySelector("#paymentSubmit");
            }

            cardButton.addEventListener('click', async function (event) {
                await handlePaymentMethodSubmission(event, card);
            });
            try {
                formButton.addEventListener('click', function (event) {
                    if ((document.querySelector('#pmt-square_webPay').checked) || (document.querySelector('#pmt-square_webPay').getAttribute('type') == 'hidden')) {
                        event.preventDefault();
                        jQuery("#card-button").click();
                    }
                });
            } catch(e){
                console.log('square is not going to work!');
                console.log('form button not found! removing square');
                document.querySelector('#card-container').remove();
                document.querySelector('#pmt-square_webPay').parentElement.remove();
            }

[Calljj]

digging into this a bit more, i'm seeing better what they have done by using a hidden button in the form, I'll see if i can manipulate it to my needs.

[Calljj]

still appears can't be done using opayos checkoutform, but could be done with own form. With their form uses the

addEventListener("submit"

which i cannot find a way of workign around. With the Square, its all based on click which is how they can play with the button.

[carlwhat]

digging into this a bit more, i'm seeing better what they have done by using a hidden button in the form, I'll see if i can manipulate it to my needs.

actually, my pronoun is he.

best.

[Calljj]

gotta play it safe nowadays tho?

[Calljj]

any idea how to overcome an event listner of submit in 3rd party code that attaches itself to the zen form?
I dont think i can removeeventlistener, at least had no luck in trying
also tried to clone (which removes all event listeners) without any joy...
much as it annoys me, my haven to concede defeat on this.

[Calljj]

2 days in clicking refresh and making changes.... think i've found a resolution.
The opayo pi drop in form allows for a seperate form to be specified in addidtion to the DIV to which its placed. the form doesn't have to be in the div, so can lay outisde of the zen form, but means that can use most of @carlwhats cool workaround, using a submit against a seperate form.
I'll get tidied up and uploaded and then sit back and watch you all tear me apart :-)

[Calljj]

arghh, back to square one, as can't get info from one form across to another,.

[Calljj]

Thought i'd carry on down the line of a seperate form to get over the sagepay.js eventlistener submit.

Button click initiates the form, which gets the post info that i want back from opayo, and sends it to a file as below:

   
<form name="opayo" id="opayo" target="output_frame" onsubmit="return checkout();"  action="/includes/modules/pages/checkout_payment/opayo.php"method="post" > 
    <button id="card-button" type="click" hidden></button></form>
</form>
<iframe name="output_frame" src="" id="output_frame" width="0" height="0">
</iframe>

in the /includes/modules/pages/checkout_payment/opayo.php there is just a line to grab the info and write to session, but the session value isn't being written.
Any ideas to overcome? As soon as session can be grabbed, module will be working as desired.

///get the post card identifier from opayo
$_SESSION['card-identifier'] =$_POST['card-identifier'];

the onsubmit="return checkout();" simply calls the requestsubmit method to proceed to confirmation page

 function checkout(){
  document.forms["checkout_payment"].requestSubmit();   
 }