2

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.

enter image description here

chuckd
  • 13,460
  • 29
  • 152
  • 331
  • You could check out the element examples at https://stripe.dev/elements-examples/ Source code at example 2 https://github.com/stripe/elements-examples/#example-2 – Ponsiva May 27 '22 at 05:21
  • I saw this, but example 2 isn't really viable with bootstrap. Do you know of any other working examples that might use bootstrap floating labels? – chuckd May 27 '22 at 05:38

2 Answers2

0

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!

Alan Kersaudy
  • 739
  • 7
  • 15
  • I don't think I have the expertise to do it. CSS isn't really my strong suite. – chuckd May 27 '22 at 16:22
  • 1
    That's really a shame that stripe elements suite cannot fit into our beloved front end frameworks (for me it's vuetify). They seem to focus more on Payment Element personification, which is far from what we need. Another problem with Payment Element is the restricted language support and that we cannot even set the labels and placeholder ourselves. I wish some stripe guys will soon understand the need for such capabilities. – Alan Kersaudy May 27 '22 at 18:09
-1

If you are using PaymentElement, you can use the appearance API to set labels to floating .

qichuan
  • 1,110
  • 7
  • 8
  • Unfortunately this does not answer the question, it's just a work around. Furthermore, the floating label don't look quite as well as the bootstrap ones, so the look and feel is not uniform. – Alan Kersaudy May 27 '22 at 09:11