2

I'm wondering how to style stripe elements with floating labels (bootstrap 5). All my other fields are styled this way so it would be ideal to style the credit card input and cvv input in order to match the theme of my website. I've tried using the answers in: How can I style a Stripe Elements input with Bootstrap?, but they don't seem to translate over to floating fields very well. The problem is that the fields can't recognize when the field is selected so the floating animation never happens. Here is the code that I was trying to use for the element specifically:

<div class="form-floating">
    <label for="card-number" class="form-label">Credit Card Number</label>
    <span id="card-number" class="form-control">
         <!-- Stripe Card Element -->
    </span>
</div>

Is there anyway to recognize the input and force the animation to happen?

By the way, in case anyone was wondering I'm using a completely custom checkout page and I'm just using stripe for the credit card info: it validates the payment info with stripe, gives back the token which is sent to my server backend, and the payment is created on the backend using the token. That's why I prefer to use a styled form as it fits my flow and theme better.

Shamit Surana
  • 71
  • 6
  • 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:22

0 Answers0