Pass some default values to Stripe when creating Stripe account

sharetribe · Mar 10, 2020 · 7bf84e0 · 7bf84e0
1 parent b4c29c5
commit 7bf84e0
Show file tree

Hide file tree

Showing 7 changed files with 257 additions and 20 deletions.
diff --git a/src/components/EditListingWizard/EditListingWizard.js b/src/components/EditListingWizard/EditListingWizard.js
@@ -398,6 +398,7 @@ class EditListingWizard extends Component {
                 disabled={formDisabled}
                 inProgress={payoutDetailsSaveInProgress}
                 ready={payoutDetailsSaved}
+                currentUser={ensuredCurrentUser}
                 stripeBankAccountLastDigits={getBankAccountLast4Digits(stripeAccountData)}
                 savedCountry={savedCountry}
                 submitButtonText={intl.formatMessage({

diff --git a/src/containers/StripePayoutPage/StripePayoutPage.js b/src/containers/StripePayoutPage/StripePayoutPage.js
@@ -159,6 +159,7 @@ export const StripePayoutPageComponent = props => {
                 disabled={formDisabled}
                 inProgress={payoutDetailsSaveInProgress}
                 ready={payoutDetailsSaved}
+                currentUser={ensuredCurrentUser}
                 stripeBankAccountLastDigits={getBankAccountLast4Digits(stripeAccountData)}
                 savedCountry={savedCountry}
                 submitButtonText={intl.formatMessage({

diff --git a/src/containers/StripePayoutPage/__snapshots__/StripePayoutPage.test.js.snap b/src/containers/StripePayoutPage/__snapshots__/StripePayoutPage.test.js.snap
@@ -38,6 +38,38 @@ exports[`StripePayoutPage matches snapshot with Stripe connected 1`] = `
           />
         </h1>
         <injectIntl(StripeConnectAccountFormComponent)
+          currentUser={
+            Object {
+              "attributes": Object {
+                "banned": false,
+                "deleted": false,
+                "email": "[email protected]",
+                "emailVerified": true,
+                "profile": Object {
+                  "abbreviatedName": "stripe-connected abbreviated name",
+                  "displayName": "stripe-connected display name",
+                  "firstName": "stripe-connected first name",
+                  "lastName": "stripe-connected last name",
+                },
+              },
+              "id": UUID {
+                "_sdkType": "UUID",
+                "uuid": "stripe-connected",
+              },
+              "profileImage": Object {},
+              "stripeAccount": Object {
+                "attributes": Object {
+                  "stripeAccountId": "acc_testiaccountid",
+                },
+                "id": UUID {
+                  "_sdkType": "UUID",
+                  "uuid": undefined,
+                },
+                "type": "stripeAccount",
+              },
+              "type": "currentUser",
+            }
+          }
           disabled={false}
           inProgress={false}
           onChange={[Function]}
@@ -100,6 +132,28 @@ exports[`StripePayoutPage matches snapshot with Stripe not connected 1`] = `
           />
         </h1>
         <injectIntl(StripeConnectAccountFormComponent)
+          currentUser={
+            Object {
+              "attributes": Object {
+                "banned": false,
+                "deleted": false,
+                "email": "[email protected]",
+                "emailVerified": true,
+                "profile": Object {
+                  "abbreviatedName": "stripe-not-connected abbreviated name",
+                  "displayName": "stripe-not-connected display name",
+                  "firstName": "stripe-not-connected first name",
+                  "lastName": "stripe-not-connected last name",
+                },
+              },
+              "id": UUID {
+                "_sdkType": "UUID",
+                "uuid": "stripe-not-connected",
+              },
+              "profileImage": Object {},
+              "type": "currentUser",
+            }
+          }
           disabled={false}
           inProgress={false}
           onChange={[Function]}
@@ -162,6 +216,38 @@ exports[`StripePayoutPage matches snapshot with details submitted 1`] = `
           />
         </h1>
         <injectIntl(StripeConnectAccountFormComponent)
+          currentUser={
+            Object {
+              "attributes": Object {
+                "banned": false,
+                "deleted": false,
+                "email": "[email protected]",
+                "emailVerified": true,
+                "profile": Object {
+                  "abbreviatedName": "stripe-connected abbreviated name",
+                  "displayName": "stripe-connected display name",
+                  "firstName": "stripe-connected first name",
+                  "lastName": "stripe-connected last name",
+                },
+              },
+              "id": UUID {
+                "_sdkType": "UUID",
+                "uuid": "stripe-connected",
+              },
+              "profileImage": Object {},
+              "stripeAccount": Object {
+                "attributes": Object {
+                  "stripeAccountId": "acc_testiaccountid",
+                },
+                "id": UUID {
+                  "_sdkType": "UUID",
+                  "uuid": undefined,
+                },
+                "type": "stripeAccount",
+              },
+              "type": "currentUser",
+            }
+          }
           disabled={false}
           inProgress={false}
           onChange={[Function]}

diff --git a/src/ducks/stripeConnectAccount.duck.js b/src/ducks/stripeConnectAccount.duck.js
@@ -1,6 +1,6 @@
 // This file deals with Flex API which will create Stripe Custom Connect accounts
 // from given bank_account tokens.
-
+import config from '../config';
 import { storableError } from '../util/errors';
 import * as log from '../util/log';
 
@@ -154,16 +154,36 @@ export const getAccountLinkSuccess = () => ({
 // ================ Thunks ================ //
 
 export const createStripeAccount = params => (dispatch, getState, sdk) => {
-  const country = params.country;
-  const bankAccountToken = params.bankAccountToken;
+  if (typeof window === 'undefined' || !window.Stripe) {
+    throw new Error('Stripe must be loaded for submitting PayoutPreferences');
+  }
+  const stripe = window.Stripe(config.stripe.publishableKey);
+
+  const { country, accountType, bankAccountToken, businessProfileMCC, businessProfileURL } = params;
+
+  const accountInfo = {
+    business_type: accountType,
+    tos_shown_and_accepted: true,
+  };
 
   dispatch(stripeAccountCreateRequest());
 
-  return sdk.stripeAccount
-    .create(
-      { country, bankAccountToken, requestedCapabilities: ['card_payments', 'transfers'] },
-      { expand: true }
-    )
+  return stripe
+    .createToken('account', accountInfo)
+    .then(response => {
+      const accountToken = response.token.id;
+      return sdk.stripeAccount.create(
+        {
+          country,
+          accountToken,
+          bankAccountToken,
+          requestedCapabilities: ['card_payments', 'transfers'],
+          businessProfileMCC,
+          businessProfileURL,
+        },
+        { expand: true }
+      );
+    })
     .then(response => {
       const stripeAccount = response.data.data;
       dispatch(stripeAccountCreateSuccess(stripeAccount));

diff --git a/src/forms/StripeConnectAccountForm/StripeConnectAccountForm.css b/src/forms/StripeConnectAccountForm/StripeConnectAccountForm.css
@@ -29,6 +29,20 @@
   margin-bottom: 24px;
 }
 
+.radioButtonRow {
+  display: flex;
+  justify-content: left;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-bottom: 24px;
+  white-space: nowrap;
+}
+
+.radioButtonRow > :first-child {
+  margin-right: 36px;
+}
+
 .selectCountry {
   margin-bottom: 24px;
 }
@@ -37,6 +51,25 @@
   @apply --marketplaceModalErrorStyles;
 }
 
+.termsText {
+  @apply --marketplaceModalHelperText;
+  margin-bottom: 12px;
+  text-align: center;
+
+  @media (--viewportMedium) {
+    margin-bottom: 16px;
+  }
+}
+
+.termsLink {
+  @apply --marketplaceModalHelperLink;
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
 .bankDetailsStripeField p {
   @apply --marketplaceH4FontStyles;
 }