Ability to pass options to stripe.elements()

[fotinakis]

Hello! Thanks for creating this addon, it's awesome.

Is there a way to pass the options hash on init to stripe.elements(options)? This is different than the per-element options hash. https://stripe.com/docs/stripe-js/reference#stripe-elements

I believe the init is this line: https://github.com/code-corps/ember-stripe-elements/blob/0.3.0/addon/components/stripe-element.js#L16

[fotinakis]

Ping here, any ideas or direction on this? We want to be able to use custom fonts with Stripe Elements, which require the ability to pass initialization options.

[jackhair]

We managed to use custom fonts by passing them in the style object, same way detailed here: https://github.com/code-corps/ember-stripe-elements#block-usage-with-options

[PixelJanitor]

@jackhair Can you share a snippet of the code you used to get this working? We're trying to utilize a Typekit font, so we need to pass in the stylesheet for it to load similar to https://gist.github.com/matthooks/03d7c741cd48789a140b1503193b0b6c

[jackhair]

@PixelJanitor That is pretty much what we did. I'll give a brief overview. Bear in mind we're pulling from master branch, as we couldn't use the individual fields without this PR: https://github.com/code-corps/ember-stripe-elements/pull/26

Component containing stripe form:

options: {
  style: {
    base: {
      fontFamily: '"Custom Font Name", Helvetica, sans-serif'
    }
  }
},

init() {
  this._super(...arguments);
  let elements = this.get('stripe').elements({
    fonts: [{
      cssSrc: 'https://example.com/stylesheet.css',
    }]
  });
  this.set('cardElements', elements);
},

Component template:

{{#stripe-card-number id="cardnumber" elements=cardElements options=options change=(action (mut stripeElement)) as |stripeElement stripeError|}}
   ...
{{/stripe-card-number}}

[joshsmith]

Just an update to @jackhair's comment here that you should be able to use version 0.4.0 and up now rather than pull from master.

[idgm81]

Hey guys!

As you can read in the documentation https://github.com/code-corps/ember-stripe-elements#block-usage-with-options, it can be possible to pass options object to component context but then why options object is always initialized as "{}" on init hook https://github.com/code-corps/ember-stripe-elements/blob/5810be1bd55bd28c7f82032e2ff8379acf337443/addon/components/stripe-element.js#L16? it's a bug?

[lindyhopchris]

@idgm81 haven't tried it, have you confirmed it doesn't work? If so, maybe open a separate issue and/or submit a PR?

[lindyhopchris]

Actually @idgm81 you're right that it does look like a bug. I'll fix now.

[idgm81]

Great @lindyhopchris , I also found that style object at https://github.com/code-corps/ember-stripe-elements/blob/5810be1bd55bd28c7f82032e2ff8379acf337443/tests/dummy/app/controllers/application.js#L5 is wrong, style object is passed as property shorthand to stripe-element "create" function