Credit Card Payment form is showing twice on checkout

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

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

@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

Hi @sajiddesigner,

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

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

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.

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

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.

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!