Stripe Express - Payment element triggered twice

[dan504301]

Bug Description

Hello @mralaminahamed,

I found another bug that, if fixed, has the potential to improve the most important payment gateway in Dokan.

When the Stripe Express payment is the first to load and the checkout includes even a small custom field that adds a price option (with all the needed validations and checkout updates), the payment element loads twice. Only one payment element is shown to the customer.

This issue is indicated by double loading circles and a duplicate payment sessions appearing in the Stripe dashboard, though only the last session is utilized.

For example, adding an optional select field with three options at different prices (no option preselected by default) using the most used Checkout field editor consistently triggers this behavior.

I also tested various other plugins that allow customers to add a fee at checkout, and the result was the same.

This issue is not specific to one plugin or theme; my extensive testing confirms that this is how the Stripe Express module responds in these situations.

Ideally, the payment element should load only after the checkout finishes updating at the beginning. It is not an issue of how fast the checkout loads, as mine takes less than a second.

This issue disappears when, for example, Cash on Delivery (COD) is the first payment method and Stripe Express is the second. When the customer selects Stripe Express, the checkout is already loaded, the payment element loads only once.

There are no issues with the payment element after the initial checkout load.

Apparently, this issue manifests only when the checkout is accessed as a guest. When the customer is logged in while accessing the checkout, the payment element triggers only once in the Stripe dashboard.

[dan504301]

@mralaminahamed,

I spent my weekend working on understanding this issue.

My conclusion is that this behavior is triggered when there are fields in the checkout that update the checkout when the page initially loads.

The issue disappears if the customer accesses the checkout while logged in, rather than as a guest.

[mralaminahamed]

@daniel-toader,

Thank you for your thorough investigation and detailed report on this Stripe Express issue. We appreciate the time and effort you've put into understanding and documenting this behavior.

I've attempted to reproduce this issue in our test environment, but I haven't been able to replicate the double-triggering of the payment element that you've described. This suggests that the issue might be related to specific configurations or interactions on your site.

To help us investigate further:

1. Could you provide access to a staging site with Stripe Express in test mode and the full configuration that reproduces this issue? This would greatly assist our team in understanding and addressing the problem.

2. Please share more details about the specific checkout field editor or plugins you're using to add custom price options. This information could be crucial in identifying potential conflicts.

3. If possible, could you create a screen recording demonstrating the issue, including the Stripe dashboard showing the duplicate payment sessions?

I've created a screen recording of our test checkout process for reference: Screen Recording Link

Given the complexity of this issue and its potential dependence on specific site configurations, I recommend reaching out to our support team for more direct assistance. They can provide a more hands-on approach to troubleshooting this issue in your specific environment.

[dan504301]

@mralaminahamed,

Thank you for your time.

Keep in mind.

1.In the screen recording you have the default WooCommerce checkout, the Stripe Express payment element has no issues in this situation, as I stated.

2.You are also logged in, the Stripe Express payment element has no issues in this situation, as I stated.

Can you please take this steps?

1.Add a select field with different pricing options using a plugin (I use the pro version of Themehigh Checkout field editor, 400.000+ user base), you can use something similar or any other plugin that is doing a checkout update when the checkout first loads. This is following the WooCommerce guidelines.

2.Also the most important step, acces the checkout as a guest.

When both conditions are meet, the stripe Express module triggers a duplicate payment session in the Stripe dashboard.

[mralaminahamed]

@daniel-toader

2.You are also logged in, the Stripe Express payment element has no issues in this situation, as I stated.

I am not logged in in the testing when adding a product to the cart, and ensure the woo settings to accept checkout from guest.

It will be great if you create a staging site with your configuration and contact our support team with site credentials.

Note: If you suspect this feature conflicts with a third-party plugin, it may be helpful to also contact that plugin's support team for their insights.

[dan504301]

@mralaminahamed, my mistake, you are right, you did the test in guest mode.

I tried three different plugins that update the checkout when the page first load, one by one, the result is the same.

I don't feel comfortable giving access to my staging site because there's a lot of personal data. I can't just give my credentials every time I find a bug. Since this issue is related to Stripe, it's even more complicated.

For reference you can view my other GitHub tickets related to Express that helped the entire community in having a better Dokan Pro payment gateway for their business. Not a single issue was related to my setup.

Dokan Pro even had an update that included my discovered bug as the sole changelog item, version 3.9.7 on January 11, 2024.

– fix: [StripeExpress] Performance improvement for Stripe Express module. Previously, the Add to Cart button and proceed to the checkout page took extra time to load. With this release, we’ve fixed the loading time issue.

