React-stripe-elements: onChange prop value undefined

[albert-olive]

Hi,

I'm trying to have access to the value of the input with the onChange method you provide. This is the code:

const CardNumber = ({ name, onChange, value }: Props) => {
  const handleChange = change => {
    console.log(change);
    onChange();
  };
  return (
    <CardContainer>
      <Title>Card number</Title>
      <label>
        <CardNumberElement
          name={name}
          placeholder="Card number"
          onChange={handleChange}
          style={{
            base: {
              fontSize: '16px',
              textTransform: 'capitalize',
              fontWeight: '100',
              '::placeholder': {
                color: '#BBBBBB'
              }
            }
          }}
        />
      </label>
    </CardContainer>
  );
};

export default CardNumber;

I need the value because I'm using Formik package to validate the form.

Some help please :)

[atty-stripe]

Hi @albert-olive! Elements does not surface the values of sensitive card data, including card number, expiry, and CVC. This is to ensure compliance with PCI SAQ A requirements (simply put, sensitive card information can only be entered on secure hosts, in this case an iframe hosted on js.stripe.com.)

For more information on PCI compliance, and how different Stripe products meet your needs, see our guide here: https://stripe.com/docs/security#validating-pci-compliance.

Let us know if you have more questions!