From dbe92f5f3dfa0b9cf64f2a8947d7017f4b49f76c Mon Sep 17 00:00:00 2001 From: Jenni Nurmi Date: Fri, 1 Mar 2019 13:11:12 +0200 Subject: [PATCH 1/4] Show error in PayoutDetailsForm if Stripe publishable key is not configured --- src/forms/PayoutDetailsForm/PayoutDetailsForm.css | 4 ++++ src/forms/PayoutDetailsForm/PayoutDetailsForm.js | 6 +++++- src/translations/en.json | 1 + 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsForm.css b/src/forms/PayoutDetailsForm/PayoutDetailsForm.css index a211022dfe..6768720134 100644 --- a/src/forms/PayoutDetailsForm/PayoutDetailsForm.css +++ b/src/forms/PayoutDetailsForm/PayoutDetailsForm.css @@ -178,3 +178,7 @@ padding-bottom: 2px; } } + +.missingStripeKey { + color: var(--failColor); +} diff --git a/src/forms/PayoutDetailsForm/PayoutDetailsForm.js b/src/forms/PayoutDetailsForm/PayoutDetailsForm.js index d5159ab326..94a127ef67 100644 --- a/src/forms/PayoutDetailsForm/PayoutDetailsForm.js +++ b/src/forms/PayoutDetailsForm/PayoutDetailsForm.js @@ -101,7 +101,7 @@ const PayoutDetailsFormComponent = props => ( ); - return ( + return config.stripe.publishableKey ? (
{usesOldAPI ? (
@@ -184,6 +184,10 @@ const PayoutDetailsFormComponent = props => ( ) : null} + ) : ( +
+ +
); }} /> diff --git a/src/translations/en.json b/src/translations/en.json index 038d50d2e5..373524f4ec 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -552,6 +552,7 @@ "PayoutDetailsForm.lastNameLabel": "Last name", "PayoutDetailsForm.lastNamePlaceholder": "Doe", "PayoutDetailsForm.lastNameRequired": "This field is required", + "PayoutDetailsForm.missingStripeKey": "You need to configure the Stripe publishable key to continue.", "PayoutDetailsForm.personalDetailsAdditionalOwnerTitle": "Additional owner details", "PayoutDetailsForm.personalDetailsTitle": "Personal details", "PayoutDetailsForm.personalIdNumberTitle": "Personal id number", From 48c1f5179713c336e40a4b8f2b0513a16f84f5a8 Mon Sep 17 00:00:00 2001 From: Jenni Nurmi Date: Thu, 7 Mar 2019 10:21:29 +0200 Subject: [PATCH 2/4] Edit the error message --- src/translations/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/translations/en.json b/src/translations/en.json index 373524f4ec..05732a0aa6 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -552,7 +552,7 @@ "PayoutDetailsForm.lastNameLabel": "Last name", "PayoutDetailsForm.lastNamePlaceholder": "Doe", "PayoutDetailsForm.lastNameRequired": "This field is required", - "PayoutDetailsForm.missingStripeKey": "You need to configure the Stripe publishable key to continue.", + "PayoutDetailsForm.missingStripeKey": "Stripe publishable key has not been configured to this marketplace. Unfortunately, you can't save your payout preferences yet.", "PayoutDetailsForm.personalDetailsAdditionalOwnerTitle": "Additional owner details", "PayoutDetailsForm.personalDetailsTitle": "Personal details", "PayoutDetailsForm.personalIdNumberTitle": "Personal id number", From 21d504013c9772191be5d5720f76add9dc0d0ea6 Mon Sep 17 00:00:00 2001 From: Jenni Nurmi Date: Thu, 7 Mar 2019 13:54:13 +0200 Subject: [PATCH 3/4] Show error also in StripePaymentForm --- .../StripePaymentForm/StripePaymentForm.css | 4 +++ .../StripePaymentForm/StripePaymentForm.js | 34 +++++++++++-------- src/translations/en.json | 1 + 3 files changed, 25 insertions(+), 14 deletions(-) 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..4589c8dfae 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 05732a0aa6..a90a1a519e 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.", From d56ea31ea756bf1ff693693bbed54280c036ecb9 Mon Sep 17 00:00:00 2001 From: Jenni Nurmi Date: Thu, 7 Mar 2019 14:11:32 +0200 Subject: [PATCH 4/4] Update changelog --- CHANGELOG.md | 2 ++ README.md | 7 +++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fb0ff3e801..02668b3623 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern: ## Upcoming version 2019-XX-XX +- [Fix] Add error handling to `PayoutDetailsForm` and `StripePaymentForm` in case Stripe publishable + key is not configured yet. [#1042](https://github.com/sharetribe/flex-template-web/pull/1042) - [fix] FieldBirthdayInput: placeholder text was not selected by default. [#1039](https://github.com/sharetribe/flex-template-web/pull/1039) diff --git a/README.md b/README.md index 219a5cf079..00e26b9c9b 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,11 @@ yarn run config # add the mandato yarn run dev # start the dev server, this will open a browser in localhost:3000 ``` -### If you are using Stripe account created after 19th of February 2019 creating compan accounts is temporalily unavailable. -This is due the changes in Stripe API (https://stripe.com/docs/upgrades#api-changelog). Issues with individual accounts were fixed in release [2.12.0](https://github.com/sharetribe/flex-template-web/releases/tag/v2.12.0). +### If you are using Stripe account created after 19th of February 2019 creating compan accounts is temporalily unavailable. + +This is due the changes in Stripe API (https://stripe.com/docs/upgrades#api-changelog). Issues with +individual accounts were fixed in release +[2.12.0](https://github.com/sharetribe/flex-template-web/releases/tag/v2.12.0). You can also follow along the [Getting started with FTW](https://www.sharetribe.com/docs/tutorials/getting-started-with-ftw/)