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 ? (
+ ) : ( +