Opaya PI (formerly sagepay) Integration woes

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

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

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

Code:

---

$('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.

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();
            }

---

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.

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.

Quote:

---

Originally Posted by 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.

---

actually, my pronoun is he.

best.

gotta play it safe nowadays tho?

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.

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 :-)

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

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:

Code:

---

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

Code:

---

///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

Code:

---

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

---

ok, so digging into the intricacies of javascript forms.... found out that the onsubmit fires before the action, so the call was being made to goto next page and was loading before the post data had returned to place into the session, so was never seen. quite hard to find during debug as when checking if the post page was getting the response, it of course was...

so just added a short time wait to the function

Code:

---

  function checkout(){
  setTimeout(() => {  document.forms["checkout_payment"].requestSubmit(); }, 1500);
 }

---

Happy to report had this up and running really well for a month now on 2 different sites and both the applepay express checkout button (auto account creaction etc), and the PI form are working well. I'll spend some time to get packaged up and will submit for upload.

Thank you! This will be useful for UK users.

Hello all,
Not sure if anybody using this in UK. Been having problems with Cardstream, and the gateway has recommended Opayo to try. Is it any good? On Cardstream it seems to be fine for months, then I have over a dozen cases of payment going through but no order. I have to push manually. No error logs, am certain its not zencart. That was last year, and maybe 6 months later, the pattern started again now.

So yes just seeing if worth trying Opayo or not, considering never had that trouble with Paypal Payment Pro in all those years. Thanks in advance.

Hi Calljj,

Well done on the Opayo Pi integration.

Have you got a version that we could try out on a test environment.

Would be good to try your version out.

Kind Regards,

Andy