#DustinJSilk
nimble ruin
crude perch
Hi
How are you doing your e2e tests?
You are getting this issue on what part exactly for your Checkout flow ?
wintry cape
Hi @crude perch !
I’m getting them as soon as my home page loads.
So I’m not even interacting with stripe yet other than loading the stripe.js script
crude perch
How are you loading Stripejs? did you tried to load it as a module ?
something like import { loadStripe } from '@stripe/stripe-js';
const stripe = loadStripe(<stripe_pk>);
wintry cape
Im loading it in my head using: <script async src="https://js.stripe.com/v3"></script>
crude perch
Try loading it as a module.
Check this article it elaborate well testing Stripe Element with playwright:
https://dev.to/stripe/integration-testing-the-payment-element-with-playwright-1j9n
https://github.com/matthewling-stripe/playwright-payment-element
wintry cape
But isnt it a bug that stripe is returning an incorrect CSP policy?
Im using a framework that makes it difficult to bundle JS modules because they are lazy loaded and only downloaded when used
Since stripe needs to run from the start of the page load, i need to include the full script in the head
crude perch
But isnt it a bug that stripe is returning an incorrect CSP policy?
That depends on how you try to load the script.
crude perch
Since stripe needs to run from the start of the page load, i need to include the...
No you can lazy load stripe js, as a module:
https://stripe.com/docs/js/including#:~:text=Asynchronous and deferred loading of Stripe.js
wintry cape
ok ill see if i can get a module loaded in
Ok i've tried loading it using loadStripe(pk_...) and it still seems to throw CSP errors in playwright
crude perch
What framework are you using ?
wintry cape
crude perch
Qwik is quiet simular to react AFAIK, built on top of JSX.
Try running this test with playwright and react and see if you manage to reproduce the issue:
https://github.com/matthewling-stripe/playwright-payment-element
wintry cape
ok ill give that a go now!
crude perch
We don't have an official sdk to that framework, but the closest one is React
SO you should probably refer to that github repository and try to see what is blocking your e2e test.
wintry cape
Looks like Im still getting CSP errors when running that repository as-is
crude perch
Give couple of minute while I check...
wintry cape
Great thanks!
crude perch
How did you run that repository ?
wintry cape
It looks like stripe adds this to the iFrame when in playwright:
<x-pw-glass style="position: fixed; inset: 0px; z-index: 2147483647; pointer-events: none; display: flex;"></x-pw-glass>
<!-- #shadow-root (closed) -->
<x-pw-action-point style="top: 480.48px; left: 261.33px;"></x-pw-action-point>
<style>
x-pw-tooltip {
align-items: center;
backdrop-filter: blur(5px);
background-color: rgba(0, 0, 0, 0.7);
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 3.6px 3.7px,
rgba(0, 0, 0, 0.15) 0px 12.1px 12.3px,
rgba(0, 0, 0, 0.1) 0px -2px 4px,
rgba(0, 0, 0, 0.15) 0px -12.1px 24px,
rgba(0, 0, 0, 0.25) 0px 54px 55px;
color: rgb(204, 204, 204);
display: none;
font-family: 'Dank Mono', 'Operator Mono', Inconsolata, 'Fira Mono',
'SF Mono', Monaco, 'Droid Sans Mono', 'Source Code Pro', monospace;
font-size: 12.8px;
font-weight: normal;
left: 0;
line-height: 1.5;
max-width: 600px;
padding: 3.2px 5.12px 3.2px;
position: absolute;
top: 0;
}
x-pw-action-point {
position: absolute;
width: 20px;
height: 20px;
background: red;
border-radius: 10px;
pointer-events: none;
margin: -10px 0 0 -10px;
z-index: 2;
}
*[hidden] {
display: none !important;
}
</style>
I install the dependencies then ran: npx playwright test --debug
crude perch
I just run it and I don't have the error you are getting 🤔 ?
wintry cape
Hmmm, weird!
i only see those errors when i debug and then open the debug browsers console
(I have a test case that will turn browser console errors into playwright errors so that i dont deploy any issues without knowing, so you might need to view in debug and open the console to see the issue)
crude perch
(I have a test case that will turn browser console errors into playwright errors...
I don't understand, when you run this test
https://github.com/matthewling-stripe/playwright-payment-element/blob/main/tests/playwright-payment-element.spec.js
You are getting the CSP error too?
wintry cape
Yup! Give me 2 minutes, i'll record a video
crude perch
Ok and when you run normally you aren't getting CSP
crude perch
Ok thanks for confirming. Can you share your accountId ?
This issue will require an in-depth investigation from our team in order to figure out the root cause. Can we ask that you write in to us via https://support.stripe.com/contact, providing as much detail and context as possible (you can also reference this thread).
Also, you can check the 'developer' box when writing in it will come straight to our team.
wintry cape
Ok i will do that! Thanks for the help
crude perch
Can you share with me your accountId between please ?
wintry cape
Sure: acct_1GGnLXFlWrS9Xt7Z
crude perch
Thanks!