diff --git a/src/forms/StripePaymentForm/StripePaymentForm.css b/src/forms/StripePaymentForm/StripePaymentForm.css index bcae6021da..c24e4c637d 100644 --- 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 index e8779e0107..248f741d39 100644 --- 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 { ) : null; - return ( + return config.stripe.publishableKey ? (

@@ -275,6 +277,10 @@ class StripePaymentForm extends Component { + ) : ( +
+ +
); } } diff --git a/src/translations/en.json b/src/translations/en.json index 05732a0aa6..b0b811fd31 100644 --- 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.",