javascript - img - title html css

Creando token de banda usando elementos separados

Question

En lugar de usar el tipo de elemento ''tarjeta'', necesitaba separar los elementos. En el ejemplo de la documentación, solo usan ''tarjeta'', por lo que cuando crean un token, simplemente pasan el objeto de la tarjeta al parámetro crear token.

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

});

¿Cómo puedo pasar estos múltiples objetos para crear un token?

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'');

Answer 1

Aquí hay un jsfiddle del equipo de Stripe que toma un enfoque diferente:

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);
});

Answer 2

De la referencia de los Elements .

elemento: el Elemento desde el que desea tokenizar datos. El elemento extraerá datos de otros elementos que haya creado en la misma instancia de elementos para tokenizar.

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

Para que puedas inicializar elementos.

var elements = stripe.elements();

Y luego define / monta tus campos

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'');

Entonces esto debería atraerlos a todos ya que son parte de los elements

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

Edición: el elemento del código postal ha quedado en desuso, así que lo eliminé de mi ejemplo. Si está utilizando campos separados y desea recopilar el código postal (u otros datos de dirección), debe hacerlo a través de un <input> y luego pasarlo al objeto cardData opcional cuando llame a 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);