Add inProgress state to StripePaymentForm in checkout

src/containers/CheckoutPage/CheckoutPage.js

@@ -302,7 +302,7 @@ export class CheckoutPageComponent extends Component {
                 ? <StripePaymentForm
                     className={css.paymentForm}
                     onSubmit={this.handleSubmit}
-                    disableSubmit={this.state.submitting}
+                    inProgress={this.state.submitting}
                     formId="CheckoutPagePaymentForm"
                     paymentInfo={intl.formatMessage({ id: 'CheckoutPage.paymentInfo' })}
                   />

src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap

@@ -88,8 +88,8 @@ exports[`CheckoutPage matches snapshot 1`] = `
             values={Object {}} />
         </h3>
         <InjectIntl(StripePaymentForm)
-          disableSubmit={false}
           formId="CheckoutPagePaymentForm"
+          inProgress={false}
           onSubmit={[Function]}
           paymentInfo="CheckoutPage.paymentInfo" />
       </section>

src/containers/StripePaymentForm/StripePaymentForm.js

@@ -150,8 +150,9 @@ class StripePaymentForm extends Component {
       });
   }
   render() {
-    const { className, rootClassName, disableSubmit, formId, paymentInfo } = this.props;
-    const submitDisabled = disableSubmit || this.state.submitting || !this.state.cardValueValid;
+    const { className, rootClassName, inProgress, formId, paymentInfo } = this.props;
+    const submitInProgress = this.state.submitting || inProgress;
+    const submitDisabled = !this.state.cardValueValid || submitInProgress;
     const classes = classNames(rootClassName || css.root, className);
     const cardClasses = classNames(css.card, {
       [css.cardSuccess]: this.state.cardValueValid,
@@ -173,7 +174,12 @@ class StripePaymentForm extends Component {
         {this.state.error ? <span style={{ color: 'red' }}>{this.state.error}</span> : null}
         <div className={css.submitContainer}>
           {paymentInfo ? <p className={css.paymentInfo}>{paymentInfo}</p> : null}
-          <PrimaryButton className={css.submitButton} type="submit" disabled={submitDisabled}>
+          <PrimaryButton
+            className={css.submitButton}
+            type="submit"
+            inProgress={submitInProgress}
+            disabled={submitDisabled}
+          >
             <FormattedMessage id="StripePaymentForm.submitPaymentInfo" />
           </PrimaryButton>
         </div>
@@ -185,7 +191,7 @@ class StripePaymentForm extends Component {
 StripePaymentForm.defaultProps = {
   className: null,
   rootClassName: null,
-  disableSubmit: false,
+  inProgress: false,
   paymentInfo: null,
 };
 
@@ -194,7 +200,7 @@ const { bool, func, string } = PropTypes;
 StripePaymentForm.propTypes = {
   className: string,
   rootClassName: string,
-  disableSubmit: bool,
+  inProgress: bool,
   formId: string.isRequired,
   intl: intlShape.isRequired,
   onSubmit: func.isRequired,