abranti | Stripe Developers | Page 1

night epochBOT Sep 25, 2023, 4:05 PM

#

wild elbow Sep 25, 2023, 4:06 PM

#

Hi 👋

What error are you seeing?

glass kraken Sep 25, 2023, 4:06 PM

#

The docs say we need to use iframe with allow-top-navigation

#

[Report Only] Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

#

[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'none'".

19[Report Only] Refused to connect to '<URL>' because it violates the following Content Security Policy directive: "connect-src 'none'".

wild elbow Sep 25, 2023, 4:09 PM

#

And your pricing table is not loading?

glass kraken Sep 25, 2023, 4:10 PM

#

yes

wild elbow Sep 25, 2023, 4:11 PM

#

Can you share the HTML code where you have the pricing table?

glass kraken Sep 25, 2023, 4:11 PM

#

<iframe sandbox="allow-top-navigation">
<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
<stripe-pricing-table pricing-table-id="prctbl_1NsNibDmGGo1DisCQQrsW4ta"
publishable-key="pk_live_51NUn9HDmGGo1DisCdvpjUTEgLYqNbBqLOQr7NtR0mNMnU79apIQcz9ACjJJ8Hlj2paxIK164LZanFAmK0Vp5V7XZ00k7FC2YnT">
</stripe-pricing-table>
</iframe>

wild elbow Sep 25, 2023, 4:15 PM

#

And where in the docs do you see support for loading within an <iframe>? https://stripe.com/docs/payments/checkout/pricing-table#embed

glass kraken Sep 25, 2023, 4:18 PM

#

#

https://stripe.com/docs/payments/checkout/pricing-table#:~:text=Checkout redirect—The pricing table can’t redirect customers to checkout if your website provider sandboxes the embed code in an iframe without the allow-top-navigation attribute enabled. Contact your website provider to enable this setting

Embeddable pricing table for SaaS businesses

Display a pricing table on your website and take customers directly to Stripe Checkout.

#

Basically it says it doesn't work without the allow-top-navigation attribute which implies it works with this attribute

wild elbow Sep 25, 2023, 4:21 PM

#

The error message seems to imply that you need to set a CSP property on the iframe. We detail what CSP policies need to be set here: https://stripe.com/docs/payments/checkout/pricing-table#csp

glass kraken Sep 25, 2023, 4:23 PM

#

Still not working

#

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="frame-src https://js.stripe.com; script-src https://js.stripe.com">
    <title>Title</title>
</head>
<body>

<iframe sandbox="allow-top-navigation">
    <script async unsafe-inline src="https://js.stripe.com/v3/pricing-table.js"></script>
    <stripe-pricing-table pricing-table-id="prctbl_1NsNibDmGGo1DisCQQrsW4ta"
                          publishable-key="pk_live_51NUn9HDmGGo1DisCdvpjUTEgLYqNbBqLOQr7NtR0mNMnU79apIQcz9ACjJJ8Hlj2paxIK164LZanFAmK0Vp5V7XZ00k7FC2YnT">
    </stripe-pricing-table>
</iframe>

</body>
</html>

#

Did you get it working?

wild elbow Sep 25, 2023, 4:25 PM

#

What do you mean?

glass kraken Sep 25, 2023, 4:25 PM

#

wild elbow The error message seems to imply that you need to set a CSP property on the ifra...

I have added this policy, and it still does not work

wild elbow Sep 25, 2023, 4:26 PM

#

Okay, I was able to repro the failure

glass kraken Sep 25, 2023, 4:26 PM

#

Even tried with the unsafe-inline flag

#

#

No error appears on the console.. just an empty iframe 🤔

wild elbow Sep 25, 2023, 4:28 PM

#

Yeah, mine too

glass kraken Sep 25, 2023, 4:28 PM

#

maybe we have to escalate this.. right?

wild elbow Sep 25, 2023, 4:31 PM

#

Let me check with a few of my colleagues first. It's a little busy so I cannot do all the testing I would like.

glass kraken Sep 25, 2023, 4:31 PM

#

Ok thank you.

#

I will have to go now but will check this thread soon

wild elbow Sep 25, 2023, 4:32 PM

#

We close threads after some time of inactivity but you can still review the answers I will post and you can always come back to ask new questions in the main channel.

glass kraken Sep 25, 2023, 4:33 PM

#

Ok thanks - if you can't solve it will you open a ticket or something?

wild elbow Sep 25, 2023, 4:34 PM

#

If I cannot find you an answer I will recommend you write an email to Support and include the code snippet you shared here. That will create a ticket and get it escalated to staff like me who handle these kinds of issues.

glass kraken Sep 25, 2023, 4:35 PM

#

ok

wild elbow Sep 25, 2023, 5:02 PM

#

Okay we got this to work by using the following <iframe> sandbox attributes

<iframe src="http://localhost:3000/table.html" 

sandbox="allow-top-navigation allow-top-navigation-by-user-activation allow-scripts allow-same-origin allow-presentation allow-popups-to-escape-sandbox allow-popups allow-pointer-lock allow-orientation-lock allow-modals allow-forms">
    
</iframe>

#abranti