web-dev-qa-db-fra.com

Création d'un jeton de bande à l'aide d'éléments séparés

Au lieu d'utiliser le type d'élément 'card', j'avais besoin de séparer les éléments. Dans l'exemple de documentation, ils n'utilisent que 'card', donc lorsqu'ils créent un jeton, ils passent simplement l'objet card au paramètre create token.

stripe.createToken(card).then(function(result) {

});

Comment passer ces multiples objets pour créer un jeton?

var cardNumber = elements.create('cardNumber');
cardNumber.mount('#card-number');
var cardExpiry = elements.create('cardExpiry');
cardExpiry.mount('#card-expiry');
var cardCvc = elements.create('cardCvc');
cardCvc.mount('#card-cvc');
var cardPostalCode = elements.create('postalCode');
cardPostalCode.mount('#card-postal-code');
javascriptstripe-payments
25
Biskwit

À partir de la référence Elements.

élément: l'élément dont vous souhaitez symboliser les données. L'élément extrait les données des autres éléments que vous avez créés sur la même instance d'éléments à tokenize.

https://stripe.com/docs/elements/reference#stripe-create-token

Vous pouvez donc initialiser des éléments

var elements = stripe.elements();

Et puis définissez/montez vos champs

var cardNumber = elements.create('cardNumber');
cardNumber.mount('#card-number');
var cardExpiry = elements.create('cardExpiry');
cardExpiry.mount('#card-expiry');
var cardCvc = elements.create('cardCvc');
cardCvc.mount('#card-cvc');

// creating a postal code element is deprecated 
// var cardPostalCode = elements.create('postalCode');
// cardPostalCode.mount('#card-postal-code');

Ensuite, cela devrait les tirer tous car ils font partie de elements

stripe.createToken(cardNumber).then(doSomething);

Edit: L'élément du code postal est obsolète, je l'ai donc supprimé de mon exemple. Si vous utilisez des champs séparés et souhaitez collecter le code postal (ou d'autres données d'adresse), vous devez le faire via un <input>, puis passez-le dans l'objet cardData facultatif lorsque vous appelez stripe.createToken

https://stripe.com/docs/stripe-js/reference#elements-create

// <input id="postal-code" name="postal_code" class="field" placeholder="90210" />

var cardData = { 
  address_Zip: document.getElementById('postal-code').value
}

stripe.createToken(cardNumber,cardData).then(doSomething);
33
duck

Voici un jsfiddle, un membre de l'équipe Stripe réuni qui adopte une approche différente:

https://jsfiddle.net/ywain/o2n3js2r/

var stripe = Stripe('XYZ');
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
});
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');
  }
}

cardNumberElement.on('change', function(event) {
  setOutcome(event);
});

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  stripe.createToken(cardNumberElement).then(setOutcome);
});
2
cman77