Ad

Typing Props For Stripe Injected Component

- 1 answer

I am having trouble with the typing for this.props.stripe. I am unsure of what type I need to put there.

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-stripe-elements/index.d.ts#L44

@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
Ad