Wie kann ich eine Formatvorlage Streifen-Elementen input mit Bootstrap?

Baue ich eine einfache website, die Abwicklung von Zahlungen mit Streifen. Ich bin mit Bootstrap für mein styling. Wenn ich mit Streifen-Elemente einfügen, die Zahlung Felder, Sie sind nicht gestylt mit Bootstrap. Wie kann ich Bootstrap-styling zu den Elementen, die Zahlung Felder?

InformationsquelleAutor michael | 2017-09-04

17

Nach dem Graben um die docs ein bisschen mehr, fand ich, dass
https://stripe.com/docs/stripe.js#the-element-container sagt "Du
sollte Stil den container mounten Sie ein Element an, als ob es eine
auf Ihrer Seite".

Durch hinzufügen von Bootstrap ist form-control Klasse der <div> ich bin der Montage des Elements in das Feld sieht fast aus wie jede andere Bootstrap-Stil Eingabefeld:
```
<div id="card-element" class="form-control"></div>
```
Für einige Grund, die Höhe des Feldes nicht ganz mithalten, aber durch Versuch und Irrtum, ich habe es
mit:
```
var stripe = Stripe('your_key');
var elements = stripe.elements();
var card = elements.create('card', { style:
  {
    base: {
      lineHeight: '1.429'
    }
  }
});
card.mount('#card-element');
```
- Das ist wahr, aber Sie müssen auch einen Rahmen Farbe, wenn das element fokussiert ist. Auch, wenn Sie mit Bootstrap 4 beta, und versuchen, zu verwenden, input-Gruppen, dann ändern Sie ein element CSS so, dass es display:block statt display:flex. Ich habe eine funktionierende demo ... aber es ist nicht wirklich die Antwort auf deine Frage ... es sei denn, es ist.
- Große Punkte! Das klingt wie die Antwort 🙂 ich würde gerne sehen, dass der demo.
- in meinem Fall form-control wird entfernt, irgendwie.
InformationsquelleAutor michael

Dies ist alles, was erforderlich war für uns mit

  <div class="form-group">
    <label for="card-element">Credit or debit card</label>
    <div id="card-element" class="form-control" style='height: 2.4em; padding-top: .7em;'>
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>