Merge pull request #1035 from sharetribe/update-creating-stripe-accounts

Update creating Stripe accounts to match the updated Stripe API

CHANGELOG.md

@@ -14,6 +14,14 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [change] Update creating Stripe account token to support the latest Stripe API update. See also
+  [Stripe API changelog](https://stripe.com/docs/upgrades#api-changelog). **IMPORTANT:** If you are
+  using a Stripe account created earlier than 19th of February 2019 you need to change the value of
+  `useDeprecatedLegalEntityWithStripe` in `stripe-config.js`. You can check the Stripe API version
+  you are using from Stripe Dashboard -> Developers. Since the change in Stripe API was quite big we
+  are not able to support company accounts with new Stripe API yet! The option for company accounts
+  will be hidden if the value `useDeprecatedLegalEntityWithStripe` is set to `false`.
+  [#1035](https://github.com/sharetribe/flex-template-web/pull/1035)
 - [change] Improve German translations.
   [#1034](https://github.com/sharetribe/flex-template-web/pull/1034)
 - [change] Reordered import/exports on src/components/index.js. This helps to mitigate possible

src/config.js

@@ -1,6 +1,10 @@
 import * as custom from './marketplace-custom-config.js';
 import defaultLocationSearches from './default-location-searches';
-import { stripePublishableKey, stripeSupportedCountries } from './stripe-config';
+import {
+  stripePublishableKey,
+  useDeprecatedLegalEntityWithStripe,
+  stripeSupportedCountries,
+} from './stripe-config';
 
 const env = process.env.REACT_APP_ENV;
 const dev = process.env.REACT_APP_ENV === 'development';
@@ -205,7 +209,11 @@ const config = {
   currency,
   listingMinimumPriceSubUnits,
   currencyConfig,
-  stripe: { publishableKey: stripePublishableKey, supportedCountries: stripeSupportedCountries },
+  stripe: {
+    publishableKey: stripePublishableKey,
+    supportedCountries: stripeSupportedCountries,
+    useDeprecatedLegalEntityWithStripe,
+  },
   canonicalRootURL,
   address: {
     addressCountry,

src/ducks/user.duck.js

@@ -450,22 +450,46 @@ export const createStripeAccount = payoutDetails => (dispatch, getState, sdk) =>
   const idNumber =
     country === 'US' ? { ssn_last_4: personalIdNumber } : { personal_id_number: personalIdNumber };
 
-  // Params for Stripe SDK
-  const params = {
-    legal_entity: {
-      first_name: firstName,
-      last_name: lastName,
-      address: omitBy(addressValue, isUndefined),
-      dob: birthDate,
-      type: accountType,
-      business_name: companyName,
-      business_tax_id: companyTaxId,
-      personal_address: personalAddressValue,
-      additional_owners: additionalOwnersValue,
-      ...idNumber,
-    },
-    tos_shown_and_accepted: true,
-  };
+  let params;
+
+  // You can check which API version you are using from Stripe Dasboard -> Developers.
+  // If you are using older version than '2019-02-19'
+  // edit 'useDeprecatedLegalEntityWithStripe' config in the stripe-config.js
+
+  const isNewAPI = !config.stripe.useDeprecatedLegalEntityWithStripe;
+  const isIndividualAccount = accountType === 'individual';
+
+  if (isNewAPI && isIndividualAccount) {
+    params = {
+      business_type: 'individual',
+      individual: {
+        first_name: firstName,
+        last_name: lastName,
+        address: omitBy(addressValue, isUndefined),
+        dob: birthDate,
+        ...idNumber,
+      },
+      tos_shown_and_accepted: true,
+    };
+  } else if (isNewAPI && !isIndividualAccount) {
+    // TODO new company accounst
+  } else {
+    params = {
+      legal_entity: {
+        first_name: firstName,
+        last_name: lastName,
+        address: omitBy(addressValue, isUndefined),
+        dob: birthDate,
+        type: accountType,
+        business_name: companyName,
+        business_tax_id: companyTaxId,
+        personal_address: personalAddressValue,
+        additional_owners: additionalOwnersValue,
+        ...idNumber,
+      },
+      tos_shown_and_accepted: true,
+    };
+  }
 
   let accountResponse;
 

src/forms/PayoutDetailsForm/PayoutDetailsForm.js

@@ -46,7 +46,11 @@ const PayoutDetailsFormComponent = props => (
         values,
       } = fieldRenderProps;
 
-      const { country, accountType } = values;
+      const { country } = values;
+
+      const usesOldAPI = config.stripe.useDeprecatedLegalEntityWithStripe;
+
+      const accountType = usesOldAPI ? values.accountType : 'individual';
 
       const individualAccountLabel = intl.formatMessage({
         id: 'PayoutDetailsForm.individualAccount',
@@ -99,27 +103,29 @@ const PayoutDetailsFormComponent = props => (
 
       return (
         <Form className={classes} onSubmit={handleSubmit}>
-          <div className={css.sectionContainer}>
-            <h3 className={css.subTitle}>
-              <FormattedMessage id="PayoutDetailsForm.accountTypeTitle" />
-            </h3>
-            <div className={css.radioButtonRow}>
-              <FieldRadioButton
-                id="individual"
-                name="accountType"
-                label={individualAccountLabel}
-                value="individual"
-                showAsRequired={showAsRequired}
-              />
-              <FieldRadioButton
-                id="company"
-                name="accountType"
-                label={companyAccountLabel}
-                value="company"
-                showAsRequired={showAsRequired}
-              />
+          {usesOldAPI ? (
+            <div className={css.sectionContainer}>
+              <h3 className={css.subTitle}>
+                <FormattedMessage id="PayoutDetailsForm.accountTypeTitle" />
+              </h3>
+              <div className={css.radioButtonRow}>
+                <FieldRadioButton
+                  id="individual"
+                  name="accountType"
+                  label={individualAccountLabel}
+                  value="individual"
+                  showAsRequired={showAsRequired}
+                />
+                <FieldRadioButton
+                  id="company"
+                  name="accountType"
+                  label={companyAccountLabel}
+                  value="company"
+                  showAsRequired={showAsRequired}
+                />
+              </div>
             </div>
-          </div>
+          ) : null}
 
           {accountType ? (
             <React.Fragment>

src/stripe-config.js

@@ -7,6 +7,13 @@
 // To make Stripe connection work, you also need to set Stripe's private key in the Flex Console.
 export const stripePublishableKey = process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY;
 
+// You can check your Stripe API version from Stripe Dashboard -> Developers.
+// If you are using the API version that is earlier than '2019-02-19' change this value to 'true'
+// See Stripe API changelog: https://stripe.com/docs/upgrades#api-changelog
+// NOTE: we are not supporting company accounts with new Stripe API yet!
+// The option for company accounts will be hidden if this value is set to 'false'
+export const useDeprecatedLegalEntityWithStripe = false;
+
 // Stripe only supports payments in certain countries, see full list
 // at https://stripe.com/global
 //