react-stripe-js is unable to create individual elements

[mpmenne]

So we're using the react-stripe-js to render Stripe elements on the page. When we render the Stripe elements using the JavaScript returned by the STRIPE_JS_HOST/v3/, it renders every component each time we call create. Please check out the example below.

Here is a code example.

    this.stripe = Stripe(stripeApiKey);
    const elements = this.stripe.elements();

    this.cardNumber = elements.create('cardNumber', {
      placeholder: this.cardTarget.dataset.placeholder,
      style: this.style,
    });
    this.cardExpiry = elements.create('cardExpiry', {
      placeholder: this.dateTarget.dataset.placeholder,
      style: this.style,
    });
    this.cardCvc = elements.create('cardCvc', {
      placeholder: this.cvcTarget.dataset.placeholder,
      style: this.style,
    });
    this.postalCode = elements.create('postalCode', {
      placeholder: this.postalCodeTarget.dataset.placeholder,
      style: this.style,
    });

Expected Result

Actual Result

It looks like we have the parameters, we just need to dynamically render the correct fields:
https://github.com/thoughtbot/fake_stripe/blob/master/lib/fake_stripe/assets/v3.js#L24

Happy to submit a PR if other people are seeing this issue as well.

[mpmenne]

Submitted PR #116 to address this issue. Please take a look and let me know if you have any feedback!