My contribution list:

(#2201), (#2085), (#1993), (#2168), (#2310)

[mralaminahamed]

@daniel-toader,

Thank you for your prompt response and for clarifying the situation. I appreciate your contributions to improving Dokan Pro, and I apologize for any inconvenience our investigation process may have caused.

I understand your concerns about sharing access to your staging site, especially given the sensitive nature of payment gateway data. Your privacy and data security are important to us, and we respect your decision.

Given the circumstances, I'd like to propose an alternative approach:

1. Could you provide a more detailed step-by-step description of how to recreate this issue? Include the names of the plugins you've tested, if possible.

2. If you're comfortable, could you share screenshots or screen recordings of the issue occurring? This visual evidence could be invaluable for our team to understand the problem better.

3. We'll attempt to recreate a similar environment on our end based on your descriptions.

Regarding your previous contributions, we're grateful for your ongoing support in improving Dokan Pro. Your reports have indeed led to significant improvements, as evidenced by the changelog you mentioned.

If we're still unable to reproduce the issue with this additional information, we might need to explore other options for investigation. We're committed to resolving this and maintaining the quality of the Stripe Express integration.

[dan504301]

@mralaminahamed,

1.Add this to the functions.php
2.Add a product to cart and open checkout as a guest.
3.The Stripe Express is the first (default) payment gateway to open.

add_action( 'woocommerce_after_checkout_form', 'dokan_stripe_express_bug' );

function dokan_stripe_express_bug() {
    wc_enqueue_js( '
        $( document.body ).on( "init_checkout", function() {
            setTimeout(function() {
                jQuery(document.body).trigger("update_checkout");
            }, 500);
        });
    ' );
}

For the sake of excluding other variables (although I don't think it is necessary) such as the response time of the Stripe server, adjust the time from 500ms to other values if needed and open a new private browser session.

[mralaminahamed]

@daniel-toader,

Thank you for your detailed report. I've followed your guidelines using the pro version of Themehigh Checkout field editor plugin and custom code to investigate this issue. Here's what I found:

1. On the checkout page, I observed two spinners from the WooCommerce plugin, indicating that all components are loading properly.

2. Another one spiner is loaded, when the stripe component are preparing to load.

3. Despite replicating the setup as described, I was unable to reproduce the issue you're experiencing.

It's possible I might have missed a crucial step in recreating the exact conditions where this problem occurs. To help us understand and address this better:

1. Could you confirm if there are any specific steps or conditions I might have overlooked?

2. Are there any particular actions or timing considerations that trigger the double-loading of the Stripe Express payment element in your experience?

I've attached a screen recording of my test results for your reference:
https://drive.google.com/open?id=1rQEuviKBPLKS-DxYJvfRy0bEP1UJNhRM&usp=drive_fs

Your insights on any discrepancies between my test and your experience would be invaluable. We're committed to resolving this issue and appreciate your continued cooperation in helping us improve Dokan Pro.

[dan504301]

@mralaminahamed, did you take a look inside the Stripe test dashboard?

You should find two payment session, one that started at init_checkout and one that started 500ms latter at update_checkout.

A duplicate payment session, this is not normal.

The payment session should not start twice in the same checkout session.

I tested this on two different websites, the last one with WooCommerce default at checkout and the code I provided you.

[dan504301]

Why is this important?

The marketplace owner should have a flawless relation with Stripe, including the way the payment sessions are created.

It's not uncommon for Stripe to close accounts an ruin businesses without aparent reasons.

Here's a look of 5 different checkouts in test mode, everything is duplicate.

[dan504301]

@mralaminahamed,

I went even further, I disabled everything except WooCommerce, Dokan and Dokan Pro.

I used default Twenty Twenty-Four with 0 customization (except the code I provided).

This is the outcome for one checkout session and 0 interaction with the page.

[mralaminahamed]

Hi @daniel-toader,

Thank you for your detailed report on the Stripe Express payment gateway issue. We have noted your findings, including the duplicate payment sessions in the Stripe dashboard under specific checkout conditions.

We acknowledge the potential severity of this issue and its impact on the relationship with Stripe. Your thorough investigation and clear reproduction steps will be invaluable as we work to identify the cause and implement a fix.

Please be assured that we are treating this as a high-priority issue. Our team will be conducting a deep dive into the Stripe Express module to pinpoint where the duplicate sessions are being triggered and develop a robust solution.

We appreciate your patience and understanding as we work on this. We'll keep you updated on our progress and any further information we may need from you.

CC: @mrabbani @shams-sadek1981