React-stripe-elements: Improved Documentation for Using Stripe Connect Accounts

[stephenhuh]

Summary

It would be awesome to have improved documentation on the README.md for usage with Stripe Connect accounts. Judging by #129 , #50 it seems that the focus on of this library is not on Connect, so it may fall under the Advanced Integrations section. But even in this section, nothing directly references the inclusion or exclusion of the Connect platform.

I had to hop onto the IRC as well as read through the source code to figure out how to get it to work. I assumed that the StripeProvider would accept the stripeAccount parameter. The error messages were helpful, but navigating by error messages took some time.

In order to use react-stripe-elements with stripe connect I had to call the window.Stripe function within a component to create a stripeObject and pass that down to the StripeProvider component as shown below.

const SubscribeToCoachCardForm = ({ coachId, accountId }) => {
  const stripeObject = window.Stripe(
    process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY,
    { stripeAccount: accountId },
  );
  return (
    <StripeProvider stripe={stripeObject}>
      <Elements>
        <AuthConsumer>
          {({ user: { userId, athleteId } }) => (
            <SubscribeForm
              userId={userId}
              athleteId={athleteId}
              coachId={coachId}
            />
          )}
        </AuthConsumer>
      </Elements>
    </StripeProvider>
  );
};

The docs do point out that we can call the Stripe Window object, but as Connect usage is fairly common (i think...), it would save a lot of people time and would be extremely helpful to just have a sentence or two that indicates that the way to go is to pass in a stripeAccount parameter to window.Stripe function as referenced here: stripe-js in order to use Connect.

In its current form, it seems as if there were no real options if you wanted to use the Connect Platform with React-Stripe-Elements.

Other information

I'd be happy to submit a PR for documentation if agreed upon!

[asolove-stripe]

@stephenhuh Thanks for pointing this out and sorry for the confusion!

From reading our code, it appears that we pass through extra props provided to the Provider, so I would expect that if you provide a stripeAccount prop, it would get used when we create the Stripe instance. Is that not what you saw?

We would love to have you submit a PR with documentation, but I'd love to first make sure there is an easy way to use Provider with stripeAccount so we can document that instead of having to create your own Stripe instance.

Thanks again!

[stephenhuh]

@asolove-stripe
Apologies for taking a while to return to this issue. I checked out the code you linked and passed through the props instead. It seems to be working currently.

I see now that the docs _do_ say:

The ... above represents that this component accepts props for any option that can be passed into Stripe(apiKey, options).

I did notice this convention of adding the stripe_account as a param for the Stripe API (which is really convenient) but didn't expect the same param stripeAccount for React-Stripe-Elements. Though, now that I do know that, I think it's super convenient. I had a similar experience with the Stripe API but found the docs to be more explicit. Perhaps adding a sentence just mentioning that the ... can be used to accept a connect account id? Let me know what you think!

Thanks for your help.

[asolove-stripe]

@stephenhuh Thanks for this suggestion! I've just opened a PR to improve the docs for this. Please comment on whether that would have helped you or not. Since that docs PR is the action item out of this Issue, I'm going to close this, but feel free to re-open if you run into anything else related.

[stephenhuh]

Awesome @asolove-stripe and thanks for taking the time to do that.