Property 'stripe-pricing-table' does not exist on type 'JSX.IntrinsicElements'-CodePudding

I am following the Stripe documentation for embedding a pricing table at link, but run into this error: "Property 'stripe-pricing-table' does not exist on type 'JSX.IntrinsicElements'".

Here is my code:

import React from 'react';

export default function PricingTable() {
  return (
    <stripe-pricing-table
      pricing-table-id="prctbl_xxxxx"
      publishable-key="pk_test_xxxxx"
    ></stripe-pricing-table>
  );
}

I'd appreciate any help on this.

CodePudding user response：

Have you imported the pricing-table.js script in the index.html?

<script async src="https://js.stripe.com/v3/pricing-table.js"></script>

CodePudding user response：

I think that's more of a Typescript problem, you might have to declare a type for stripe-pricing-table along the lines of

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