Set a displayName on the provider component for easier debugging with React Devtools

[Dman757]

Summary & motivation

Duplicate Feature of a PR I just made for @stripe/react-stripe-js https://github.com/stripe/react-stripe-js/pull/30

Simple change to make debugging with React DevTools a little bit easier by having a non-generic displayName. Also a component namespace that closer matches the import.

In the devtools window the "StripeProvider" component currently shows up as <Provider> this change would make it show up as <Stripe.Provider> With the generic name of "provider" it can be a little annoying debugging if you have multiple providers all with the same generic displayName.

Also this attempts to remove some confusion with the import { StripeProvider } from 'react-stripe-elements showing up as Provider in the component tree and any associated warnings that React now throws for 17.* compatibility.

before after

If you're unfamiliar with the context displayName documentation is here: https://reactjs.org/docs/react-component.html#displayname

My real motivation for this is an issue with a project that has multiple generic named "Provider" components and I was tracking the following a warning down: After a little bit of digging realized it was related to react-stripe-elements as it has a context provider just named <Provider> even though the import is <StripeProvider>

Testing & documentation

Use React DevTools to confirm that the "correct" displayName is present.

[CLAassistant]

All committers have signed the CLA.