0
158
ViewsGet a Stripe element to float with a bootstrap v5.1 floating label
I have two fields below. An input field for my name and below it is a Stripe element for a credit card number. Based on the Stripe element documentation I can't use a HTML 'input' element to create the field, I have to use a div.
Problem - When I use a div instead of an input element, I loose the bootstrap floating label.
Question - Is there any way to get a bootstrap floating label applied to the Stripe div element ?
FYI - here is another SO post with no answer
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="floatingName" placeholder="ex. John Smith" formControlName="nameOnCard" required maxlength="30" pattern="^[a-zA-Z\s]*$">
<label for="floatingName">Name on Card</label>
</div>
<div class="form-floating mb-3">
<div class="form-control" id="floatingNumber" placeholder="ex. 1111-1111-1111-1111" #cardNumber id="cardNumber"></div>
<label for="floatingNumber">Number</label>
</div>I'm not sure how to enable Stripe js inside SO's editer window so I'll post a pic of the form on my site below as an example of what I see.
2 answers
Answer question0
The less worse way I could find to achieve this is to mix the already mentioned example 2 solution with the native bootstrap classes instead of the custom css of the example. I had not the faith to do that in my own integration. If you get strength to do it, please share the repo, I'll give it a star. Good luck!
0
If you are using PaymentElement, you can use the appearance API to set labels to floating .