Setting value to a Stripe Element

Question

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

Answer 1

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