Include stripe.js for fraud resistance (MNTOR-1769) #4227
Conversation
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| "use client"; |
There was a problem hiding this comment.
Could you explain why this needs to be a client component, and why it can't just be imported directly in the layout?
There was a problem hiding this comment.
I opted for including stripe.js as a module, this is also how MDN does it.
An alternative would be to directly add <script src="https://js.stripe.com/v3" async></script>. When it’s imported as a side effect, like it is in this PR, the <script> is being injected client side and expects the DOM to be present — thus the "use client".
There was a problem hiding this comment.
But client components are still pre-rendered on the server, so there might still not be a DOM present. Possibly you need to do a dynamic import("@stripe/stripe-js") inside a useEffect to make it only run on the client side?
There was a problem hiding this comment.
That is true. As is it would run on the server, but it is not leading to an error since this is being dealt with by the script. It is definitely better to make the component import it client-only as suggested — updated in 76d6c81.
References:
Jira: MNTOR-1769
Description
Include
stripe.jsfor fraud resistance as requested in MNTOR-1769.How to test
Make sure
<script src="https://js.stripe.com/v3"></script>is present andstripe.jsis being loaded without any CSP errors.