Promise from stripe.createToken never resolves about react-stripe-elements

[geemanjs]

Hey @michelle ,

I just spent a few hours trying to figure out why my createToken wasn't working, and this issue is exactly that. I feel this should perhaps be reopened or opened as a new bug "State cannot be updated prior to creating token" - as this is a 'bug' of this software component.

My use case is as follows and (and I'd imagine this is a fairly common user journey):

1. User types in card details in <CardElement />
2. User submits form with payment details
3. Loading animation appears on screen
4. Call stripe.createToken() to retrieve token
5. Submit token and payment to stripe through my lambda function
6. Loading finishes & user is redirected to review

The below code is executed upon form submission

handleSubmit = async (ev) => {
    ev.preventDefault();
    try {
      this.setState({ loading: true }); // This is the line that causes the issue
      console.log('creating token');
      const { error, token } = await this.props.stripe.createToken();
      console.log('token created');
      ... my payment submission code ... 
    } catch(err) {
      console.log('error', err);
    }
  };

Happy to help fix it (if I can) - but I've a feeling it might require a reasonably sizable change in how the values are retrieved from the <*Element>s. If the decision is to not fix this then I'm more than happy to help document the problem :) Let me know!

[michelle]

Hi there! Are you seeing any errors in your console? Where is handleSubmit hooked up? You'll need to call event.preventDefault() in your handleSubmit if it's hooked up to a form (https://facebook.github.io/react/docs/forms.html).

[sonarforte]

Hi @michelle, my form is set up with multiple stages. After each stage the user clicks a "Next" button, and at the final stage, the next button turns into a "Submit" button.

createToken is called from this next button; in the second stage, the user inputs billing information, and after clicking next, the call to stripe is made. It looks like this:

  handleNextClick = (e) => {
    e.preventDefault()
    const { stage } = this.state
    if (stage < 2) {
      this.setState({stage: stage + 1})
    }
    // We have to submit to stripe when next is clicked on the billing section
    if (stage === 1) {
      this.getStripeToken()
    }
  }
...
// the stripe code from above
  getStripeToken = () => {
    console.log("trying to get stripe token");
    const { form, stripe, } = this.props
    console.log(stripe);
    stripe.createToken({type: 'card', name: form.card_name.value})
    .then(({token}) => {
      console.log('Received Stripe token:', token);
    })
    .catch((e) => {
      console.log('got error', e);
    });
  }

The code in getStripeToken() is the code in handleSubmit above; since this function gets called (along with e.preventDefault()) I thought adding it above would introduce needless complexity.

[michelle]

Ah, I see the issue -- the code you have that moves to the next step may be running before we're able to submit the tokenization request -- this means that the Stripe Element (and the corresponding iframe that contains the customer card data) disappears from the DOM before we're able to extract and tokenize the data. I would change your code so that you don't setState({stage: 2}) if stage === 1 until the createToken promise resolves.

Let me know if that works!

[sonarforte]

@michelle, it worked! To test I just commented out the stage change, but now I have to figure out how to trigger that when the promise resolves. Thanks!

[michelle]

@sonarforte Glad it worked! :)

You can call this.setState({step: 2}) in the then(...) call on your promise.

[michelle]

Going to close this out, but please feel free to reopen if you're still seeing issues.

[Loag]

Had the same issue and finally came across this thread.

[plainspace]

We've tried troubleshooting this issue and can't get it to work yet.

Details:
We have a multiple step checkout flow on our checkout page with multiple forms:

• Step 1: Choose Plan. user choose plan, clicks next button
• Step 2: Enter Company info. user enters company info (name, address, etc.), clicks 'next' button which changes the state flag this.setState({step: 3}) to go to next step (Step 3)
• Step 3: Add Payment Method. name on card field and elements component for entering card details, clicks complete purchase button

Issue:
On the submission of form on step 3, we are calling stripe.createToken(cardObj, addressObj) to handle the promise but stripe.createToken() NEVER resolves the promise, resulting in the never making it to Stripe.

our relevant code:
https://www.dropbox.com/s/qn4wm69a6huemim/code.js?dl=0

npm deps are "node": "6.11.1" and "stripe": "^4.13.0"

[fred-stripe]

Hi, just noting that @plainspace contacted Stripe support and we're helping him there. Seems to be a somewhat different problem from the one discussed in this issue.