WooCommerce Stripe payment gateway custom javascript conflict

user_15040294 0
Viewed 459

I'm having an issue with a JS conflict, caused by a custom jQuery script that alters text once the checkout has updated. When this script is included, the Stripe payment gateway on my WooCommerce site does not allow input into credit and debit card fields.

I'd still like the script to run, but have no idea how to resolve/avoid the conflict, so at the moment, I've had to omit it. Does anyone have an idea as to why the below is causing a conflict?

<script>
jQuery(document).ready(function(){
    jQuery( 'body' ).on( 'updated_checkout', function() {
        var replaced = jQuery(".woocommerce-checkout #order_review .product-info .variation dd.variation-Extras p").html().replace('&nbsp;Booking Fee×1 ( <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>0.00</span> - One Time ) ,','Booking Fee (£0.00)');
        jQuery(".woocommerce-checkout #order_review .product-info .variation dd.variation-Extras p").html(replaced);
    });
});
</script>
stripe-payments woocommerce html jquery javascript
1 Answers

In WooCommerce checkout, the element class product-info doesn't exist and the right element class is product-name instead.

Also you should always check that the html element object you are targeting exists and is not undefined, before trying to use the replace() method on it.

So there is no javascript conflict, but a jQuery error is thrown, that disables some jQuery processes:

Uncaught TypeError: Cannot read property 'replace' of undefined

and it disable all jQuery processes that are executed after it.

Use instead the following revisited code:

<script>
jQuery(function($){
    $(document.body).on('updated_checkout', function() {
        var varExtrasObj     = $('.woocommerce-checkout #order_review .product-name .variation dd.variation-Extras p'),
            varExtrasObjHtml = varExtrasObj.html();

        if ( varExtrasObjHtml !== undefined ) {
            var stingToReplace   = '&nbsp;Booking Fee×1 ( <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>0.00</span> - One Time ) ,',
                stingReplacement = 'Booking Fee (£0.00)',
                theReplacement   = varExtrasObjHtml.replace( stingToReplace, stingReplacement );

            varExtrasObj.html(theReplacement);
        }
    });
});
</script>

It should work now without making trouble with Stripe payments.

user_37307540
Related