Trigger form onChange properly

src/containers/StripePaymentForm/StripePaymentForm.example.js

@@ -1,28 +1,17 @@
-import React, { Component } from 'react';
 import { fakeIntl } from '../../util/test-data';
 import StripePaymentForm from './StripePaymentForm';
 
-class StripePaymentFormExample extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { token: null };
-  }
-  render() {
-    const handleSubmit = values => {
-      const { token } = values;
-      this.setState({ token });
-    };
-    return (
-      <div>
-        <StripePaymentForm {...this.props} onSubmit={handleSubmit} />
-        {this.state.token ? <p>Token: {this.state.token}</p> : null}
-      </div>
-    );
-  }
-}
-
 export const Empty = {
-  component: StripePaymentFormExample,
-  props: { intl: fakeIntl, formId: 'StripePaymentFormExample' },
+  component: StripePaymentForm,
+  props: {
+    formId: 'StripePaymentFormExample',
+    onChange: values => {
+      console.log('form onChange:', values);
+    },
+    onSubmit: values => {
+      console.log('form onSubmit:', values);
+    },
+    intl: fakeIntl,
+  },
   group: 'forms',
 };

src/containers/StripePaymentForm/StripePaymentForm.js

@@ -112,12 +112,13 @@ class StripePaymentForm extends Component {
     }
   }
   handleCardValueChange(event) {
-    const { intl } = this.props;
+    const { intl, onChange } = this.props;
     const { error, complete } = event;
     this.setState({
       error: error ? stripeErrorTranslation(intl, error) : null,
       cardValueValid: complete,
     });
+    onChange({ token: null });
   }
   handleSubmit(event) {
     event.preventDefault();
@@ -206,6 +207,7 @@ StripePaymentForm.defaultProps = {
   rootClassName: null,
   inProgress: false,
   paymentInfo: null,
+  onChange: () => null,
 };
 
 const { bool, func, string } = PropTypes;
@@ -217,6 +219,7 @@ StripePaymentForm.propTypes = {
   formId: string.isRequired,
   intl: intlShape.isRequired,
   onSubmit: func.isRequired,
+  onChange: func,
   paymentInfo: string,
 };