Question 205224 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to get the input value of the cardNumberElement stripe, ONLY IN THE FRONT

const handleChange = (e) => {
    console.log(e);
  };
<CardNumberElement
     onChange={(e) => handleChange(e)}
/>

I’m making a nice front for cardNumberElement where the user types the card numbers and they appear on the front like this 1234 **** **** **** 5678 but when I use onChange it returns value as undefined

Tags:

2

Answers


  1. 0

    var cardNumber = document.getElementById(‘cardNumberElement’).value;

    Login or Signup to reply.
  2. 0

    You can not access the raw card number client-side when using one of Stripe’s UI element like CardNumberElement or PaymentElement.

    The UI rendered is backed by an iframe hosted on Stripe’s own domain and your JS code can’t access it. This ensures the data is securely transmitted to Stripe without being accessible by a third-party and is how Stripe ensures you meet the lowest level of PCI Compliance (SAQ A) as documented here.

    In most cases, you never want to access raw card details yourself since it increases the burden of PCI compliance you have to meet and using Elements or Checkout ensures this is not an issue. If you have to access this information, for example because you store raw card details yourself and meet the higher level of PCI compliance, then you can’t use any of Stripe’s UI elements and have to build your own form though you lose out on a lot of benefits.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search