maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-26 06:47:17 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Show error also in StripePaymentForm

Browse source
This commit is contained in:
Jenni Nurmi 2019-03-07 13:54:13 +02:00
parent 48c1f51797
commit 21d504013c
3 changed files with 25 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/forms/StripePaymentForm/StripePaymentForm.css
View file

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

34
src/forms/StripePaymentForm/StripePaymentForm.js
View file

@ -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>
);
}
}

1
src/translations/en.json
View file

@ -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.",