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

Question

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.

Answer 1

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

import * as React from 'react'

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