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

user_17903140 0
Viewed 104

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.

stripe-payments typescript reactjs javascript
2 Answers

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>;
    }
  }
}
user_97697310

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

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