web-dev-qa-db-fra.com

Comment ajouter le nom du titulaire de la carte à la caisse Stripe en utilisant Elements?

Je dois ajouter un champ supplémentaire à mon formulaire personnalisé, je veux ajouter le nom de la carte de crédit.

J'ai essayé de la manière suivante:

var cardNameElement = elements.create('cardName', {
  style: style
  //, placeholder: 'Custom card number placeholder',
});
cardNameElement.mount('#card-name-element');

<div id="card-name-element" class="field"></div>

Mais cela ne fonctionne pas, dans sa documentation permet uniquement d'effectuer ces procédures en validant seulement quatre éléments ou données: cardNumber, cardExpiry, cardCvc, postalCode.

Comment puis-je ajouter le nom de la carte de crédit et la valider à l'aide de stripe.js

Mon code: 

var stripe = Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
var elements = stripe.elements();

var style = {
  base: {
    iconColor: '#666EE8',
    color: '#31325F',
    lineHeight: '40px',
    fontWeight: 300,
    fontFamily: 'Helvetica Neue',
    fontSize: '15px',

    '::placeholder': {
      color: '#CFD7E0',
    },
  },
};

var cardNumberElement = elements.create('cardNumber', {
  style: style
  //, placeholder: 'Custom card number placeholder',
});
cardNumberElement.mount('#card-number-element');

var cardExpiryElement = elements.create('cardExpiry', {
  style: style
});
cardExpiryElement.mount('#card-expiry-element');

var cardCvcElement = elements.create('cardCvc', {
  style: style
});
cardCvcElement.mount('#card-cvc-element');

/*var postalCodeElement = elements.create('postalCode', {
  style: style
});
postalCodeElement.mount('#postal-code-element');*/


function setOutcome(result) {
  var successElement = document.querySelector('.success');
  var errorElement = document.querySelector('.error');
  successElement.classList.remove('visible');
  errorElement.classList.remove('visible');

  if (result.token) {
    // In this example, we're simply displaying the token
    successElement.querySelector('.token').textContent = result.token.id;
    successElement.classList.add('visible');

    // In a real integration, you'd submit the form with the token to your backend server
    //var form = document.querySelector('form');
    //form.querySelector('input[name="token"]').setAttribute('value', result.token.id);
    //form.submit();
  } else if (result.error) {
    errorElement.textContent = result.error.message;
    errorElement.classList.add('visible');
  }
}
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  stripe.createToken(cardNumberElement).then(setOutcome);
});
<script src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>

                <form action="" method="POST">
                        <input type="hidden" name="token" />
                        <div class="group">
                                <div class="card-container1">
                                        <label>
                                                <span class="title-card">Card number</span>
                                            <div id="card-number-element" class="field"></div>
                                            <span class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></span>
                                    </label>
                            </div>
                                <div class="card-details">
                                        <div class="expiration">
                                                <label>
                                                        <span class="title-card">Expiry date</span>
                                                        <div id="card-expiry-element" class="field"></div>
                                                </label>
                                        </div>
                                        <div class="cvv">
                                                <label>
                                                        <span class="title-card">CVC</span>
                                                        <div id="card-cvc-element" class="field"></div>
                                                </label>
                                        </div>
                                </div>
                        </div>
                        <button type="submit">Pay $25</button>
                        <div class="outcome">
                                <div class="error"></div>
                                <div class="success">Success! Your Stripe token is <span class="token"></span></div>
                        </div>
                </form>

Ce que je veux faire:

introducir la descripción de la imagen aquí

stripe-paymentsstripe.js
18
user8880927

Elements ne prend pas en charge la collecte du nom du titulaire de carte pour le moment. Il se concentre sur la collecte:

  • Numéro de carte
  • Date d'expiration
  • CVC
  • Code postal (dans certains pays)

Si vous souhaitez collecter le nom du titulaire de la carte, vous devez créer votre propre champ pour le nom et le soumettre à l'API lors de la création du jeton:

var card_name = document.getElementById('card_name').value;
stripe.createToken(card, {name: card_name}).then(setOutcome);

Vous pouvez voir un exemple en direct sur jsfiddle ici: https://jsfiddle.net/7w2vnyb5/

25
koopajah

Pendant que je me débattais comme un idiot pendant un moment. Depuis février 2019, vous pouvez ajouter un objet de données de jeton avec des informations sur les détails de la carte. Par exemple:

let custData = {
                          name: 'Firstname Lastname',
                          address_line1: '21 Great Street',
                          address_line2: 'Shilloong',
                          address_city: 'Chicago',
                          address_state: 'Illinois',
                          address_Zip: '12345',
                          address_country: 'US'
              };

              stripe.createToken(card, custData).then(function(result) {
                if (result.error) {
                  // Inform the user if there was an error.
                  var errorElement = document.getElementById('card-errors');
                  errorElement.textContent = result.error.message;
                } else {
                  // Send the token to your server.
                  stripeTokenHandler(result.token);
                }
              });
            });
7
Tragaknight