New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Validate Stripe Elements without calling `createToken` #283

Closed
richardscarrott opened this Issue Dec 3, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@richardscarrott

richardscarrott commented Dec 3, 2018

Summary

Sorry if this is the wrong place for this but IRC and chat support was proving difficult -- I figured I'd hit the right people through GitHub.

I'm struggling to work out how one can trigger the Stripe Elements client-side validation without calling createToken i.e.

Given this form:

screenshot 2018-12-03 at 22 36 36

And this handler:

handleSubmit = async (e) => {
    e.preventDefault();
    const firstNameError = validateFirstName(this.props.firstName);
    const lastNameError = validateLastName(this.props.lastName);
    const stripeElementsErrors = this.props.stripe.validateElements(); // Does this method exist?
    if (!firstNameError && !lastNameError && !stripeElementErrors.length) {
        const { token, error } = await this.props.stripe.createToken({
             name: `${firstName} ${lastName}`,
        });
        // ...
    }
}

The key is I need to be able to render validation errors on both my non-stripe fields (firstName and lastName) as well as my Stripe fields before attempting to create the token; I can't call createToken if my billing fields are invalid.

@fred-stripe

This comment has been minimized.

fred-stripe commented Dec 3, 2018

Hi @richardscarrott, there isn't a way to do this either with react-stripe-elements or Stripe.js itself. The recommended pattern here is to:

  1. Assume that the user's input starts in an incomplete state and block form submission.
  2. Use an element.on('change', (event) => …) event handler to update your form's state.
  3. If there are errors in event.errors, display them and continue to block form submission.
  4. When you receive a change event with event.complete == true, allow form submission to proceed.

This will require tracking the Elements validation state inside your form component. Hope that clears things up! If you have any specific questions about a form you're building Stripe Support is the best avenue for support: https://support.stripe.com/email

This repository's issue tracker is for the development of the react-stripe-elements library itself rather than Stripe.js questions.

@fred-stripe fred-stripe closed this Dec 3, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment