Confused about createToken argument(s?) about react-stripe-elements

[jez]

@ptaking:

If you're using the stripe={...} prop on StripeProvider (which means you're using one of the advanced loading strategies), your code would look like this:

https://github.com/stripe/react-stripe-elements/blob/7fe4fdf3f532921b10b56d98ae757c0d9b3fb999/demo/async/async.js#L44-L53

Another thing is that you're missing a call to injectStripe. You won't be able to do this unless you've called injectStripe on your checkout form:

https://github.com/stripe/react-stripe-elements#setting-up-your-payment-form-injectstripe

[michelle]

In the official docs, it's documented that you can use bank_account[0] or pii[1] as string arguments to createToken .

So if I were to be using individual *Element components, what type would I specify? cardNumber perhaps? Is this what is being set implicitly if I pass in no arguments?

If you were using Element instances, you can specify the Element as the first argument. However, if you're using this library, you can omit the first argument and just call props.stripe.createToken() directly within a component that has stripe injected.

[0] https://stripe.com/docs/stripe.js#collecting-bank-account-details
[1] https://stripe.com/docs/stripe.js#collecting-pii-data

[michelle]

Ah, re: black box, you can use it like this if you want to explicitly specify the type:
stripe.createToken({type: 'card'})

[jenan-stripe]

For additional clarification: you would never use cardNumber because that's an Element type, but not a token type. I definitely see the confusion with card being both an Element type and a Token type!

Please let us know if this clarifies things!

[indiesquidge]

I definitely see the confusion with card being both an Element type and a Token type!

Yeah, this is what was tripping me up at first.

I appreciate y'all trying to explain this to me. I'm still a bit confused by the ostensibly conflicting nature of these two comments

If you were using Element instances, you can specify the Element as the first argument.

you would never use cardNumber because that's an Element type, but not a token type.

It isn't a token itself that we pass, it's "the Element you wish to tokenize data from", right? And since cardNumber is a type of element, very similar to the card element, I guess I had figured that cardNumber would also have been tokenizable.

I think I'm square on how it works now, it was just the ability to call props.stripe.createToken() and have the element be passed implicitly that was mysterious to me since it doesn't work this way in the official Elements docs. And then having to pass an object, {type: 'card'}, was also tripping me up since I wasn't sure what this was doing.

[indiesquidge]

All said, I don't know what an alternative solution would be for this. I think what y'all have created is great considering the limitations at hand.

Doing something like the docs would be hard

const card = elements.create('card')
// …later
const {token, error} = await stripe.createToken(card)

Since the <*Element> components are already created for us, there is never a point in time where we as developers call something like elements.create() (in fact, elements.create() isn't even exposed publicly). Using something like {type: 'card'} feels like an okay solution, I just imagine it may confuse other people the way it initially confused me.

[jenan-stripe]

@indiesquidge Sorry, I made it more confusing! :) What I meant was you would never pass the string 'cardNumber' to createToken. You could pass a cardNumber-type Element (and that is in fact how you tokenize using the split fields). Does that help?

[indiesquidge]

You could pass a cardNumber-type Element (and that is in fact how you tokenize using the split fields).

But this is not the case with this repository, right? You cant't pass in the CardNumberElement component as an argument to stripe.createToken(). The actual element isn't exposed publicly.

Based on the signature it seems like something of type ElementShape could be passed in, but I get an error any way I attempt to do this.

But you do pass in the element when you use the Stripe API in vanilla JS.

This is kind of the essence of my confusion here: You never actually pass an element type into stripe.createToken()—it seems to be implicitly derived, but I'm not entirely sure I understand why.

[jenan-stripe]

@indiesquidge Right! In react-stripe-elements, you're not calling elements.create() directly, so it would be awkward to require users to pass the Element to createToken.

[tuononh]

@indiesquidge So what will be passed to stripe.createToken() if my form rendered as below?

   return (
      <div id="wrapper">
        <HeaderComponent />
        <main>
          <StripeProvider stripe={this.state.stripe}>
              <Elements>
                <label>
                  Card details
                  <CardElement/>
                </label>
              </Elements>
          </StripeProvider>
        </main>
      </div>
    );

[rdalfonso]

Where in the process is the payment made to Stripe?
I've been able to setup my form component using individual form components CardElement, CardNumberElement, CardExpiryElement, CardCVCElement) and I'm getting back the strip token.
What I don't understand is where the payment (amount, currency, stripe token, etc) is supposed to occur?

[jez]

@rdalfonso You need to send the token to your backend server, and use your Stripe API secret key to POST to the /v1/charges endpoint:

https://stripe.com/docs/charges