Payment module shows cloned payment confirmation button

[Geronimo2012]

Hello,

I installed a payment module to handle iDeal payments from Paypro.
When selecting the payment provider an additional select is shown which allows selection of a specific bank.

When I select another provider I get TWO payment confirmation buttons:

This is caused because the javascript the PayPro provider added creates a clone of button 1.
Their idea was to display and hide the buttons, according to selection.

I don't think this is a good way to handle this, and its broken between Prestashop versions
My question is: what is the best way for a payment module to make the payment confirmation button enabled or disabled?
Is that adding a hook to TermsAndConditions? Something else?

Regards, Jeroen

See code below:

    docReady(function() {
        var listener = function(e) {
            var form = document.getElementById('pay-with-' + e.target.id + '-form');
            if (form) {
                var method = form.querySelector('input[name="method"]');
                isIdeal = method && method.value === 'ideal'
                console.log('isIdeal: ' + e.target.id);
            }

            handleIdealButton();
        };

        document.querySelectorAll('input[name="payment-option"]').forEach((paymentOptionInput) => {
            paymentOptionInput.onchange = listener;
        });

        // Add a payment confirmation clone so we can disable it when there is no ideal issuer selected
        paymentConfirmation = document.getElementById('payment-confirmation');
        paymentConfirmationClone = paymentConfirmation.cloneNode(true);
        paymentConfirmationClone.id = 'payment-confirmation-clone';
        paymentConfirmationClone.style.display = 'none';
        paymentConfirmation.parentNode.appendChild(paymentConfirmationClone);
    });

    function onIssuerChange() {
        console.log('issuer change: ' + document.getElementsByName('paypro_ideal_issuer')[0].value + ', ' + document.getElementById('paypro_ideal_issuer').value);
        document.getElementsByName('paypro_ideal_issuer')[0].value = document.getElementById('paypro_ideal_issuer').value;
        handleIdealButton();
    }

    function handleIdealButton() {
        var issuer = document.getElementsByName('paypro_ideal_issuer')[0].value;
        console.log('issuer: ' + issuer);

        if (isIdeal && issuer === '') {
            // Hide original button and show clone
            console.log('Hide original button and show clone');
            paymentConfirmation.setAttribute('style', 'visibility: hidden; height: 0;');
            paymentConfirmationClone.style.display = 'block';
        } else {
            // Hide clone and show original
            console.log('Hide clone and show original');
            paymentConfirmation.setAttribute('style', 'visibility: visible; height: auto;');
            paymentConfirmationClone.setAttribute('style', 'display: none;');
            //paymentConfirmationClone.style.display = 'none';
        }
    }

 

[ComGrafPL]

Have you spoked with a module developer?

[Geronimo2012]

9 minutes ago, ComGrafPL said:

Have you spoked with a module developer?

I'm trying to contact them, was trying to fix it in the mean time myself.

[Geronimo2012]

1 hour ago, Geronimo2012 said:

I'm trying to contact them, was trying to fix it in the mean time myself.

For now I work around it by hiding the button to prevent mistakes until someone chooses the specific Bank for the payment.
So terms and conditions enable and disable the button,
the adjusted PayPro code shows/hides the button.
Poor mans solution.....

[Geronimo2012]

Is there any recommended way of working for payment modules to enable or disable the payment-confirmation button?

Any pointers would help either me or PayPro to solve this.

 

Thanks!

[PayPro]

Hello Jeroen,

We couldn't find a way to make this work with our current way reliably, since to our knowledge there is no way to hook into the enabling/disabling of the Order button. If there is we would really like to know!

However we have been working on another solution that works consistent with 1.7.x, 8.0 and 8.1. You can have a look at https://github.com/paypronl/prestashop-payments-plugin/pull/14
 

We hope to be able to release a new version soon, but we probably want to do some more work on the plugin. For now you could use this branch.

If you have any more questions, feel free to contact us again at [email protected]

PayPro

[Geronimo2012]

On 2/28/2024 at 3:39 PM, PayPro said:

Hello Jeroen,

We couldn't find a way to make this work with our current way reliably, since to our knowledge there is no way to hook into the enabling/disabling of the Order button. If there is we would really like to know!

However we have been working on another solution that works consistent with 1.7.x, 8.0 and 8.1. You can have a look at https://github.com/paypronl/prestashop-payments-plugin/pull/14
 

We hope to be able to release a new version soon, but we probably want to do some more work on the plugin. For now you could use this branch.

If you have any more questions, feel free to contact us again at [email protected]

PayPro

Thanks, this works for me