#abranti

1 messages · Page 1 of 1 (latest)

tender nightBOT
solemn pollen
#

Hello

#

What's the issue exactly

winged perch
#

I need to place it on an Iframe and the docs say:
I need to allow-top-navigation

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.

#

It seems that I had to do a bunch more things

#

the code I have now is.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe width="100%" height="573px" frameBorder="0" src="https://us-central1-alpacalaw-a8eb0.cloudfunctions.net/show_pricing_page?uid=fasfa&email=jpiabrantes@gmail.com" 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>
</body>
</html>```
#

The code given by https://us-central1-alpacalaw-a8eb0.cloudfunctions.net/show_pricing_page?uid=fasfa&email=jpiabrantes@gmail.com is:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Stripe Pricing Table</title>
</head>

<body>
    <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
    <div id="pricing-div">
        <stripe-pricing-table pricing-table-id="{pricing_table_id}"
            publishable-key="{publishable_key}"
            customer-email="{email}"
            client-reference-id="{uid}"
        >
        </stripe-pricing-table>
    </div>
</body>

</html>````
#

I'm still getting errors tho: Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://js.stripe.com') does not match the recipient window's origin ('https://us-central1-alpacalaw-a8eb0.clou

#

And for some reason if I place the html right on the iframe it doesn't show anything.

solemn pollen
#

Hmmm this feels like a configuration issue involving your server/host in this case.

#

Have you tried to run this locally?

winged perch
#

it's not - I have tried running locally and without any server just pasting the html into the iframe

solemn pollen
#

What does that mean?

#

I don't know what:

pasting the html into the iframe
means to be clear.

winged perch
#

My question is simple. How can one embed the pricing table in an iframe?

solemn pollen
#

As the docs state, as long as your hosting provider permits top level navigation then it should just work.

#

There is no other requirement on our end.

winged perch
# solemn pollen I don't know what: > pasting the html into the iframe means to be clear.

It means I don't have a src I just do this:

<iframe width="100%" height="573px" frameBorder="0" 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">
  <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
  <div id="pricing-div">
    <stripe-pricing-table pricing-table-id="{pricing_table_id}"
                          publishable-key="{publishable_key}"
                          customer-email="{email}"
                          client-reference-id="{uid}"
    >
    </stripe-pricing-table>
</iframe>
solemn pollen
#

That's not how iframes work though

winged perch
#

Can you write some code that works?

solemn pollen
#

For the simplest local test all you need is something like: <body> <script async src="https://js.stripe.com/v3/pricing-table.js"></script> <stripe-pricing-table pricing-table-id="prctbl_xxx" publishable-key="pk_test_xxxx" > </stripe-pricing-table> </body>

    <iframe height="100%" width="100%" src="http://localhost:4242/checkout.html">
    </iframe>
</body>```
winged perch
#

does that work for you?

solemn pollen
#

Yes

winged perch
#

I can't reproduce that, what are you using to host locally?

solemn pollen
#

A Node Express backend

winged perch
#

yes I had the same results when the src was http

#

it started failing on https

solemn pollen
#

Okay so yeah that indicates it is something to do with your hosting provider then

winged perch
#

When I give the error to chatGPT here's what it says:

CORS Headers: If you're the owner of the target website (https://js.stripe.com), make sure that it includes the appropriate Cross-Origin Resource Sharing (CORS) headers to allow communication from other origins.

thick shadow
#

Professional advice: ChatGPT ONLY recreates text that is "plausible" - it in no way even understands what it means to be "correct". AT BEST, it should only be used to help you frame the question to do REAL search.

winged perch
#

I am just saying that no one has ever been able to place a pricing table in an iframe in production

#

https requires extra security steps that http ignores

thick shadow
#

as Bismark indicated, this is affected by server (whether local or not) settings to "... permit top level navigation then it should just work..." Without that support, it will fail. He showed you a working example (for him, anyway), so it's a bit broad to say "no one has ever"

winged perch
solemn pollen
#

Sure. But there are many other reasons that your server might prevent a successful redirect from an iframe.

#

We can't list out all of these things in our documentation.

#

We know what our limitations are.

#

Not your hosting provider

winged perch
#

Has anyone ever implemented an iframe of a stripe pricing table in production?

solemn pollen
#

I don't know the answer to that but I assume yes.

winged perch
#

same problem occurs