search

richnologies / ngx-stripe

Angular 6+ wrapper for StripeJS
MIT License
217 stars 77 forks source link

[BUG] <ngx-stripe-card> layout broken after recent Link integration #237

Open AscenKeeprov opened 8 months ago

AscenKeeprov commented 8 months ago

Description The layout of all instances of the <ngx-stripe-card> input field in our application suddenly broke (see video clip below). We noticed that the recently-introduced Link payment method integration is doing a lot of things automatically - resizing elements, moving them around, sometimes even hiding input fields (unsure if it's supposed to do so under normal circumstances or this is part of the bug). Since none of those are under our control and we couldn't solve the problem by tweaking styles, we decided to temporarily disable the Link integration hoping that the aforementioned behaviour would stop. We tried to disable Link both through the Stripe dashboard as well as in our app's code by setting the disableLink property of the StripeCardElementOptions we use to initialize our card elements to false. Alas, nothing changed, at least not visually. The Link button still appears sometimes and, even when it doesn't, the rest of the input fields are still moved around seemingly to make space for it. Up until a couple of days ago, all of the input fields were still visible at all times while a user was entering payment information with the bank card number field always sticking to the left while the exp. date and CVC fields were on the right side thus fully occupying the entire width of the parent element.

Steps To Reproduce

  1. Run a web app that has "ngx-stripe" 9.4.0 as a dependency and uses <ngx-stripe-card> elements in payment forms
  2. Type bank card number inside the card input field
  3. Try to proceed with entering expiration date and CVC code
  4. Observe difficulty seeing and/or interacting with exp. date and CVC input fields

Expected behavior All input fields that the <ngx-stripe-card> element comprises are clearly visible, do not move around and can be interacted with for as long the user is typing.

Footage

card-input-field-issue

Desktop:

AscenKeeprov commented 8 months ago

Provided footage is from Chrome. On Firefox, the exp. date and CVC fields do not even appear after the user enters the whole bank card number.