fredrikvestin

Yeah, I’ll post a suggestion about this on github, and the workaround is probably enough for many people as long as they are ok with the fields having the same styling as the #billing_first_name field.

Do note though that not all styling properties are used from the #billing_first_name field when creating the .Input styling. The properties I’ve found that can be used are:

1. backgroundColor
2. borderBottomColor
3. borderBottomLeftRadius
4. borderBottomRightRadius
5. borderBottomStyle
6. borderBottomWidth
7. borderLeftColor
8. borderLeftStyle
9. borderLeftWidth
10. borderRightColor
11. borderRightStyle
12. borderRightWidth
13. borderTopColor
14. borderTopLeftRadius
15. borderTopRightRadius
16. borderTopStyle
17. borderTopWidth
18. boxShadow
19. color
20. fontFamily
21. fontSize
22. fontWeight
23. letterSpacing
24. lineHeight
25. outline
26. outlineOffset
27. paddingBottom
28. paddingLeft
29. paddingRight
30. paddingTop
31. textDecoration
32. textShadow
33. textTransform

Hi,

yes I understand that you don’t do customizations and I can probably mod the code myself to send the appearance rules with it, but then I would have to fork your plugin and maintain my own plugin.

I was mainly wondering if there is a way to filter the appearance object to make styling of the Stripe Payment Element easy and independent. There doesn’t seem to be a way today but I hope you add that possibility.

I found a workaround when digging into the code of the plugin. The plugin sets the styling by cloning the input element with id #billing_first_name and then get the computed styles from this element for the .Input element in the form. So by restyling this element I can get the style of the Stripe form better but it still doesn’t solve that we want different styling for this than the styling of #billing_first_name. Remember to clear cache and the transient wc_stripe_upe_appearance for the new style to take effect in the Stripe Payment Element.

To me after getting into the code a bit more it seems that if you just add a filter hook on line 304 ($stripe_params[‘upeAppearance’] = get_transient( self::UPE_APPEARANCE_TRANSIENT );) in woocommerce-gateway-stripe-develop\includes\payment-methods\class-wc-stripe-upe-payment-gateway.php the problem would be solved as you seem to get the styling from a cloned set of elements, set a transient with those values and then get that transient when creating wc_stripe_upe_params which in turn is used to create the element?

Hi @ihereira ,

Just to clear some things up.

Your plugin uses the Stripe Payment Element for the new checkout experience right?

If so, according to the documentation you linked to, you can send along what Stripe calls rules in an appearance object to style the elements of the form. They also have something called themes in the appearance object that you can use for easy styling.

It seems like your plugin uses some rules when creating the Stripe Payment Element?

If not, it would still be possible to add this functionality so that we can make our own rules to send when creating the Payment Element? Or even choose a theme?

Hi @ihereira ,

My screenshot was from a page with our theme, not Storefront. And this is strange because being in an iframe, the styling of the page outside of the iframe shouldn’t matter right?

So it seems that you somehow set the styling rules that you use when creating the Stripe Payments Element dynamically which for example results in different line-heights for our theme vs Storefront (line-height for .Input is 18.4px with our theme vs 25.888px with Storefront).

Why don’t you make the styling settings (including ability to pick a stripe payment element theme) filterable/adjustable so that we can style the elements in the iframe to our likings? The stripe payment element has settings for styling and you send styling options when creating the element so why not let us change those settings?

Hi @xue28 ,

Sorry about the login thing, server had got stuck in protected mode. It should work now.

Hi,

you can try it at dev.morakniv.se, I set up a quick Woocommerce, Stripe, Storefront server.

Let’s say I’d like to change the line-height, border-radius, background-color and box-shadow of the .Input element.

Hello @babylon1999

The only thing I’ve found in the documentation seems to be aimed at the old mode, not the updated experience?

In the new way of getting the credit card form the plugin seems to have a transient that contains the styling rules for the Stripe Payment Element but there doesn’t seem to be any filter to alter the rules that end up in wc_stripe_upe_params.upeAppearance? If we could modify the rules that are sent when creating the Payment Element it would be great! That way we should also be able to set one of Stripe’s themes for some easy styling.

I tried using that link to report the issue but haven’t received any feedback. How do I know if you received the information?

@niklasinpsyde Any more things we can try?

Ok, so it happened again. The IPN history on paypal shows a 200 HTTP-response. The Paypal log (not the specific woocommerce paypal payments log) is blank at the time of the order/payment. The woocommerce paypal payments log is also blank at/around that time but is full of messages like:
ERROR Illegit Webhook request detected.
WARNING No order for webhook event WH-XXXXXXXXXXXXX-XXXXXXXXXXXXXXX was found.
WARNING Order for PayPal order XXXXXXXXXXXXXXXX not found.
WARNING Could not capture payment for webhook event WH-XXXXXXXXXXXXXXXXX-XXXXXXXXXXXXXXXXXXXX.
WARNING Failed to capture order. PayPal API response: [UNPROCESSABLE_ENTITY] The requested action could not be performed, semantically incorrect, or failed business validation. https://developer.paypal.com/docs/api/orders/v2/#error-ORDER_NOT_APPROVED

We are using the sequential order numbers plugin, are you handling order numbers in a way that is compatible with that?

What I can say right away is that I also activated the logging function and to me the log looks like not everything is as it should be. Or perhaps this is normal messages for the log? (ID-strings replaced with X)

2021-09-15T10:10:47+00:00 WARNING Failed to capture order. PayPal API response: [UNPROCESSABLE_ENTITY] The requested action could not be performed, semantically incorrect, or failed business validation. https://developer.paypal.com/docs/api/orders/v2/#error-ORDER_NOT_APPROVED
2021-09-15T10:10:47+00:00 WARNING Could not capture payment for webhook event WH-XXXXXXXXXXXXXXX-XXXXXXXXXXXXXXX.
2021-09-15T10:10:47+00:00 INFO Webhook has been handled by CHECKOUT.ORDER.APPROVED
2021-09-15T10:11:14+00:00 WARNING No order for webhook event XX-XXXXXXXXXXXXX-XXXXXXXXXXXXXXX was found.
2021-09-15T10:11:14+00:00 INFO Webhook has been handled by PAYMENT.CAPTURE.COMPLETED
2021-09-15T10:11:35+00:00 WARNING Order for PayPal order XXXXXXXXXXXXXXXXXX not found.
2021-09-15T10:11:35+00:00 INFO Webhook has been handled by CHECKOUT.ORDER.APPROVED
2021-09-15T10:11:52+00:00 WARNING No order for webhook event XX-XXXXXXXXXXXXXXXXX-XXXXXXXXXXXXXXXXXX was found.
2021-09-15T10:11:52+00:00 INFO Webhook has been handled by PAYMENT.CAPTURE.COMPLETED
2021-09-15T10:12:16+00:00 WARNING Order for PayPal order XXXXXXXXXXXXXXXX not found.
2021-09-15T10:12:16+00:00 INFO Webhook has been handled by CHECKOUT.ORDER.APPROVED

I have now disconnected and reconnected the account. Since the problem only applied to a few orders I’ll have to wait and see. I will get back to you in this thread in case it still happens.