Slots for credit card fields

[bennypowers]

GitHub user and web developer @bhtw raises a requirement to render separate inputs a la this example. Stripe.js exposes apis to pull this off. I'd be interested to explore ideas here that add slots for inputs

<stripe-elements publishable-key="pk_test_XXXXXXXXXXX">
  <stripe-credit-card slot="credit-card"></stripe-credit-card>
  <stripe-exp-month slot="exp-month"></stripe-exp-month>
  <stripe-exp-year slot="exp-year"></stripe-exp-year>
  <stripe-cvc slot="cvc"></stripe-cvc>
</stripe-elements>

[bhtw]

Yes, this sounds just right.
Using slots like this would be a really great feature.
Please do implement this and explain with fully working examples, both HTML and javascript, and maybe even how to style the elements :-)

[wayne-o]

Adding this would be amazing - what work would be involved?

[bennypowers]

I imagine there should be some StripeInput base class which provides default styles that ape stripe's hosted form.

Then that should be extended for each field with well-known properties (e.g. value)

alternatively, there could be a single reusable. This is probably preferable.

<stripe-elements publishable-key="pk_test_XXXXXXXXXXX">
  <stripe-cc-field slot="credit-card"></stripe-cc-field>
  <stripe-cc-field slot="exp-month"></stripe-cc-field>
  <stripe-cc-field slot="exp-year"></stripe-cc-field>
  <stripe-cc-field slot="cvc"></stripe-cc-field>
</stripe-elements>

Have at 'em @wayne-o !

keep in mind:

• tests
• a11y
• bundle sizes
• native-HTML-like APIs

[bennypowers]

I suggest queryAssignedNodes decorator to reference the slotted elements

[wayne-o]

I am going to have to have a look through the code as it is and get my head around it first! :)

[bennypowers]

feel free to ping me on polymer slack, or collect your q's here in this thread. I can't guarantee a particular time-to-respond though