Add link to stripe legal documentation

src/forms/PayoutDetailsForm/PayoutDetailsForm.css

@@ -67,3 +67,22 @@
 .error {
   @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;
+  }
+}

src/forms/PayoutDetailsForm/PayoutDetailsForm.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { bool, object, string } from 'prop-types';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Form as FinalForm } from 'react-final-form';
@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import config from '../../config';
 import {
   Button,
+  ExternalLink,
   StripeBankAccountTokenInputField,
   FieldSelect,
   FieldBirthdayInput,
@@ -172,6 +173,12 @@ const PayoutDetailsFormComponent = props => (
         );
       }
 
+      const stripeConnectedAccountTermsLink = (
+        <ExternalLink href="https://stripe.com/connect-account/legal" className={css.termsLink}>
+          <FormattedMessage id="PayoutDetailsForm.stripeConnectedAccountTermsLink" />
+        </ExternalLink>
+      );
+
       return (
         <Form className={classes} onSubmit={handleSubmit}>
           <div className={css.sectionContainer}>
@@ -295,6 +302,12 @@ const PayoutDetailsFormComponent = props => (
             </div>
           ) : null}
           {error}
+          <p className={css.termsText}>
+            <FormattedMessage
+              id="PayoutDetailsForm.stripeToSText"
+              values={{ stripeConnectedAccountTermsLink }}
+            />
+          </p>
           <Button
             className={css.submitButton}
             type="submit"
@@ -324,8 +337,6 @@ PayoutDetailsFormComponent.defaultProps = {
   submitButtonText: null,
 };
 
-const { bool, object, string } = PropTypes;
-
 PayoutDetailsFormComponent.propTypes = {
   className: string,
   createStripeAccountError: object,

src/translations/en.json

@@ -445,6 +445,8 @@
   "PayoutDetailsForm.streetAddressLabel": "Street address",
   "PayoutDetailsForm.streetAddressPlaceholder": "Enter your street address…",
   "PayoutDetailsForm.streetAddressRequired": "This field is required",
+  "PayoutDetailsForm.stripeConnectedAccountTermsLink": "Stripe Connected Account Agreement",
+  "PayoutDetailsForm.stripeToSText": "By saving details, you agree to the {stripeConnectedAccountTermsLink}",
   "PayoutDetailsForm.submitButtonText": "Save details & publish listing",
   "PayoutDetailsForm.title": "One more thing: payout preferences",
   "PayoutPreferencesPage.contactDetailsTabTitle": "Contact details",