diff --git a/src/forms/StripePaymentForm/StripePaymentForm.css b/src/forms/StripePaymentForm/StripePaymentForm.css index bcae6021..c24e4c63 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 e8779e01..4589c8df 100644 --- a/src/forms/StripePaymentForm/StripePaymentForm.js +++ b/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 { ) : 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 05732a0a..a90a1a51 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, 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.",