Multiple elements forms are not working

[bboyrabi]

This component is very useful for my project. My project uses template-responsive-drawer-layout of PWA Starter Kit(Polymer Project).

I tried this.

${_publishableKey ? html`
  <stripe-elements id="stripe" 
                   publishable-key="${_publishableKey}"
                   hide-postal-code
                   @change="${this._onChangeStripe}"
                   @source="${this._onSourceStripe}"
                   @error="${this._onErrorStripe}"></stripe-elements>
  <stripe-payment-request id="paymentRequest"
                          publishable-key="${_publishableKey}"
                          country="${_option.country}"
                          currency="${_option.currencyCode.toLowerCase()}"
                          amount="${_option.amount}"
                          label="${_option.label || ''}"
                          @source="${this._onSourceStripe}"></stripe-payment-request>           
` : ''}

Then two stripe elements are mount for same slot. <slot slot="stripe-card" name="stripe-card"></slot>.

Result:

<div slot="stripe-card">
  <div id="stripe-elements-mount-point-k6dtkuty" class="stripe-elements-mount StripeElement StripeElement--complete">...</div>
  <div id="stripe-elements-mount-point-k6dtlcc5" class="stripe-payment-request-mount StripeElement">...</div>
</div>

I think that stripeMountId of StripeBase.js alone will not allow multiple elements forms to be embedded on a single page, and slot-name needs to be changed for each elements.

Thank you.

[bennypowers]

Yeah I know about this error. The base class that handles the mounting doesn't disambiguate the mount point.

Hopefully I'll get a PR up soon

You can try this workaround in the mean time

render() {
    return html`
      ${!unsupported ? this.paymentRequestTemplate() : ''}
      ${unsupported ? this.stripeElementsTemplate() : ''}
    `;
}

[bennypowers]

:tada: This issue has been resolved in version 2.3.2 :tada:

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot :package::rocket: