Stripe Element checkout pane at Stripe review not loading in certain situations

Created on 25 April 2024, 2 months ago
Updated 1 May 2024, about 2 months ago

Problem/Motivation

In certain situations, the Stripe Element checkout pane at the Stripe review does not load, displaying the placeholder form indefinitely, as per attached screen shot. In my tests, apparently the easiest way to reproduce it is, when you reach "Review", click on "Go back" or use the browser's back button to return to the order information. Clicking again on "Continue to review" this problem starts happening. We could even reproduce it by clicking on the browser's back button on the "Order Information" page to return to the cart, and following the flow again. Reloading the page doesn't solve the problem. It seems that when you get that error, you can't solve it, and no matter what you do (return to the cart, remove the product, start everything over), you won't be able to view the checkout pane to add the credit card information.

I don't see any errors in the browser's console. For testing purposes, I have disable JS aggregation, but still having this error.

Has anybody had this error before? Any ideas of what could be happening?

Steps to reproduce

1. Log in to the site
2. Add a product to the cart
3. Go to the cart and click on "Checkout"
4. Enter address and order information, and click on "Continue to Review"
5. On the Review page, you may or may not have the error. If not, click on "Go back"
6. Click again on "Continue to review"
7. At this point, you should see the problem, and the checkout pane is not displaying properly.

πŸ› Bug report
Status

Active

Version

1.1

Component

Code

Created by

πŸ‡¨πŸ‡¦Canada maursilveira Windsor, ON

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @maursilveira
  • πŸ‡¨πŸ‡¦Canada maursilveira Windsor, ON

    Hello,

    Doing some more tests today, I was able to get the following error in the browser's console:

    Uncaught IntegrationError: payment Element didn't mount normally.
        at e._handleMessage (v3/:1:88665)
        at e._handleMessage (v3/:1:101570)
        at v3/:1:87423
    

    This is coming called from the following function:

    this._setupPostMessage = function() {
        r._listenerRegistry.addEventListener(window, "message", (function(e) {
            var t = e.data
              , n = e.origin
              , o = e.source
              , a = (0,
            l.$G)(t);
            a && ((0,
            T.uW)(u.jQ, n) ? r._handleMessage(a, o) : (0,
            x.Z)(n))
        }
        ))
    }
    

    Which ends up in this case statement:

    case "stripe-frame-error":
      throw new I.No(a.payload.message);
    

    Any help is greatly appreciated!

  • πŸ‡¨πŸ‡¦Canada maursilveira Windsor, ON

    Ok, different browsers display different warning messages in the console, but after doing multiple tests, this is the message that I get only and in all situations when the error happens:

    Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://js.stripe.com') does not match the recipient window's origin ('https://my-site-url-here').

    Researching by this type of error returns many results, and apparently this may happen when the postMessage() function is called before the actual element in the DOM has finished loading, but I'm not sure that is the case here. This message is coming from the following function in https://js.stripe.com/v3/

    function(e) {
        var t, n = e.targetOrigin, r = e.type, o = n;
        switch (r) {
        case "sibling":
            t = (0,
            l.Hb)(e.targetFrameId);
            break;
        case "child":
            t = window.frames[e.targetFrameId];
            break;
        case "parent":
            o = o || "*",
            t = window.parent;
            break;
        default:
            (0,
            s.Rz)(r)
        }
        if (o = o || u.jQ,
        t && "function" == typeof t.postMessage) {
            var i = e.message.delegate ? {
                targetOrigin: o,
                delegate: e.message.delegate
            } : o;
            t.postMessage(JSON.stringify((0,  // <= Error happens here
            c.Z)((0,
            c.Z)({}, e), {}, {
                __stripeJsV3: !0
            })), i)
        }
    }
    

    I'm not very familiar with how the checkout pane is built or how the Stripe library is called and executed, therefore it's been hard for me to find where a fix should go.

    Any thoughts?

Production build 0.69.0 2024