How do I get at the values in the element?

[jrdn91]

I'm just a bit confused as to how I get the values entered in the stripe-card element. I don't want to use the block form because I have a submit button outside of this element that will send along some other data to a server endpoint that creates a paysource in the customers stripe account. Can I have the values bound to some sort of controller / component property so I can get at those later when the user hits the submit button I have outside of the element?

[joshsmith]

@Jordan4jc here's an example used in a production application, if it helps: https://github.com/code-corps/code-corps-ember/blob/4d93edcef0d46592f5359f0c45939d55c24ca6bd/app/templates/components/donation/donation-container.hbs#L15-L31

[joshsmith]

And actually, the really relevant stuff is found here: https://github.com/code-corps/code-corps-ember/blob/develop/app/controllers/project/checkout.js#L36-L46

[joshsmith]

In particular, you want to notice doing something like this:

  async _createStripeToken(stripeElement) {
    let stripe = get(this, 'stripev3');

    return await stripe.createToken(stripeElement).then(({ error, token }) => {
      if (error) {
        return this._handleCreditCardTokenError(error);
      } else if (token) {
        return RSVP.resolve(token);
      }
    });
  }

...will allow you to get at the token that Stripe provides you, without necessarily using the block element to provide this. Instead, you're really using the Stripe v3 JS library (aka Elements) with this element to do a createToken.

Does that make sense and do you what you want? If so, how can we improve this in the docs?

[jrdn91]

Yes this gets me something I can use, thanks!

[cmetro]

Hi. I still have the same question that is described in this thread. I have a form to collect name, billing address and I'm trying to drop in the stripe elements credit card widget. When the user "submits" the entire form, how do I get to the stripe elements to create the token in my component action? Is there an example anywhere of the "onBlur" action?

[cmetro]

I was able to figure this out by using an "onBlur" action to save a reference to the "stripe element" in my component. Then in the forms' "submit" action, the stripe element could be combined with the rest of the form data. I'm not sure if this was the best way to do this, but it works at this point.

[kimek]

Hi John
I have 'partly' similar question:
How to pass stripElement after {{stripe-card-number}} and {{stripe-card-expiry}} is filled up ? o.O ?

[kimek]

I only know that Stripes createToken needs cardNumber elements to be pass. I've use stripe.elements instead of components and mounted them to component as I still don't know how to use those components except card one.

[caltabid]

I have a similar question: can you please provide an example without {{stripe-card}} but exploiting {{stripe-card-number}} and {{stripe-card-expiry}}?
I tried this:
[template]
{{#stripe-card-number class="input" as |element|}}
{{stripe-card-expiry class="input"}}
{{stripe-card-cvc class="input"}}
<button {{action "stripeSubmit" element}}>Submit
{{/stripe-card-number}}
{{#if stripeToken}}
stripeToken is: {{stripeToken.id}}
{{/if}}
[controller]
stripeToken: null,
actions: {
stripeSubmit(el) {
let stripe = this.get('stripev3');
stripe.createToken(el).then(({token}) => {
this.set('stripeToken', token);
});
},
}
In this case createToken only sends the card number thus getting back a "Missing required param: card[exp_month].".
In stripe documentation for createToken: "https://stripe.com/docs/stripe-js/reference#stripe-create-token" they say: "...The Element pulls data from other Elements you’ve created on the same instance of elements to tokenize...", but this seems not happening.
I also tried to put the elements in a form:
<form {{action 'stripeSubmit' elements}}>
{{stripe-card-number}}
{{stripe-card-expiry }}
{{stripe-card-cvc}}
Pay

but when I press the button Pay, calling "stripeSubmit" function, "elements" is "undefined" and I don't know what else I can use.
Can you help?

[lrdiv]

I had the most luck doing the following:

{{stripe-card options=options change=(action (mut stripeElement))}}

Then I was able to access the stripeElement that was set in my component/controller

I think the change event is available to all inputs, so setting individual inputs may need to set multiple properties