import React, { Component } from 'react';
import {
  CardElement,
  CardNumberElement,
  CardExpiryElement,
  CardCVCElement,
  PostalCodeElement,
  injectStripe
} from 'react-stripe-elements';
import { Label } from 'reactstrap';

class _PaymentForm extends Component {
  handleSubmit = evt => {
    evt.preventDefault();
    console.log('handleSubmit');
  };

  handleClick = () => {
    console.log('handleClick');
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <Label>
          Card Number
          <CardNumberElement onClick={this.handleClick} style={{base: {fontSize: '18px'}}}/>
        </Label>
        <br />
        <Label>
          Card Expiry
          <CardExpiryElement onClick={this.handleClick} style={{base: {fontSize: '18px'}}}/>
        </Label>
        <br />
        <Label>
          Card CVC
          <CardCVCElement onClick={this.handleClick} style={{base: {fontSize: '18px'}}}/>
        </Label>
        <br />
        <Label>
          Zip
          <PostalCodeElement onClick={this.handleClick} style={{base: {fontSize: '18px'}}}/>
        </Label>
      </form>
    );
  }

}

const PaymentForm = injectStripe(_PaymentForm);

export default PaymentForm;
================================================================================================================
import React, { Component } from 'react';
import { Modal, ModalHeader, ModalBody, Button } from 'reactstrap';
import { Elements } from 'react-stripe-elements';

import PaymentForm from './PaymentForm';

class PaymentModal extends Component {
  constructor(props) {
    super(props);
    this.state = { showPayment: false };
  }

  handleSubmit = () => {
    this.setState({ showPayment: false });
  };

  handleClick = () => {
    this.setState({ showPayment: true });
  };

  render() {
    return this.state.showPayment ? (
      <Modal isOpen={this.state.showPayment}>
        <ModalHeader>Modal Header</ModalHeader>
        <ModalBody>
          <Elements>
            <PaymentForm />
          </Elements>
          <Button onClick={this.handleSubmit}>Submit</Button>
        </ModalBody>
      </Modal>
    ) : (
      <Button onClick={this.handleClick} className="mt-1">
        Add Payment
      </Button>
    );
  }
}

export default PaymentModal;
================================================================================================================
const App = () => (
  <StripeProvider apiKey={STRIPE_API_KEY}>
    <div>
      <Home />
    </div>
  </StripeProvider>
);