Opaya PI (formerly sagepay) Integration woes

[Calljj]

Hi all,

wonder if some of the guru's might be able to shed some light.

currently writing an Opayo pi (with applepay express checkout) module for zen (will place in downloads for all once i've sorted this niggle).
The module and its process of taking payments etc is all sorted and working fine.
The issue is linked to the the checkout_payment form on the checkout_payment page.

The opayo pi pulls in javascript and and creates the card entry area, within a specified DIV on the payment page fine.
In this opayo_pi javascript it has a event listener for the click of a form that its DIV resides in.
(of note the name of form that opayo pi references to can also be changed)
Going through the checkout process, if selecting this opayo_pi as method of payment using the radio button etc, then everything works fine.
The problem occurs if the store has other payment methods available, say paypal and bank transfer, then if selecting one of these and clicking the continue button, the opayo_pi javascript event still fires, highlights issues that none of the card details are filled in, and prevents user moving forward with their alternative choice of payment.

i've tried different avenues of thought..

stop bubbling of event - the opayo_pi event sits beneath the zen cart click event, but i've yet to find a method to implement this sucessfully.

change the form name to which opayo script attache its event to, then use javascript onchange to identify which radio buttonselected and then rename the form according to payment method. the form renames successully but opayo_pi still fires event on click.

I could have a sperate form, with a seperate button, for the opayo pi, but then would the discount/gv functionality on that page work as all appears within a single form at present.

Looked at the squarepay module but this doesn't seem to have the same issue as opayo in that it doesn't appear to have the eventlistener within its imported script.

any ideas on how to stop the opayo pi event firing when a different payment method is selected?

thanks in advance

[swguy]

Take a look at the Square module - they had to deal with this issue too.

[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,.