{"action":"created","issue":{"url":"https://api.github.com/repos/stripe/react-stripe-elements/issues/164","repository_url":"https://api.github.com/repos/stripe/react-stripe-elements","labels_url":"https://api.github.com/repos/stripe/react-stripe-elements/issues/164/labels{/name}","comments_url":"https://api.github.com/repos/stripe/react-stripe-elements/issues/164/comments","events_url":"https://api.github.com/repos/stripe/react-stripe-elements/issues/164/events","html_url":"https://github.com/stripe/react-stripe-elements/issues/164","id":295892390,"number":164,"title":"Customize presentation with material-ui (or any other visual framework)","user":{"login":"rosskevin","id":136564,"avatar_url":"https://avatars1.githubusercontent.com/u/136564?v=4","gravatar_id":"","url":"https://api.github.com/users/rosskevin","html_url":"https://github.com/rosskevin","followers_url":"https://api.github.com/users/rosskevin/followers","following_url":"https://api.github.com/users/rosskevin/following{/other_user}","gists_url":"https://api.github.com/users/rosskevin/gists{/gist_id}","starred_url":"https://api.github.com/users/rosskevin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rosskevin/subscriptions","organizations_url":"https://api.github.com/users/rosskevin/orgs","repos_url":"https://api.github.com/users/rosskevin/repos","events_url":"https://api.github.com/users/rosskevin/events{/privacy}","received_events_url":"https://api.github.com/users/rosskevin/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-02-09T14:40:25Z","updated_at":"2018-02-09T20:41:59Z","closed_at":null,"author_association":"NONE","body":"### Summary\r\nLook and feel customization, at first blush, is a mystery to me as a new user of `react-stripe-elements`\r\n\r\nI 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.\r\n\r\nI found this discussion and answer: https://github.com/stripe/react-stripe-elements/issues/130#issuecomment-346509248\r\n\r\n> 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.\r\n>\r\n>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!\r\n\r\n@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?\r\n\r\n<img width=\"1356\" alt=\"stripe-element-structure\" src=\"https://user-images.githubusercontent.com/136564/36032200-de12033e-0d72-11e8-86fe-6d40c4eba0cb.png\">\r\n\r\nTherefore, how does one wrap it with semantics to produce a material ui element? https://material-ui-next.com/demos/text-fields/\r\n\r\nFor use as a material-ui `input` element, the `react-stripe-element` needs to bubble the following events at a minimum:\r\n- `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\r\n- `onFocus` to animate label up and set underline animation\r\n- `onBlur` to set label placement/animation based on `isDirty` and set underline\r\n\r\nDoes an individual `react-stripe-element` bubble events such as this?\r\n\r\nIs there a react example that shows using these elements like an `input`?\r\n\r\n/cc @nareshbhatia (original issue)\r\n"},"comment":{"url":"https://api.github.com/repos/stripe/react-stripe-elements/issues/comments/364559860","html_url":"https://github.com/stripe/react-stripe-elements/issues/164#issuecomment-364559860","issue_url":"https://api.github.com/repos/stripe/react-stripe-elements/issues/164","id":364559860,"user":{"login":"jez","id":5544532,"avatar_url":"https://avatars2.githubusercontent.com/u/5544532?v=4","gravatar_id":"","url":"https://api.github.com/users/jez","html_url":"https://github.com/jez","followers_url":"https://api.github.com/users/jez/followers","following_url":"https://api.github.com/users/jez/following{/other_user}","gists_url":"https://api.github.com/users/jez/gists{/gist_id}","starred_url":"https://api.github.com/users/jez/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jez/subscriptions","organizations_url":"https://api.github.com/users/jez/orgs","repos_url":"https://api.github.com/users/jez/repos","events_url":"https://api.github.com/users/jez/events{/privacy}","received_events_url":"https://api.github.com/users/jez/received_events","type":"User","site_admin":false},"created_at":"2018-02-09T20:41:59Z","updated_at":"2018-02-09T20:41:59Z","author_association":"COLLABORATOR","body":"👋 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.\r\n\r\nSome tips to help understand how to add custom styles to Elements:\r\n\r\n- All block-level styles should be applied to the Element container:\r\n  - https://stripe.com/docs/stripe-js/reference#the-element-container\r\n  - These are classes like `.StripeElement`, `.StripeElement--focus`, etc.\r\n- All inline / text-level styles should be passed as configuration options to the Element itself.\r\n  - https://stripe.com/docs/stripe-js/reference#element-options\r\n  - See in particular: the `style` property.\r\n\r\nBe 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.\r\n\r\n[JSFiddle]: https://jsfiddle.net/x88p2scL/1/\r\n"}}
{"actor":{"display_login":"jez"}}