Credit Card Payment form is showing twice on checkout

  • Resolved Sajid Manzoor

    (@sajiddesigner)


    1 month, 1 week ago

    Hello,

    After changing placement of payment methods, Square gateway payment form is showing twice on checkout page.

    I changed the position of Square 

    remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
add_action( 'theme_payment_method', 'woocommerce_checkout_payment', 20 );

    After changing the location credit card form is loading twice. See following screenshot: https://tinyurl.com/25wf7gqj

    Thanks

    Sajid

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Support omarfpg (woo-hc)

    (@omarfpg)

    1 month, 1 week ago

    Hi Sajid,

    After changing placement of payment methods, Square gateway payment form is showing twice on checkout page.

    First, I must inform you that our support policy doesn’t cover customization (learn more). However, we can try our best to help you with advice or point you in the right direction on where to get support.

    That being said, I believe this is related to your theme; there could be a conflict between this custom code snippet and the theme_payment_method hook. To learn more could you please check if this also happens with a default theme like Storefront or Twenty Twenty-Four?

    I it works propery with any of the default themes, I’d recommend reaching out to your theme’s developers to learn more.

    I hope this helps so far!
    -OP

    Thread Starter Sajid Manzoor

    (@sajiddesigner)

    1 month, 1 week ago

    Hello @omarfpg
    I have astra theme and this theme does not have any hook similar to theme_payment_method  or payment_method  added on checkout page. I am testing this with StoreFront theme and Will get back to you with results.
    Further the customization thing you mentioned about 

    remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 ); add_action( 'theme_payment_method', 'woocommerce_checkout_payment', 20 );

    It is actually standard way of doing things in WooCommerce/Wordpress and using these lines will only change the placement of payment methods on checkout page.
    theme_payment_method is a custom action I added on checkout page for creating a new place for showing payment mthods and it looks like this: 

     <?php do_action('theme_payment_method'); ?>

    There is nothing else added to this action so there is zero chance that any other plugin or theme has conflicts with this newly created action.

    Thanks
    Sajid

    Thread Starter Sajid Manzoor

    (@sajiddesigner)

    1 month, 1 week ago

    @omarfpg
    I checked this with storefront theme now and storefront theme also have the same issue. See this screenshot here: https://tinyurl.com/2c6g2waa
    This happens on random accasions. It is not visible all the times.
    Thanks

    Plugin Support ckadenge (woo-hc)

    (@ckadenge)

    1 month, 1 week ago

    Hi @sajiddesigner,

    Just to clarify, were you able to only have WooCommerce and Square as the active plugins when testing?

    Thread Starter Sajid Manzoor

    (@sajiddesigner)

    1 month, 1 week ago

    I have following plugins

    ACF
    WooCommerce
    WooCommerce Square
    WooCommerce Checkout fields editor
    Elementor
    SVG Support
    User Registration(https://wpuserregistration.com/
    Conditional Menus (By Themeify)

    and i tested this with and without these plugins
    ACF
    WooCommerce Checkout fields editor
    Elementor
    SVG Support
    User Registration(https://wpuserregistration.com/
    Conditional Menus (By Themeify)
    and issue persists.
    Can you please tell me which code/filter/action or JS/PHP function in your plugins is responsible for embedding Card information in Payment Methods sections. I will try to debug that part only to find the root cause of this issue.

    Thanks
    Sajid

    Plugin Support Zubair Zahid (woo-hc)

    (@doublezed2)

    1 month, 1 week ago

    Hello Sajid Manzoor,

    May I ask where did you get this code from?

    remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
add_action( 'theme_payment_method', 'woocommerce_checkout_payment', 20 );

    When you move the payment methods section in WooCommerce, it’s crucial to ensure that the original placement is fully de-registered and that there are no other conflicting hooks or actions that might cause the payment form to load twice.

    The issue you’re encountering could be due to the payment form still being hooked in another part of the checkout process.

    As mentioned earlier, our support policy doesn’t cover custom-coded solutions.
    I recommend posting this question in Woo Slack or the Woo Facebook group.
    You might get help from other fellow Woo devs.

    I hope this helps. 🙂

    Best regards.

    Thread Starter Sajid Manzoor

    (@sajiddesigner)

    1 month ago

    Hello @doublezed2
    Issue is not related to the custom code, I shared above.
    I tried removing this custom code which you mentioned above and still payment form is replicating twice. Infact I checked this with Storefront theme and issue is happening. See following comment above.

    This is not a frequent issue and it happens randomly.

    I am surprised that instead of checking your plugin, you guys are still trying to get this issue over your heads by asking questions. I will suggest you to test your plugin. Here are steps to reproduce the issue:
    Test this with a new customer account who does not have a payment method saved in his profile.
    1- Add products to cart
    2- Go to checkout directly (Skip cart page)
    3- Most probably you will see payment form once.
    4- Hit ctrl+f5 to refresh the page. Referesh the page untill you see Payment form replicated twice.

    Some times you will see the double payments forms after 1 or 2 refresh and sometime it will take 7, 8 or 9 re-tries to see the payment form twice on checkout page.

    You still have to answer my following question:

    Can you please tell me which code/filter/action or JS/PHP function in your plugins is responsible for embedding Card information in Payment Methods sections. I will try to debug that part only to find the root cause of this issue.

    Thanks

    Ajid

    Plugin Support Shameem (woo-hc)

    (@shameemreza)

    1 month ago

    Hi @sajiddesigner

    This is not a frequent issue and it happens randomly.

    There might be a conflict or an issue with how the payment form is being loaded. The fact that it’s occurring randomly suggests that it could be due to a race condition or a timing issue in the code.

    The best way to determine this is to:

    • Temporarily switch your theme to Storefront or Twenty Twenty-Four
    • Disable all plugins except for WooCommerce
    • Repeat the action that is causing the problem

    If you do not see the same problem after completing the conflict test, then you know the problem was with the plugins and/or theme you deactivated. To determine which plugin is causing the problem, reactivate your other plugins one by one, testing after each, until you find the one causing conflict. You can find a more detailed explanation on how to do a conflict test here.

    It also might be related to a caching issue. If you have any caching plugins or server-side caching, try disabling them to see if that resolves the issue.

    I am surprised that instead of checking your plugin, you guys are still trying to get this issue over your heads by asking questions. I will suggest you to test your plugin. Here are steps to reproduce the issue:

    I’ve conducted local testing and even set up multiple online testing sites, but I couldn’t replicate the issue. I conducted these tests using the Storefront and Twenty Twenty-Four theme with WooCommerce and WooCommerce Square plugin.

    Can you please tell me which code/filter/action or JS/PHP function in your plugins is responsible for embedding Card information in Payment Methods sections. I will try to debug that part only to find the root cause of this issue.

    The Square payment form is loaded through the woocommerce_credit_card_form_start and woocommerce_credit_card_form_end actions. However, these actions are standard WooCommerce actions and are used by many payment gateways, not just Square.

    However, to check how the payment form is being handled, I would suggest checking the plugin file here: https://github.com/woocommerce/woocommerce-square/

    Additionally, as this issue is quite complex and seems specific to your setup, you may need to consider hiring a developer who specializes in WooCommerce to help you debug and fix it.

    You can also ask for insight related to those on either the WooCommerce Advanced Facebook group or the WooCommerce Community Slack. Many of our developers hang out there and will be able to offer insights into your question.

    I wish I could help more, but hopefully, this gets you going in the right direction to get some further insight/information.

    Plugin Support Shameem (woo-hc)

    (@shameemreza)

    4 weeks ago

    Hi @sajiddesigner

    I’m marking this topic as “resolved” due to recent inactivity. If more assistance is needed, feel free to post back here or open a new topic.

    Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.