#rossano

1 messages · Page 1 of 1 (latest)

minor cipherBOT
dire tapir
#

I don't see why not. It's just an HTML element that you add to your page, so whatever mechanism you use to do that with nextJS should be possible, I would imagine.

distant glacier
#

I'm reading the docs: https://stripe.com/docs/payments/checkout/pricing-table
The suggestion is:
`index.html

<head>
<!-- Paste the script snippet in the head of your app's index.html -->
<script
async
src="https://js.stripe.com/v3/pricing-table.js">
</script>
</head>
PricingPage.jsx

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_test_51MgSZxLCFShODpNNaGhErofrEuMOIhuhLnrs1dXJ2L8Ext6ZUjA2fH8Qnnwf8G35fXOqz9EIDgLGODHvOrmcl45m00AVK7PPBF"
>
</stripe-pricing-table>
);
}

export default PricingPage;`

Embeddable pricing table for SaaS businesses

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

#

but the error message is: Property 'stripe-pricing-table' does not exist on type 'JSX.IntrinsicElements'.ts(2339).

dire tapir
#

Are you using Typescript?

distant glacier
#

Yes

#

Here's my code: it works. But I can't use this on production mode

#

import Script from "next/script";

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="pt">
{/*
<head /> will contain the components returned by the nearest parent
head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
*/}
<head />

  <body>{children}</body>
  <Script
    src="https://js.stripe.com/v3/pricing-table.js"
    strategy="lazyOnload"
  />
</html>

);
}

import * as React from "react";

export default function PricingPage() {
// Paste the stripe-pricing-table snippet in your React component
return (
<stripe-pricing-table
pricing-table-id="prctbl_1N5v9vLCFShODpNNEiTp23oy"
publishable-key="pk_live_51MgSZxLCFShODpNNlwoe6dw7TT4CnvMyUizm7WkVjBMZldtuCzV4uPktkZGWPOI3eZmERfNdavGSTAuc2wv2A7jM00aImOt28Z"
></stripe-pricing-table>
);
}

Optimizing: Metadata

Use the Metadata API to define metadata in any layout or page.

dire tapir
#

Okay, that makes sense. It looks like a typescript error. You would either need to tell Typescript to ignore the block of code, or do something along the lines of:

declare global { namespace JSX { interface IntrinsicElements { stripe-pricing-table: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; } } }

The above would make the stripe-pricing-table element known to typescript (keep in mind I haven't tested this exact case, but this question has been asked before).

distant glacier
#

Thank you!

#

That's all. Have good day

dire tapir
#

Likewise!

minor cipherBOT
distant glacier
#

One more question. Is it possible to edit or style it hard coding or only in the dashboard?

blazing gale
#

styling isn't supported right now afaik