NO BUG: Ch-ua-form-factor Error on checkout page

Bugs
1

I am now getting a permissions error on checkout, which is impacting checkout appearance.
The page is:

image

image
image1886Ă—114 13.2 KB

The page should look like

image
image1287Ă—212 60.3 KB

but instead looks like:

image
image1354Ă—418 76.4 KB

2

Hi Eric,
Thanks so much for your report!

Unfortunately, I cannot reproduce the issue / see the issue when inspecting your site. The cart, filled or empty, looks as it should and there is no warning, except some preload warnings that are probably related to an optimization plugin.

Best regards,
timmse

3

Hi Timmse -
Interesting, well the ch-ua-form-factor error went away but the checkout is still messed up.

Do you know why that coupon notification bar would get added? It’s not in my template which I reference above.
Somehow, this also impacts the title bar background and the css for pushing the checkout section

5

Hey,
The coupon bar gets added by default as soon as coupons are enabled. You can disable the coupons in the WooCommerce General Settings. Once done, the notification bar disappears.

About the missing styles: It looks like you are including the checkout template using Bricks shortcode. Does the problem also occur when you insert the “checkout content” directly into the checkout template instead of using a shortcode?

6

Thanks.

Well, i want to enable coupons but dont want that banner. Are there hooks available to turn it off? I will instead just add my own element to the page to send them back to cart to add a coupon.

Interesting suggeation on the template. I did the shortcode because of a previous topic where you and i talked about displaying the cart. (Which works fine btw!)

When i get back to my computer ill check out this alternate approach for the checkout.

7

Ah I see :bulb: You can remove the coupon form with the following filter:

Unfortunately, I can’t remember our previous conversation. Can you provide me with a link?

8

Hi Timmse,
Sorry for the delayed response.

The previous conversation was here: https://forum.bricksbuilder.io/t/a-couple-bugs/12205
I couldn’t get cart or checkout to show when I applied it on the page. Once I moved to the template and added the shortcode, it worked. However, now I have this checkout styling issue.

Thanks for the hint on removing the coupon form. That worked.

9

Thanks for the link to the private message! I’ll be happy to take another look at your setup later and try to find the cause of the problem. The access data still work :+1:

1 Like
10

Hey Eric,
The Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor'. and some other console warnings are caused by the WooCommerce Stripe Gateway plugin. You should contact the plugin devs to get assistance with these issues.

The checkout template is missing the background styles for some reason. I just added them to the ID, so it seems to work. With external files (instead of inline styles), it also works.

The problem is that I can’t reproduce it on our dev server. Possibly there is a caching or optimization problem. Unfortunately, I can’t say it concretely. But as I said: styled on the ID, it looks 1:1 identical.

11

Thanks Stefan.
The header definely looks normal now, though it’s still doing some weird padding thing into the second section, which doesn’t show on the template. Also, it’s doing something weird on the input form, which does show on the template

Front End with affirm plugin deactivated:

image
image1253Ă—486 61.8 KB

Bricks Template
image

Here is the Front End with the stripe plugin activated:

image
image721Ă—520 41.9 KB

It’s stupidly putting that darn Pay with Link that I can’t get rid of. At the very least, I want to be able to put it over by the other pay options.

After dealing with the WooCommerce guys, I know what they’re going to do. After a three day wait, they’re going to blame the theme and throw up their hands. I’ll put in the ticket, but that’s what they typically do.

12

Hey,
The “last name” shift is coming from ACSS :smiley:

image
image936Ă—196 28.9 KB

You can work around that with custom CSS:

root p {
  margin-top: 0;
  margin-bottom: .75em;
}

“Pay with link” gets inserted by the Stripe plugin, so, unfortunately, I can’t offer you any support for it.

13

Thanks Stefan. Looks like Kevin fixed this issue in the latest acss release that he released today.

I just wanted to thank you again for all of your support. I am obviously a beginner when it comes to hardcore web dev. I really appreciate all of the support you have given me over the last couple of months. It’s been fantastic!

As for link- I figured it out. I can control it on my stripe account settings. I understand now on why they are injecting it there, above the user info. Apparently it will autofill all of your information, with a small increase to conversion rate.

I guess I’ll leave it and see what happens.

Cheers!

1 Like
14

You’re welcome. Much appreciated!

Or it’s because I’ve already inserted the custom CSS. However, I’m glad the problem is solved :smiley:
The problem with the checkout styles (which I have already fixed temporarily) could be fixed with Bricks 1.8.1. We had similar reports in the meantime.

Best regards,
timmse

16

Ha! You’re probably right.

Thanks!

17

Updating this thread as WooCommerce finally dug into this warning. As @Timmse said (he is always right), it is coming from the WooCommerce Stripe Plugin. Specifically, the google pay button when express payments is enabled.

To reproduce:

  1. Install/Configure WC Stripe on a test site
  2. Enable Express Payment Methods
  3. View a page with a Google Pay Element loaded
  4. See warning in console

From WooCommerce:

“It’s being passed to your site via the Stripe gateway, however it is coming directly from Stripe, so not something that we control. Here’s a screenshot of the document that’s passing the header. Looks like it’s included in the Google Pay button’s code.”

image
image1631Ă—1326 142 KB

  • I’m not able to find any current reference to this permissions policy directive as being valid, though there are some similar ones that I’ve found. Again here’s another reference to permissions policy headers from w3c https://github.com/w3c/webappsec-permissions-policy/blob/main/features.md

  • This isn’t breaking anything, is browser specific, and could be that there is still a browser somewhere that would use this.

  • ch-ua stands for “Client Hint, User Agent” so essentially what this is doing is setting the document to allow code that would be used to determine the form factor of the device browsing the page.

Woo did add a ticket in the developer’s repository to see if they can remove the warning at some point.

18

Thanks for the additional feedback!