CODEWITHSUNDEEP
javascriptjquerystripe-paymentsstripe-connectstripe.js
Maja Jelen
Maja Jelen

Reputation: 223

Stripe.js parsing individual information

I am trying to use my own input form to get credit card information and then use it to generate a token. In Stripe.js 3 this is apparently hard to achieve since it uses iframes to mount input fields to each div element. Apparently there is an update() function with which you could take the values from somewhere else (my own UI), but I cannot get it working. Does anyone have an idea on how to implement this?

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

https://jsfiddle.net/507oh942/2/

https://stripe.com/docs/stripe.js#other-methods

I am also not sure that Stripe.js 2, which supports this is still active. Does anyone have a working fiddle utilizing the older version?

Upvotes: 0

Views: 442

Answers (1)

duck
duck

Reputation: 5470

In Stripe.js v3 all the card info is served on iframes hosted from Stripe's domain, it's not possible to grab the card info from your own form. If you need to do this I would continue to use Stripe.js v2, though be aware that there are PCI implications that come along with that (SAQ A-EP vs SAQ A).

If you'd like to break apart the fields in v3 into separate components (one field for number, expiration, etc) you can easily do that, though they are still hosted from an iframe.

See here for full example, https://jsfiddle.net/o2n3js2r/132/

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

Upvotes: 1

Related Questions