Merge pull request #1042 from sharetribe/show-error-in-payout-modal-if-no-stripe-key

Show error if Stripe publishable key is not configured

CHANGELOG.md

@@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [Fix] Add error handling to `PayoutDetailsForm` and `StripePaymentForm` in case Stripe publishable
+  key is not configured yet. [#1042](https://github.com/sharetribe/flex-template-web/pull/1042)
 - [fix] FieldBirthdayInput: placeholder text was not selected by default.
   [#1039](https://github.com/sharetribe/flex-template-web/pull/1039)
 

README.md

@@ -20,8 +20,11 @@ yarn run config                                                # add the mandato
 yarn run dev                                                   # start the dev server, this will open a browser in localhost:3000
 ```
 
-### If you are using Stripe account created after 19th of February 2019 creating compan accounts is temporalily unavailable. 
-This is due the changes in Stripe API (https://stripe.com/docs/upgrades#api-changelog). Issues with individual accounts were fixed in release [2.12.0](https://github.com/sharetribe/flex-template-web/releases/tag/v2.12.0).
+### If you are using Stripe account created after 19th of February 2019 creating compan accounts is temporalily unavailable.
+
+This is due the changes in Stripe API (https://stripe.com/docs/upgrades#api-changelog). Issues with
+individual accounts were fixed in release
+[2.12.0](https://github.com/sharetribe/flex-template-web/releases/tag/v2.12.0).
 
 You can also follow along the
 [Getting started with FTW](https://www.sharetribe.com/docs/tutorials/getting-started-with-ftw/)

src/forms/PayoutDetailsForm/PayoutDetailsForm.css

@@ -178,3 +178,7 @@
     padding-bottom: 2px;
   }
 }
+
+.missingStripeKey {
+  color: var(--failColor);
+}

src/forms/PayoutDetailsForm/PayoutDetailsForm.js

@@ -101,7 +101,7 @@ const PayoutDetailsFormComponent = props => (
         </ExternalLink>
       );
 
-      return (
+      return config.stripe.publishableKey ? (
         <Form className={classes} onSubmit={handleSubmit}>
           {usesOldAPI ? (
             <div className={css.sectionContainer}>
@@ -184,6 +184,10 @@ const PayoutDetailsFormComponent = props => (
             </React.Fragment>
           ) : null}
         </Form>
+      ) : (
+        <div className={css.missingStripeKey}>
+          <FormattedMessage id="PayoutDetailsForm.missingStripeKey" />
+        </div>
       );
     }}
   />

src/forms/StripePaymentForm/StripePaymentForm.css

@@ -112,3 +112,7 @@
     margin-top: 17px;
   }
 }
+
+.missingStripeKey {
+  color: var(--failColor);
+}

src/forms/StripePaymentForm/StripePaymentForm.js

@@ -98,20 +98,22 @@ class StripePaymentForm extends Component {
     if (!window.Stripe) {
       throw new Error('Stripe must be loaded for StripePaymentForm');
     }
-    this.stripe = window.Stripe(config.stripe.publishableKey);
-    const elements = this.stripe.elements(stripeElementsOptions);
-    this.card = elements.create('card', { style: cardStyles });
-    this.card.mount(this.cardContainer);
-    this.card.addEventListener('change', this.handleCardValueChange);
 
-    // EventListener is the only way to simulate breakpoints with Stripe.
-    window.addEventListener('resize', () => {
-      if (window.innerWidth < 1024) {
-        this.card.update({ style: { base: { fontSize: '18px', lineHeight: '24px' } } });
-      } else {
-        this.card.update({ style: { base: { fontSize: '20px', lineHeight: '32px' } } });
-      }
-    });
+    if (config.stripe.publishableKey) {
+      this.stripe = window.Stripe(config.stripe.publishableKey);
+      const elements = this.stripe.elements(stripeElementsOptions);
+      this.card = elements.create('card', { style: cardStyles });
+      this.card.mount(this.cardContainer);
+      this.card.addEventListener('change', this.handleCardValueChange);
+      // EventListener is the only way to simulate breakpoints with Stripe.
+      window.addEventListener('resize', () => {
+        if (window.innerWidth < 1024) {
+          this.card.update({ style: { base: { fontSize: '18px', lineHeight: '24px' } } });
+        } else {
+          this.card.update({ style: { base: { fontSize: '20px', lineHeight: '32px' } } });
+        }
+      });
+    }
   }
   componentWillUnmount() {
     if (this.card) {
@@ -244,7 +246,7 @@ class StripePaymentForm extends Component {
       </div>
     ) : null;
 
-    return (
+    return config.stripe.publishableKey ? (
       <Form className={classes} onSubmit={this.handleSubmit}>
         <h3 className={css.paymentHeading}>
           <FormattedMessage id="StripePaymentForm.paymentHeading" />
@@ -275,6 +277,10 @@ class StripePaymentForm extends Component {
           </PrimaryButton>
         </div>
       </Form>
+    ) : (
+      <div className={css.missingStripeKey}>
+        <FormattedMessage id="StripePaymentForm.missingStripeKey" />
+      </div>
     );
   }
 }

src/translations/en.json

@@ -552,6 +552,7 @@
   "PayoutDetailsForm.lastNameLabel": "Last name",
   "PayoutDetailsForm.lastNamePlaceholder": "Doe",
   "PayoutDetailsForm.lastNameRequired": "This field is required",
+  "PayoutDetailsForm.missingStripeKey": "Stripe publishable key has not been configured to this marketplace. Unfortunately, you can't save your payout preferences yet.",
   "PayoutDetailsForm.personalDetailsAdditionalOwnerTitle": "Additional owner details",
   "PayoutDetailsForm.personalDetailsTitle": "Personal details",
   "PayoutDetailsForm.personalIdNumberTitle": "Personal id number",
@@ -752,6 +753,7 @@
   "StripePaymentForm.messageLabel": "Say hello to your host {messageOptionalText}",
   "StripePaymentForm.messageOptionalText": "• optional",
   "StripePaymentForm.messagePlaceholder": "Hello {name}! I'm looking forward to…",
+  "StripePaymentForm.missingStripeKey": "Stripe publishable key has not been configured to this marketplace. Unfortunately, booking the listing is not possible.",
   "StripePaymentForm.paymentHeading": "Payment",
   "StripePaymentForm.stripe.api_connection_error": "Could not connect to Stripe API.",
   "StripePaymentForm.stripe.api_error": "Error in Stripe API.",