web-dev-qa-db-fra.com

Comment personnaliser le formulaire de carte de crédit dans Stripe?

Je configure la passerelle de paiement en utilisant Stripe , j'ai une structure de base, vous pouvez voir que vous pouvez ajouter des styles dans le code javascript mais pas quelque chose qui structure le contenu HTMLform du code suivant:

$(document).ready(function() {
var stripe = Stripe('pk_test_lf3erqZAzfBDiiNp1wfFkxgv');
var elements = stripe.elements();

var style = {
  base: {
    color: '#303238',
    fontSize: '16px',
    fontFamily: '"Open Sans", sans-serif',
    fontSmoothing: 'antialiased',
    '::placeholder': {
      color: '#CFD7DF',
    },
  },
  invalid: {
    color: '#e5424d',
    ':focus': {
      color: '#303238',
    },
  },
};
var card = elements.create('card', {style: style});
card.mount('#card-element');

});
<script src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<form action="charge.php" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- a Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display form errors -->
    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
</form>

Remarque: StackOverflow ne fonctionne pas n'affiche pas les résultats, vous pouvez voir les résultats du code dans https://jsfiddle.net/k16mk5z1 /

Son résultat est le suivant:

introducir la descripción de la imagen aquí

Comment puis-je personnaliser la conception du formulaire comme suit:

introducir la descripción de la imagen aquí

Il existe une documentation donnant références mais je ne les comprends pas bien .

Remarques:

A partir de la version 3 de stripe, cette nouvelle version génère le contenu du formulaire carte au moyen de son plugin javascript

auparavant, dans la version 2, il y avait une structure HTML du formulaire.

stripe-payments
17
user8880927

Vous pouvez utiliser des champs séparés avec Elements, par exemple: http://jsfiddle.net/ywain/whj357u9/

Si vous souhaitez également collecter le nom du titulaire de la carte, vous devrez utiliser un champ <input> Normal et fournir son contenu dans le deuxième paramètre lors de l'appel de createToken(): http: //jsfiddle.net/ywain/eckhnz19/

MODIFIER: Si vous souhaitez que le champ de carte séparé affiche l'icône de la marque de carte, vous devrez réimplémenter cette fonctionnalité vous-même. Il est relativement facile de le faire en utilisant l'événement change. Voici un exemple: http://jsfiddle.net/ywain/L96q8uj5/

32
Ywain