Show error also in StripePaymentForm

sharetribe · Mar 7, 2019 · c7926f3 · c7926f3
1 parent 48c1f51
commit c7926f3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/src/forms/StripePaymentForm/StripePaymentForm.css b/src/forms/StripePaymentForm/StripePaymentForm.css
@@ -112,3 +112,7 @@
     margin-top: 17px;
   }
 }
+
+.missingStripeKey {
+  color: var(--failColor);
+}
diff --git a/src/forms/StripePaymentForm/StripePaymentForm.js b/src/forms/StripePaymentForm/StripePaymentForm.js
@@ -98,12 +98,13 @@ class StripePaymentForm extends Component {
     if (!window.Stripe) {
       throw new Error('Stripe must be loaded for StripePaymentForm');
     }
+
+    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) {
@@ -113,6 +114,7 @@ class StripePaymentForm extends Component {
       }
     });
   }
+  }
   componentWillUnmount() {
     if (this.card) {
       this.card.removeEventListener('change', this.handleCardValueChange);
@@ -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>
     );
   }
 }

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -753,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, doing a booking is not possible yet.",
   "StripePaymentForm.paymentHeading": "Payment",
   "StripePaymentForm.stripe.api_connection_error": "Could not connect to Stripe API.",
   "StripePaymentForm.stripe.api_error": "Error in Stripe API.",