Unable to Hide Useless Payment Method Types and JS not working on Safari Browser

[Neeraj5514]

Hi,

I am using below code by which I want to hide "Bank", "Cash App Pay" and "1 click checkout with link" on stripe payment gateway form and other issue is none of below code is working on safari whereas its working fine on FF and Chrome. Any feedback/Response would be appreciated:-

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
// Auto-select subscription period from parent URL
document.addEventListener('DOMContentLoaded', function () {
    const validPeriods = ["one-time", "daily", "week", "month", "quarter", "year"];
    const parentURL = window.parent.location.href;
    const parentUrlObj = new URL(parentURL);
    const subscriptionPeriod = parentUrlObj.searchParams.get("payment_type");

    if (!subscriptionPeriod || !validPeriods.includes(subscriptionPeriod)) return;

    const options = document.querySelectorAll('input[name="subscriptionPeriod"]');
    if (!options.length) return;

    const optionToSelect = Array.from(options).find(item => item.value === subscriptionPeriod);
    if (optionToSelect) optionToSelect.click();
});

// Show/hide "Friends in Faith" options based on amount and subscription
function updateFriendsInFaithSection() {
    const monthlyBtn = document.getElementById('subscriptionPeriod_1');
    const oneTimeBtn = document.getElementById('subscriptionPeriod_0');
    const otherAmountInput = document.querySelector('#amount-custom');
    const friendsInFaithSection = document.querySelector('.givewp-fields-radio-please_select_a_friend_in_faith_benefit');

    const option10_1 = document.getElementById('please_select_a_friend_in_faith_benefit_0');
    const option10_2 = document.getElementById('please_select_a_friend_in_faith_benefit_1');
    const option20 = document.getElementById('please_select_a_friend_in_faith_benefit_2');
    const optionAll = document.getElementById('please_select_a_friend_in_faith_benefit_4');

    const hideOption = option => option && (option.closest('div').style.display = 'none');
    const showOption = option => option && (option.closest('div').style.display = 'block');

    function getSelectedAmount() {
        const rawValue = otherAmountInput?.value?.trim() || "";
        const cleanedValue = rawValue.replace(/[^0-9.]/g, '');
        const otherAmountValue = parseFloat(cleanedValue) || 0;

        if (!isNaN(otherAmountValue) && otherAmountValue > 0) return otherAmountValue;

        const selectedBtn = document.querySelector('.givewp-fields-amount__level--selected');
        return selectedBtn && selectedBtn.innerText.includes('$')
            ? parseFloat(selectedBtn.innerText.replace('$', '').trim()) || 0
            : 0;
    }

    if (!friendsInFaithSection) return;

    [option10_1, option10_2, option20, optionAll].forEach(hideOption);
    friendsInFaithSection.style.display = 'none';

    if (oneTimeBtn?.checked) return;

    const amount = getSelectedAmount();

    if (monthlyBtn?.checked) {
        if (amount >= 10 && amount < 20) {
            friendsInFaithSection.style.display = 'block';
            [option10_1, option10_2, optionAll].forEach(showOption);
        } else if (amount >= 20) {
            friendsInFaithSection.style.display = 'block';
            [option20, optionAll].forEach(showOption);
        }
    }
}

// Wait for form fields before triggering logic
function waitForElementsToExist(callback, retries = 20) {
    const selectors = [
        '#subscriptionPeriod_1',
        '#subscriptionPeriod_0',
        '.givewp-fields-amount__level',
        '#amount-custom',
        '.givewp-fields-radio-please_select_a_friend_in_faith_benefit'
    ];

    if (selectors.every(sel => document.querySelector(sel))) {
        callback();
    } else if (retries > 0) {
        setTimeout(() => waitForElementsToExist(callback, retries - 1), 300);
    }
}

document.addEventListener('DOMContentLoaded', () => {
    waitForElementsToExist(() => {
        updateFriendsInFaithSection();

        document.querySelectorAll('.givewp-fields-amount__level').forEach(btn =>
            btn.addEventListener('click', () => setTimeout(updateFriendsInFaithSection, 100))
        );

        document.querySelector('#amount-custom')?.addEventListener('input', () =>
            setTimeout(updateFriendsInFaithSection, 100)
        );

        ['#subscriptionPeriod_0', '#subscriptionPeriod_1'].forEach(id => {
            document.querySelector(id)?.addEventListener('change', updateFriendsInFaithSection);
        });
    });
});

// Additional DOM tweaks
jQuery(document).ready(function ($) {
    var donationType = '<?php echo $defaultAmount; ?>';

    $('.givewp-fields-text-state label > span.givewp-fields__label-text').hide();
    $('#amount-custom').attr('placeholder', 'Other Amount');
    $('.givewp-fields-text-state input[type="text"]').attr('placeholder', 'State');

    const $countrySelect = $('.givewp-fields-select-country select');
    if ($countrySelect.find('option[value=""]').length === 0) {
        $countrySelect.prepend('<option value="" selected disabled>Country</option>');
    } else {
        $countrySelect.find('option[value=""]').text('Country').prop('disabled', true);
    }

    ['myCustomCheckbox', 'consent_2', 'consent-0'].forEach(name => {
        $(`input[name="${name}"]`).on('change', function () {
            $(this).css('border', '2px solid black');
        });
    });

    $('.feeRecovery-container input[type="checkbox"]').on('change', function () {
        $(this).css('border', '2px solid black');
    });
});

// Hide Stripe payment method selector
setTimeout(() => {
    const ptabs = document.querySelector('.p-PaymentMethodSelector');
    if (ptabs) ptabs.style.display = 'none';
}, 1000);

document.addEventListener("DOMContentLoaded", function () {
    setTimeout(() => {
        const selector = document.querySelector(".p-PaymentMethodSelector");
        const autofillPrompt = document.querySelector(".p-LinkAutofillPrompt");
        if (selector) selector.style.display = "none";
        if (autofillPrompt) autofillPrompt.style.display = "none";
    }, 9900);
});
</script>

<?php
// Force Stripe to use only card method
add_filter('give_stripe_payment_method_types', function ($methods) {
    return ['card'];
});

add_filter('give_stripe_payment_element_options', function ($settings) {
    $settings['paymentMethodTypes'] = ['card'];
    return $settings;
});

});

[Neeraj5514]

I am using below hook for above code
add_action('givewp_donation_form_enqueue_scripts', function () {
// code
}

[matheuswd]

Hi, @Neeraj5514.

You can disable those payment options directly on your Stripe account. In your Stripe dashboard, navigate to the Payment Methods page from the Settings page.

On the Payments page, click on Payment Methods, and then click on Default GiveWP configuration.

Now, payment methods will be presented on a new page for you to configure. Click on the Turn on buttons to enable those payment methods on your donation forms.

It’s important to note that not all payment methods are available to every Stripe account or donor. Availability depends on factors such as currency, location, and other criteria determined by Stripe. If you encounter any issues connecting a payment method, we recommend reaching out directly to Stripe support at https://support.stripe.com/ for further assistance.

You can learn more about it here in our documentation: https://givewp.com/documentation/core/payment-gateways/stripe-payment-element/#activating-payment-methods.

Also, next time you have a support question, please contact our support team via Priority Support if you are a paid user (https://givewp.com/priority-support/) or via WP.org if you are a free user (https://wordpress.org/support/plugin/give/). The support team is equipped to help you.

Thanks for using GiveWP! Have a great day.