jQuery error when form is displayed

Problem statement

You created a payment form with WP Full Stripe, and you’ve inserted it to a page.

The form is displayed on the page, but something is wrong because the form is not working as expected, and there is a javascript error on the web console, similar to the one below:

TypeError: $ is not a function
/wp-content/themes/specular/js/main.js?ver=1:9 HTMLDocument.()
/wp-includes/js/jquery/jquery.js?ver=1.12.4:2 i()
/wp-includes/js/jquery/jquery.js?ver=1.12.4:2 Object.fireWith [as resolveWith]()
/wp-includes/js/jquery/jquery.js?ver=1.12.4:2 Function.ready()
/wp-includes/js/jquery/jquery.js?ver=1.12.4:2 HTMLDocument.K()

Please note the first line: it means there is a jQuery library conflict between another theme/plugin and WP Full Stripe.

WP Full Stripe uses WordPress’ recommended way of registering jQuery as a dependency.
However, not all plugins/themes do the same, and even when they do, sometimes weird conflicts happen.

The solution

There are two ways to resolve this issue:

  • Deactivating the conflicting plugin
    If you can, please try to deactivate the conflicting plugin. If it solves the issue, then maybe you can find a functionally equivalent alternative.

  • Modifying how jQuery is invoked by WP Full Stripe
    WP Full Stripe uses the recommended conflict resolution by jQuery but sometime it fails. You can turn it off by commenting out a line of code in the “assets/js/wp-full-stripe.js” file.

    This is the original source code:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
         /*
    Plugin Name: WP Full Stripe
    Plugin URI: https://paymentsplugin.com
    Description: Complete Stripe payments integration for WordPress
    Author: Mammothology
    Version: 3.12.1
    Author URI: https://paymentsplugin.com
    */
     
    Stripe.setPublishableKey(stripekey);
     
    jQuery.noConflict();
    (function ($) {

    Comment out the jQuery.noConflict(); line, and save the file:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
         /*
    Plugin Name: WP Full Stripe
    Plugin URI: https://paymentsplugin.com
    Description: Complete Stripe payments integration for WordPress
    Author: Mammothology
    Version: 3.12.1
    Author URI: https://paymentsplugin.com
    */
     
    Stripe.setPublishableKey(stripekey);
     
    //jQuery.noConflict();
    (function ($) {
in Troubleshooting