Next.js Discord

Discord Forum
\n \"\n publishable-key=\"\"\n >\n ","dateCreated":"2023-10-31T07:26:47.000Z","answerCount":9,"author":{"@type":"Person","name":"Yellow croaker"},"acceptedAnswer":{"@type":"Answer","text":"that seems like a stripe problem with your integration. Please try to refer to their discord and there the support chat. They are very helpful ^^","url":"https://nextjs-forum.com/post/1168813302437138474#message-1169006820761817088","dateCreated":"2023-10-31T20:15:45.000Z","author":{"@type":"Person","name":"B33fb0n3"},"upvoteCount":1}}}

Stripe and Embeddable pricing table in nextjs

Answered
Yellow croaker posted this in #help-forum
Open in Discord
Yellow croakerOP
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>
Answered by B33fb0n3
that seems like a stripe problem with your integration. Please try to refer to their discord and there the support chat. They are very helpful ^^
View full answer

9 Replies

@B33fb0n3 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
Yellow croakerOP
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).
B33fb0n3
you already changed these values?
pricing-table-id="<TableId>"
publishable-key="<Public key>"
@B33fb0n3 you already changed these values? pricing-table-id="<TableId>" publishable-key="<Public key>"
Yellow croakerOP
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;
@Yellow croaker Yes i changed the values**
B33fb0n3
that seems like a stripe problem with your integration. Please try to refer to their discord and there the support chat. They are very helpful ^^
Answer
@B33fb0n3 that seems like a stripe problem with your integration. Please try to refer to their discord and there the support chat. They are very helpful ^^
Yellow croakerOP
Thanks from The tip. I went implemented The payment option without The embedded table. 👍🏽