Stripe and Embeddable pricing table in nextjs | Next.js | Page 1

vast light Oct 31, 2023, 7:26 AM

#

Hello tried to search about this, but there are no questions about this in the discord help section.
How the pricing table should be used with nextjs 14?
https://stripe.com/docs/payments/checkout/pricing-table
Can i just call it it in my billing component. Or should i take something else to account?

        <CardContent>
          <Script
            async
            src="https://js.stripe.com/v3/pricing-table.js"
          ></Script>
          <stripe-pricing-table
            pricing-table-id="<TableId>"
            publishable-key="<Public key>"
          ></stripe-pricing-table>
        </CardContent>

Embeddable pricing table for SaaS businesses

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

keen iceBOT Oct 31, 2023, 7:26 AM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

peak hollow Oct 31, 2023, 3:36 PM

#

vast light Hello tried to search about this, but there are no questions about this in the ...

you can call it like that, yes. The Script will be automatically put inside the head and the other thing is in the dom where you want to

vast light Oct 31, 2023, 3:51 PM

#

peak hollow you can call it like that, yes. The Script will be automatically put inside the ...

Thanks from the answer.
If i use it like that i get this error:

Uncaught (in promise) Error: Invariant: headers() expects to have requestAsyncStorage, none available.

And

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://errors.stripe.com/api/1029/envelope/?sentry_key=sentrycodeHere&sentry_version=7. (Reason: CORS request did not succeed). Status code: (null).

peak hollow Oct 31, 2023, 3:52 PM

#

you already changed these values?

pricing-table-id="<TableId>"
publishable-key="<Public key>"

vast light Oct 31, 2023, 3:54 PM

#

peak hollow you already changed these values? ``` pricing-table-id="<TableId>" publishable-k...

The first error was because i have client component, where i accidentally called get getCurrentUser

But now i only get the second error about the Cross-origin request blocked. My page loads, but it complains about CORS. Yeah i changed the keys to be my values, just like the documenation suggested

#

I think i also need to have client-reference-id

import * as React from 'react';

function PricingPage() {
  // Paste the stripe-pricing-table snippet in your React component
  return (
    <stripe-pricing-table
      pricing-table-id="'{{PRICING_TABLE_ID}}'
"
      publishable-key="PK_Key"

"
      client-reference-id="{{CLIENT_REFERENCE_ID}}"
    >
    </stripe-pricing-table>
  );
}

export default PricingPage;