Stripe card element is not visible on the form
It should work fine under http with your test key, only on your production system https is mandatory.
I also use angular (4) and I had similar problems with the card input not showing. It turned out that in my case it was just a styling issue. By playing around with the styles, I got the card input field showing up. In the end I added these style elements (shown inline for clarity):
<div> <div style="width: 30em" #stripecardelement id="card-element"></div> </div> <div> <!-- Used to display Element errors --> <span style="width: 30em; height: 2em; letter-spacing: 0em" id="card-errors" role="alert"></span> </div>
I guess several developers are running into this when setting up the demo for the first time. The foolowing check might help unless there are other issues:
Ensure that the client actually connects to https://js.stripe.com/v3/ and that the public key is correct. If the connection fails, Payment details (card-element) will not render.
Open the inspect windows to look for any errors on the client side.