ps_checkout [SOLVED] Duplicate buttons in checkout

[Catarina123]

 

Good afternoon, I have this problem, I have 3 payment methods, 3 buttons appear by default, and when I select the buttons they appear the same, what should I do?

Edited February 25 by Catarina123 (see edit history)

[Nickz]

  On 2/25/2025 at 10:57 AM, Catarina123 said:

3 buttons appear by default, and when I select the buttons they appear the same, what should I do?

Expand  

You mean you have 3 times the same Button? 
You need to tell us more.

Is it a virgen development, a reconstruct, an update issue?
is that the only issue?
What version/theme is it?

Edited February 25 by Nickz (see edit history)

[Catarina123]

  On 2/25/2025 at 11:08 AM, Nickz said:

Quer dizer que você tem 3 vezes o mesmo botão?
Você precisa nos contar mais.

É um desenvolvimento virgem, uma reconstrução, um problema de atualização?
Esse é o único problema?

Expand  

I want that if the customer clicks on pay pal, only the pay pal option, when clicking on bank transfer or card, the option to finalize appears. It's always been like this, I don't know how to change it. In other words, when clicking on the payment method, the button corresponding to that method should appear and it doesn't.

[Knowband Plugins]

  On 2/25/2025 at 11:11 AM, Catarina123 said:

when clicking on the payment method, the button corresponding to that method should appear and it doesn't.

Expand  

Most probably the theme issue. Have you checked with the theme support?

The theme does not hide the default "place order" button while PayPal is selected. 

 

Share the site URL?

[Catarina123]

  On 2/25/2025 at 11:50 AM, Knowband Plugins said:

Most probably the theme issue. Have you checked with the theme support?

The theme does not hide the default "place order" button while PayPal is selected. 

 

Share the site URL?

Expand  

 

I already did it. I added custom javascript, in module Custom code module by ST-themes.

document.addEventListener("DOMContentLoaded", function () {
    // Seleciona todas as opções de pagamento (radio buttons)
    const paymentOptions = document.querySelectorAll("input[name='payment-option']");

    // Mapeia os containers dos botões de pagamento
    const paymentContainers = {
        "payment-option-2": document.querySelector("#ps_checkout-paypal-buttons-container"), // PayPal
        "payment-option-3": document.querySelector(".ps_checkout-button[data-funding-source='card']"), // Cartão de Crédito
        "payment-option-5": document.querySelector("#payment-confirmation") // Transferência Bancária, MbWay ou Revolut
    };

    // Esconder todos os botões ao carregar a página
    function hideAllButtons() {
        Object.values(paymentContainers).forEach(container => {
            if (container) container.style.display = "none";
        });
    }

    // Esconder tudo no início
    hideAllButtons();

    // Evento para mostrar apenas o botão correto quando um método é selecionado
    paymentOptions.forEach(option => {
        option.addEventListener("change", function () {
            hideAllButtons(); // Esconde todos os botões primeiro

            // Mostra apenas o botão correspondente ao método de pagamento escolhido
            if (paymentContainers[this.id]) {
                paymentContainers[this.id].style.display = "block";
            }
        });
    });
});

 

[Knowband Plugins]

Great!!! 

Mark the thread as Solved.