React-stripe-elements: Error message: You did not specify the type of Source or Token to create.

[JonathanWbn]

I have a basic setup like it is documented, when I call the createToken method, I get this error:

_Uncaught Error: You did not specify the type of Source or Token to create. We could not infer which Element you want to use for this operation._

Would appreciate any ideas on how I could tackle this issue.

[JonathanWbn]

Figured it out.
I had many stripe forms mounted at the same time. Each one was wrapped in it's own tag tho, so I thought that wouldn't be a problem. But it seems like it is.

[michelle]

@JonathanWbn would love to see what your setup was! It could be confusing for others, too, and we should fix that.

[isaacjtullis]

We are running into the same error message with our react bootstrap modals. @JonathanWbn any code that you can show on how you fixed this?

[JonathanWbn]

I'll try my best.
My setup was that my page was rendering multiple cardstacks (react-slick) next to each other, with one of the card in each cardstack having a payment form. (many cardstacks, each has many cards, one of the cards has a payment form with react stripe elements)
I was wrapping each cardstack inside the tag from this package, and then this error occured.

My fix was that i didn't wrap each cardstack in the tag, but did the wrapping inside the relevant card, wrapping only the form. Since the cards in the lazy loading, this means the only get mounted when the user scrolls to the card, as opposed to on loading.

As you might recognise I can't say that I fully understand what's going on here, but I hope this helps.

[bewestphal]

I ran into this issue when passing the "injectStripe" high level component into my redux "connect" function. Swapping the order fixed it.

[richban]

@bewestphal could you actually how you have done it? I don't understand the order.

[bewestphal]

@richban Here is my code, "_PaymentDetailsForm" is my component which contains the payment elements (CardNumberElement, CardExpiryElement, etc.)

_PaymentDetailsForm = connect(mapStateToProps)(_PaymentDetailsForm)
_PaymentDetailsForm = injectStripe(_PaymentDetailsForm)

The following below will not work

_PaymentDetailsForm = injectStripe(_PaymentDetailsForm)
_PaymentDetailsForm = connect(mapStateToProps)(_PaymentDetailsForm)

Hope this helps

[richban]

@bewestphal it doesn't unfortunately here is a code snippet:

```javascript
const Cardnumber = connect(
state => ({
prop1: state.prop1,
prio2: state.prop2,
}), {
dispatch1,
dispatch2,
})(CardNumberForm);

export default injectStripe(Cardnumber);

[richban]

I still got the same error as above any idea what's the problem?

Uncaught (in promise) Error: You did not specify the type of Source or Token to create. We could not infer which Element you want to use for this operation.

[fred-stripe]

Hey @richban would you mind emailing Stripe support with some more details about your application? Ideally include a link to a URL that we can use to test. Or, if you're able to create a minimal page that demonstrates the error and share a gist here, that'd be excellent.

For specific application development questions, the fastest way to get help is to contact Stripe support: https://support.stripe.com/email/login

[pithu]

We got the same error message and solve it by putting the components in the correct order.
The following pseudo code demonstrate how you can reproduce the issue:

<StripeProvider>
   <FormWithInjectStripe>
      <Elements>
         <CardElement />
       </Elements>
   </FormWithInjectStripe>
</StripeProvider>

Putting the Elements Component outside of the form Component that is wrapped with injectStripe fix the issue:

<StripeProvider>
   <Elements>
      <FormWithInjectStripe>
         <CardElement />
      </FormWithInjectStripe>
    </Elements>
</StripeProvider>

[keeth]

I got this error due to a programming error with conditional rendering.. had a case where CardElement was not being rendered inside Elements but createToken was being called. This error message is not very helpful.

[atty-stripe]

@keeth sorry to hear that! Do you want to open a PR to improve the error message? No obligation to — we'll do it otherwise.

[SergeyShablenko]

Hi, I`m having similar issue

My component is exported like this

this is how it looks on page structure, Provider is StripeProvider, just renamed it

there is an error

this is what I`m doing

this.props.stripe.createToken({ type: 'card' }).then((token, ...args) => console.log(token, args));

the issue is reproduced when I`m trying to wrap stripe element and pass it to redux-form Field
I tried to inject stripe into each wrapper, but it did not help