0

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?

Matheus Lacerda
  • 5,983
  • 11
  • 29
  • 45
Maja Jelen
  • 223
  • 5
  • 13

1 Answers1

1

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');
duck
  • 5,240
  • 1
  • 15
  • 15
  • Thanks for the additional info. I would have tried to use Stripe.js v2, but I cannot get it working. Do you have a working fiddle? – Maja Jelen Oct 30 '17 at 05:48
  • @MajaJelen there's a reference for it here, https://stripe.com/docs/stripe.js/v2 One example http://jsfiddle.net/etn5kjj6/ Keep in mind the PCI implications which require you to do some additional work, https://stripe.com/docs/security#validating-pci-compliance – duck Oct 30 '17 at 15:52
  • Maybe I am missing something, but the example doesn't generate a token. – Maja Jelen Oct 30 '17 at 18:23
  • Weird, something happened to the order of execution since the last time I used the fiddle. Try http://jsfiddle.net/7bomzgn3/. Really though, I'd suggest using Elements, the PCI implications of SAQ A-EP may cost you time and money. – duck Oct 30 '17 at 22:54