React-stripe-elements: Customize presentation with material-ui (or any other visual framework)

[rosskevin]

Summary

Look and feel customization, at first blush, is a mystery to me as a new user of react-stripe-elements

I hope react-stripe-elements would be integratable with semantics of any input (with value masking). Without such semantics, it does not easily integrate with any other visual framework available. I hope I am missing something.

I found this discussion and answer: https://github.com/stripe/react-stripe-elements/issues/130#issuecomment-346509248

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 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!

@jenan-stripe how exactly would you be able to lightly wrap a stripe-element with material-ui for visuals? I'm a material-ui committer, so I know the internals intimately and it is very flexible. The problem is that react-stripe-elements produces an unusable structure - it does not produce an element that behaves like an input, does it?

Therefore, how does one wrap it with semantics to produce a material ui element? https://material-ui-next.com/demos/text-fields/

For use as a material-ui input element, the react-stripe-element needs to bubble the following events at a minimum:

• onChange to calculate isDirty (filled with _anything_) - to determine the label placement/animation. We don't need the actual value, you could propagate * for each keystroke
• onFocus to animate label up and set underline animation
• onBlur to set label placement/animation based on isDirty and set underline

Does an individual react-stripe-element bubble events such as this?

Is there a react example that shows using these elements like an input?

/cc @nareshbhatia (original issue)

[rosskevin]

TL;DR

I guess the biggest help with be a code snippet that created a React.Component for a cardNumber that propagated onChange, onFocus, and onBlur.

After some time looking (which feels like a fair bit of wasted time, I was brought in after a day of research), it does seem like Element accepts handlers/propagates these events, though the flow definition on these is not helpful in determining if it is a standard handler or not.

https://github.com/stripe/react-stripe-elements/blob/master/src/components/Element.js#L7

So can you confirm that Element behaves like a standard input in regards to onChange|onBlur|onFocus?

Thanks in advance.

[jez]

👋 You might want to take a look at #116 (How to style react-stripe-elements with Bootstrap). There's a [JSFiddle] that shows how you use react-stripe-elements with Bootstrap without needing any upstream changes to Bootstrap itself.

Some tips to help understand how to add custom styles to Elements:

• All block-level styles should be applied to the Element container:
  
  
  
  • https://stripe.com/docs/stripe-js/reference#the-element-container
  
  
  • These are classes like .StripeElement, .StripeElement--focus, etc.
  
  
• All inline / text-level styles should be passed as configuration options to the Element itself.
  
  
  
  • https://stripe.com/docs/stripe-js/reference#element-options
  
  
  • See in particular: the style property.
  
  

Be sure to check out the [JSFiddle] to see the interplay between these special class names and the options that are passed in with the style property.

[atty-stripe]

@jez covers some of the styling details above!

To expand on how Elements work and the event handlers: each Element is an abstraction over an input and some associated DOM nodes within an iframe, and exposes a limited API on this abstraction. Elements must be rendered within iframes hosted on a Stripe domain for PCI DSS SAQ A compatibility.

The list of event handlers you can register, and the shape of the returning payload, are documented at the Stripe.js reference: https://stripe.com/docs/stripe-js/reference#element-on.

Specifically for the onChange, onFocus, and onBlur handlers, the payload is limited (and a small subset of the DOM event), but should be enough for your use-case. Note also that these event handlers may be fired with a tiny delay after the DOM actually fires the event, since the event needs to bubble up from within the iframe to the outside page.

To focus on your use-case:

onChange to calculate isDirty (filled with anything) - to determine the label placement/animation. We don't need the actual value, you could propagate * for each keystroke

You can do this by attaching an onChange handler, and mark isDirty = true when the payload contains empty: false, and mark isDirty = false when the payload contains empty: true.

onFocus to animate label up and set underline animation
onBlur to set label placement/animation based on isDirty and set underline

Both of these should work with the allowed onFocus and onBlur handlers.

[rosskevin]

Thanks @jez and @atty-stripe - it seems like I can get the events.

I'll close this and give it a shot and try to share the result in a codesanbox. If I have any issues I'll reopen.

[atty-stripe]

That sounds great, thank you!

[lfalke]

That is exactly what I am looking for.
@rosskevin did you find a solution for this and would be able to share your code?

[atty-stripe]

@lfalke what exactly are you looking for? Styling an Element, or listening for events? Both topics are covered in the README and in our reference documentation here: https://stripe.com/docs/stripe-js/reference.

Feel free to post more details here or create a new issue if you have questions with react-stripe-elements.

[lfalke]

I was looking for an example on how to use react-stripe-elements with the material-ui styling.

But after a bit of trial and error I came up with a solution that works perfectly.

[idougwarner]

@lfalke would you share your solution?
I can't even get point

[lfalke]

This is what I came up with @antonnkla
https://gist.github.com/lfalke/1c5e7168424c8b2a65dcfba425fcc310

I added some comments to the top of the files. I hope everything is understandable :)

[idougwarner]

Thanks a lot. @lfalke 👍 It is great approach. Neat!
I now know what I have to do

[oliviertassinari]

I have been using an approach very close to @lfalke's gist. It's a great starting point 👌.

[oliviertassinari]

We have a dedicated thread to this problem in https://github.com/mui-org/material-ui/issues/16037.