fix(plus): load stripe.js for fraud prevention #9318
Conversation
Required by SubPlat.
github-actions
bot
added
dependencies
There was a problem hiding this comment.
Couple of nits, looks good overall.
Another question I'm not sure about, do we want to turn this off if DEV_MODE or WRITER_MODE are set? Will loading this script locally when not necessary throw off the fraud detection? I guess we have to load it for local dev to ensure it doesn't break anything, but it doesn't need to load with WRITER_MODE set, though do we already turn off plus features in the yari we ship to npm for content?
| @@ -0,0 +1,4 @@ | |||
| import "@stripe/stripe-js"; | |||
| export default function Stripe() { | |||
| return <></>; | |||
There was a problem hiding this comment.
I think generally better:
| return <></>; | |
| return null; |
| @@ -167,6 +170,7 @@ function OfferDetails({ | |||
| }).format(monthlyPrice / 100); | |||
| return ( | |||
| <section className="subscribe-detail" id={offerDetails.id}> | |||
| <Stripe></Stripe> | |||
There was a problem hiding this comment.
| <Stripe></Stripe> | |
| <Stripe /> |
| @@ -0,0 +1,4 @@ | |||
| import "@stripe/stripe-js"; | |||
There was a problem hiding this comment.
I wonder if it's better to use an async import() rather than React.lazy. I'm unsure how something like:
export default function Stripe() {
(async () => {
await import("@stripe/stripe-js");
})()
return null
}behaves with re-renders. I guess you could wrap it in a useCallback, but then is it any less "reacty" than just using React.lazy?
github-actions
bot
added
the
merge conflicts 🚧
|
This pull request has merge conflicts that must be resolved before it can be merged. |
github-actions
bot
removed
the
merge conflicts 🚧
Summary
Internal requirement by SubPlat: https://mozilla-hub.atlassian.net/browse/MP-455