Generalized way of displaying error messages on *Element items about react-stripe-elements

[michelle]

If you are using CardElement, it functions as a single input, so the error should just be placed next to that Element.

It sounds like you're using CardNumberElement, CardExpiryElement, etc, though. Each of them should call their onChange handlers for their specific errors only. Are you seeing something different? Perhaps something like this could work for you:

// in your component:
handleChangeFor = (type) => ({error}) => { /* handle error */ }
render() {
  return (
    <CardNumberElement onChange={this.handleChangeFor('cardNumber')} />
    <CardExpiryElement onChange={this.handleChangeFor('cardExpiry')} />
    ...
  );
}

If that makes sense, we should definitely document this flow better. :)

[michael-reeves]

thanks. that looks pretty similar to what I came up with, but it's better because I was implementing a separate handler for each.

That solution will work

[michelle]

Awesome! If you have any recommendations for how we can document this, we 💜 PRs :).

[michael-reeves]

Does the onSubmit automatically fire onChange for each field? I was really not expecting the onSubmit to render error messages correctly, due to the error messages I was seeing within onSubmit. Was rather shocked when everything that worked for onChange worked with onSubmit.

What would be the best way to show my example for Bootstrap? I can add an example file, or add to the Readme.

[michelle]

Yes, the onSubmit will fire onChange because if there's an error, the field has "changed" state to its error state. Adding to the demo or adding another demo would be amazing! Michelle

…

On Wed, May 17, 2017 at 1:07 PM, Michael Reeves ***@***.***> wrote: Does the onSubmit automatically fire onChange for each field? I was really not expecting the onSubmit to render error messages correctly, due to the error messages I was seeing within onSubmit. Was rather shocked when everything that worked for onChange worked with onSubmit. What would be the best way to show my example for Bootstrap? I can add an example file, or add to the Readme. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#13 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA4r9XsLH4OgTLMy8VukXBohd1B9PH6mks5r61NtgaJpZM4Nc0gM> .

[michael-reeves]

Ok, I’ll see what I can do to clean out my react-bootstrap stuff and get something posted. On May 17, 2017, at 3:34 PM, michelle <[email protected]> wrote: Yes, the onSubmit will fire onChange because if there's an error, the field has "changed" state to its error state. Adding to the demo or adding another demo would be amazing! Michelle

On Wed, May 17, 2017 at 1:07 PM, Michael Reeves ***@***.***> wrote: Does the onSubmit automatically fire onChange for each field? I was really not expecting the onSubmit to render error messages correctly, due to the error messages I was seeing within onSubmit. Was rather shocked when everything that worked for onChange worked with onSubmit. What would be the best way to show my example for Bootstrap? I can add an example file, or add to the Readme. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#13 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA4r9XsLH4OgTLMy8VukXBohd1B9PH6mks5r61NtgaJpZM4Nc0gM> .

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#13 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHaPdQDCOuLctBdtrO7JdmEyTJzF8egoks5r62flgaJpZM4Nc0gM>.

[swrobel]

@michael-reeves did you ever come up w/ anything demo-wise?

[michael-reeves]

I have been head down on this project. I can show you what I came up with, and it seems to work, but I don’t have anything generic to post yet

…

On Jan 11, 2018, at 12:43 PM, Stefan Wrobel ***@***.***> wrote: @michael-reeves did you ever come up w/ anything demo-wise? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[swrobel]

No worries, I can figure it out on my own based on what's been discussed here.