Search code examples
reactjsstripe-paymentstsx

How to use stripe library on tsx files. Getting error

I have a project which is on react but files are not .js instead they are .tsx and I am trying to use stripe library but keep getting error.

error screen shot

I have tried few different libraries which help setting up stripe but I am keep getting stuck on this errr.

Please help or direct me to correct library which help me setup stripe.

my codes are

import ReactDOM from "react-dom";
import StripeCheckout from 'react-stripe-checkout';
import axios from "axios";


function handleToken(token, addresses) {
    console.log(token, addresses);
  }

export default function Webinar() {

  return (
    <div className="container">

       <StripeCheckout stripeKey = "mykey"
            token={handleToken}
            name="Tesla Roadster"
            billingAddress
            shippingAddress
            />

    </div>
  );
}
Solution

  • The problem is saying that your Typescript repo is now strict mode enabled which forces you specify the typing. If you wish to keep it silent, you can simply switch it to false in tsconfig.json:

    {
  "compilerOptions": {
    "strict": false,
    // ...
  }
}

    Change your function handleToken to be a variable with has the same type of your component prop as following:

    const handleToken: StripeCheckout['props']['token'] = (token) => {
  // You can receive hint from token type here
}