Getting a reference to a Stripe Element when using individual block elements

[e-monson]

Let's say I'm using the individual Stripe Element components like this. I need to pass a reference to at least one of the elements to my "submit" action. Is there some way to do this without placing my button inside one of the element blocks? The "elements" reference I'm passing in the example below doesn't seem to have what I'm looking for.

{{#stripe-elements as |elements|}}
  {{#elements.cardNumber as |numberElement numberError|}}
    <div>Other content</div>
  {{/elements.cardNumber}}
  {{#elements.cardExpiry as |expiryElement expiryError|}}
    <div>Other content</div>
  {{/elements.cardExpiry}}
  {{#elements.cardCvc as |cvcElement cvcError|}}
    <div>Other content</div>
  {{/elements.cardCvc}}
  <button {{action "submit" elements}}>Submit</button>
{{/stripe-elements}}

[patrick-emmanuel]

You could try add complete={{action "complete"}} on one of the elements.

Then:

complete(stripeElement) {
      this.set('stripeElement', stripeElement);
},

submit() {
      if(this.stripeElement) {
         //...
      } else {
         //...
      }
},

[e-monson]

Thanks! I think this will solve my issue.