Ad
Typing Props For Stripe Injected Component
I am having trouble with the typing for this.props.stripe
. I am unsure of what type I need to put there.
@types/react-stripe-elements
is installed.
<StripeProvider apiKey="xxx">
<div className="example">
<h1>React Stripe Elements Example</h1>
<Elements>
<CheckoutForm />
</Elements>
</div>
</StripeProvider>
import React from 'react';
import {CardElement, injectStripe } from 'react-stripe-elements';
type CheckoutFormProps = {
stripe: StripeProps
}
class CheckoutForm extends React.Component<CheckoutFormProps, {}> {
submit = async (ev: React.SyntheticEvent) => {
// User clicked submit
let {token} = await this.props.stripe.createToken({name: "Name"});
console.log(token);
}
render() {
return (
<div className="checkout">
<p>Would you like to complete the purchase?</p>
<CardElement />
<button onClick={this.submit}>Purchase</button>
</div>
);
}
}
export default injectStripe(CheckoutForm);
Error: Cannot find name 'StripeProps.
I have also tried InjectedStripeProps
.
Ad
Answer
Import namespace ReactStripeElements
from react-stripe-elements
:
import { ReactStripeElements } from 'react-stripe-elements'
Then you can reference the interface:
ReactStripeElements.StripeProps
Ad
source: stackoverflow.com
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?
Ad