Fixed JS Stripe Style Data not Being Processed

kylerc

kylerc

Well-known member
Affected version
2.0.1
Hello,

We found an issue with payment modals for user upgrades using Stripe in UI.X. It would appear that the style data is not being correctly processed to initialize a Stripe paid user upgrade. Specifically the JSON.parse on payment.js line 510 is able to receiving the following from UI.X style properties:

JSON: 
{
    "base": {
        "color": "xf-intensify(rgb(249, 250, 250), 87%)",
        "fontFamily": ""Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",      "Ubuntu", "Cantarell", "Fira Sans",      "Droid Sans", "Helvetica Neue", sans-serif",
        "fontSize": "16px",
        "lineHeight": "1.4"
    },
    "invalid": {
        "color": "#c84448"
    }
}

Notice the unescaped quotes around fonts and the xf-intensify(rgb(249, 250, 250), 87%) color not being processed through LESS. I haven't looked into this further to see if other values are also not being parsed, but the lack of parsing renders Stripe user upgrades inoperable since the modal is no longer interactive.
 
I suppose we could probably quick fix with single quotes, but probably easier if it gets escaped from XF in case other devs make this mistake I think.
 
Ya, the harder to workaround issue is LESS not being parsed. Quotes are inconvenient but have a workaround whereas LESS parsing is more complicated.
 
kylerc said:
Ya, the harder to workaround issue is LESS not being parsed. Quotes are inconvenient but have a workaround whereas LESS parsing is more complicated.
Click to expand...
You're not wrong.

I've cobbled together a little templater function named parse_less_color. This can take a typical color value, which may include a mixture of XF and Less colour properties, adjustments and functions, parse it and pull out the resulting actual color.

Long story short:
JSON: 
"color": "{{ parse_less_color(property('textColor', '#141414')) }}"
Or...
JSON: 
"color": "{{ parse_less_color('xf-intensify(rgb(249, 250, 250), 87%)') }}"
Now produces:
JSON: 
"color": "#191e1e";

In addition to that, all of these values are now escaped properly for JSON.

JSON: 
                    {
                        "base": {
                            "color": "#191e1e",
                            "fontFamily": "\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Oxygen\",      \"Ubuntu\", \"Cantarell\", \"Fira Sans\",      \"Droid Sans\", \"Helvetica Neue\", sans-serif",
                            "fontSize": "16px"
                        },
                        "invalid": {
                            "color": "#c84448"
                        }
                    }

I've dropped the line-height value too, simply because there were warnings from the Stripe JS that it wasn't recommended. I think that should be ok, anyway, in most cases.
 
Incidentally, this approach is now used on the metaThemeColor property (which is what colours the Chrome browser on Android to match the site colours) so that if advanced functions / properties are used for that value then they will be parsed to the correct colour properly.
 
Back
Top Bottom