React-stripe-elements: [Feature Request] Separating presentation from validation

[nareshbhatia]

Summary

Currently React Stripe Elements are very monolithic, they contain both presentation and validation logic. Please consider separating the two so that developers can reuse their existing presentation components with Stripe's validation logic.

Other information

Context: I wanted to use the Material UI library for credit card forms, since the rest of my application uses it. As far as I can tell, this is not possible. As an alternative, I found your Example 2 which comes close to Material Design. However it is straight JavaScript and CSS code, which would take quite an effort to convert to React and JSS (the CSS in JS implementation used by Material UI).

These issues would all go away if we could use our preferred UI libraries with Stripe's validation logic. For example, we could call a Stripe API on every change event to check for errors. This would tremendously reduce the effort to keep our look and feel consistent with rest of our apps.

[jenan-stripe]

Hi @nareshbhatia. Thanks for the notes!

For PCI DSS SAQ A compatibility, you need Stripe to handle sensitive card information, which means the actual inputs for sensitive card information need to be hosted in Stripe iframes.

I'm not familiar with that particular library. However, while you won't be able to use their <Input> directly, you should be able to lightly wrap Stripe Elements with whatever other components you need. If there's something specific that's blocking that, please let us know!

[nareshbhatia]

Hi @jenan-stripe, thanks for the context. There is nothing blocking at the moment. It's just that we will have to put more effort into making our Stripe forms look & feel like the rest of our app. If anything, it would be helpful to provide example 2 translated as a React app. It would nicely complement react-stripe-elements.