I am using Stripe.js Elements for : cardNumber
cardExpiry
cardCVC
I want to use in conjunction a module to scan a credit card called card.io.
Actually everything work fine and when i scan a card with card.io i end up with 2 values : the card number, the expiry date.
From there, I want to set those value into my stripe elements, is there a way to do so ? I was unable to find anything in the documentation
My HTML :
<div class="group">
<label>
<span>N° Carte</span>
<div id="card-number" class="field"></div>
</label>
<label>
<span>Expiration</span>
<div id="card-expiry" class="field"></div>
</label>
<label>
<span>CVC</span>
<div id="card-cvc" class="field"></div>
</label>
</div>
My JS :
this.cardNumber = elements.create('cardNumber', {style: style, showIcon: true});
this.cardNumber.mount('#card-number');
var cardExpiry: any = elements.create('cardExpiry', {style: style});
cardExpiry.mount('#card-expiry');
var cardCvc: any = elements.create('cardCvc', {style: style});
cardCvc.mount('#card-cvc');
You can not do that(prefill them with a raw card number) using Elements, no. If you have the raw card number than you are in PCI scope since you are directly touching highly sensitive details. https://stripe.com/docs/security/guide#validating-pci-compliance
I'd recommend relying on the browser's native card scanning(Chrome on Android has a "Scan new card" functionality that works with Elements for example) and just have the user enter their card details into Elements normally.
Card.io is unmaintained as far as I know, and also I'm confused because it's a native library, you can't really use it in a web page anyway? If you're building a native app, Stripe's iOS library has a card scanning beta that might help https://github.com/stripe/stripe-ios#card-scanning-beta