Pro Sites payment gateway showing as hidden in CSS. How do I unhide?

I installed the new Pro Sites plugin and now the payment gateway (Credit card form) is hidden. When I choose a payment option in the pricing columns, it does not show up. The CSS shows the gateway with class="hidden". Not sure why or how to unhide it. Can anyone help with this?

  • Vinod Dalvi
    • WP Unicorn

    Hi Jon,

    I hope you are well today and thanks for posting on the forum.

    I have just tested it on my test site using latest version of Pro Sites plugin & default WordPress theme and the payment gateway displayed fine for me without any issue.

    Can you check the JavaScript console for errors?

    In Chrome go to "View -> Developer -> JavaScript Console" and in Firefox you can go to "Tools -> Web Developer -> Console”

    Find information about how to open JavaScript browser console :

    http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers
    http://codex.wordpress.org/Using_Your_Browser_to_Diagnose_JavaScript_Errors

    Let me know what JavaScript errors if any you are getting when you face this issue.

    I tried to test the issue on your site by registering the test account but i didn't get the Pro sites page so could you please share the page URL?

    Also would you mind if I logged in to your site and did some troubleshooting? This might help get to the bottom of this faster. If this is ok, just grant me temporary admin access to your site by clicking "Grant Access" button in the WPMU DEV Dashboard Settings as described on the following page and reply on this thread after granting it?

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Kind Regards,
    Vinod Dalvi

  • Jon Dalrymple
    • Site Builder, Child of Zeus

    Hello Vinod,

    Thanks for the quick response.

    The JavaScript errors are:
    Failed to load resource: net::ERR_INSECURE_RESPONSE
    stripe_token.js:4 Uncaught ReferenceError: Stripe is not defined

    the pro sites page has been customized to /pcm-sites/

    I would enable admin access, but my WPMU Dev Dashboard does not work right now. That's another issue Aaron and Michael are working on.

  • Jon Dalrymple
    • Site Builder, Child of Zeus

    I get the same JavaScript errors on my other multisite with Pro Sites installed. But the payment form shows up just fine there. It seems like there is a setting or something that is hiding the view of the cc form. The CSS in the screenshot is from the plugin's css not my theme css.

  • jetmac
    • Recruit

    Team WPMU,

    I've found that the issue on my site is definitely related to this. I can't see any method of payment on my checkout page, but when I dig into Chrome's Developer Tools, I can see that the div containing the checkout form is "hidden" and display is "none". When I adjust it in Developer Tools to line those CSS items out, it seems to come online and display.

    One -- why is this form hidden at all? The previous generation of this Plugin didn't do that, and it seems like it's just some unnecessary styling that is now causing problems.

    While I like the idea of hiding the checkout form so it "shows" after selecting a payment plan, if it's causing problems then that "feature" should be removed until it can be better implemented in a later update.

  • Jon Dalrymple
    • Site Builder, Child of Zeus

    Hi jetmac,

    What webhosting service are you using? I'm on wpengine. I have two multisites on wpengine and one of them works with the new Pro Sites plugin while the other doesn't. They are on different servers within wpengine, so I'm wondering if that has anything to do with it. One of their servers has a newer version of php or something like that which is the one that it works on.

  • Jon Dalrymple
    • Site Builder, Child of Zeus

    I talked to tech support at wpengine and they said to try disabling plugins or changing themes. I tried disabling all the other plugins and seeing if it would work, but it did not. I then tried a different theme (genesis sample), but it still did not work. So I'm going to try changing to a server on wpengine with a newer php version. Currently the site is on php 5.3, but my other site which the Pro Sites plugin DOES work on, is on php 5.5. I'll let you know what happens.

    • Jon Dalrymple
      • Site Builder, Child of Zeus

      Hello Vinod,

      I have now moved my site to a server with the same php version as my other site where the plugin works, but I still have the same problem. The payment gateway is hidden even when I click a payment plan. I tried several things to make it work; re-installed the plugin, disabled all the other plugins, refreshed the cache, tried a different theme. I don't know why it works on one of my sites but not the other. Do you have any other suggestions? Can you take a look at it? I have enabled the support staff access for you.

      Thanks,
      Jon

  • Jon Dalrymple
    • Site Builder, Child of Zeus

    I had wpengine migrate my site to a newer server with php version 5.5. The Pro Sites plugin still does not show the payment gateway when a plan is clicked. Interestingly, however, the wpmudev dashboard plugin does work now, which is another support issue I have open. So moving to a newer version of php did help somethings. Anyone else have any ideas? Maybe I should try pagely.

  • Ash
    • WordPress Hacker

    Hello @Jon

    I hope you are well today.

    Would you please add the following code in your theme's footer.php after wp_footer():

    <script type="text/javascript">
    jQuery(function($) {
        $('.choose-plan-button').click(function() {
            $('#prosites-signup-form-checkout').removeClass('hidden');
        });
    });
    </script>

    Please let us know if that works.

    Cheers
    Ash

  • Jon Dalrymple
    • Site Builder, Child of Zeus

    Hello Ashok,

    Thanks for the info. I'm a little confused as to where to put the code. My theme does not have a footer.php file. The only footer.php file I see is in the parent theme (Genesis). If i put it there, I'm afraid it will get over written if there is an upgrade to the Genesis theme.

    Is there a way around that? Can I create a footer.php file for my child theme? Can you tell me what it should contain?

    Jon

  • VisionMule
    • Flash Drive

    I'm having the same trouble here. The Payment Gateway is remaining hidden once all of the registration form is filled out. I added the above JS snippet and that did not do anything.

    The CSS class "hidden" remains in place and if i use the browser inspector to remove the class the Stripe payment gateway shows up.

  • Anang
    • New Recruit

    Hi @Jon Dalrymple

    Trying to help here :slight_smile:

    Alternatively you can put this code in your functions.php and you can child themes if you want :slight_smile: The file only contain this code is fine

    <?php
    function remove_ps_hide() {
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        $('.choose-plan-button').click(function() {
            $('#prosites-signup-form-checkout').removeClass('hidden');
        });
    });
    </script>
    <?php
    }
    add_action( 'wp_footer', 'remove_ps_hide' );
    ?>

    Let me know if that's worked :slight_smile:

    Best Regards

  • Anang
    • New Recruit

    Hi @VisionMule

    I have checked it on my installation , it's worked fine. And no problem adding javascript in functions.php . What is the errors that shown up on your site ? If you have some lines of code on your functions.php, try remove the first line of php tag opening.
    <?php

    Let me know the result :slight_smile:

    Best Regards

  • Anang
    • New Recruit

    Hi @VisionMule

    Well, this quick fix did not work either. Chrome Inspector is telling me:
    Uncaught SyntaxError: Unexpected token

    Could you give me link to your pro sites page ? So I can take a look and find the issues there ?

    @Jon Dalrymple

    Great to hear that's worked for you :slight_smile:

    Best Regards

  • VisionMule
    • Flash Drive

    Hey Anang,

    @Jose uploaded a different "fix" where we're asked to replace 2 files. It removes the hidden nature of the payment gateway before all of the site signup is completed. Not sure if this will work right but i'll test it in staging.

    Files to replace:
    ../wp-content/plugin/pro-sites/pro-sites.php
    ../wp-content/plugin/pro-sites/pro-sites-files/js/checkout.js

    https://premium.wpmudev.org/forums/topic/payment-gateway-not-working-in-pro-site-plugin

    Thanks for your help Anang!

  • Ash
    • WordPress Hacker

    Hello @VisionMule

    I hope you are well today.

    If Jose's solution works for you, please proceed with that. As he added a patch, so it might be added into the plugin and you don't need to worry about updating the plugin.

    Let us know how it goes,

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.