0
159
VisualizaçõesObtenga un elemento Stripe para flotar con una etiqueta flotante bootstrap v5.1
Tengo dos campos a continuación. Un campo de entrada para mi nombre y debajo hay un elemento Stripe para un número de tarjeta de crédito. Según la documentación del elemento Stripe, no puedo usar un elemento de 'entrada' HTML para crear el campo, tengo que usar un div.
Problema : cuando uso un div en lugar de un elemento de entrada, pierdo la etiqueta flotante de arranque .
Pregunta : ¿Hay alguna forma de aplicar una etiqueta flotante de arranque al elemento div de Stripe?
FYI: aquí hay otra publicación SO sin respuesta
<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>No estoy seguro de cómo habilitar Stripe js dentro de la ventana del editor de SO, así que publicaré una foto del formulario en mi sitio a continuación como ejemplo de lo que veo.
2 Respostas
Responde à pergunta0
La forma menos mala que pude encontrar para lograr esto es mezclar la solución del ejemplo 2 ya mencionada con las clases nativas de arranque en lugar del css personalizado del ejemplo. Yo no tenía la fe para hacer eso en mi propia integración. Si tienes fuerzas para hacerlo, comparte el repositorio, le daré una estrella. ¡Buena suerte!
0
Si usa PaymentElement, puede usar la API de apariencia para establecer labels floating .