Formatting not working after the value prop is added

[everdrone]

Just as described in the redme, placed the event handler inside the getter props but formatting is not applied.

import React, { useState } from "react";
import { usePaymentInputs } from "react-payment-inputs";

export default function PaymentInputs() {
  const [number, setNumber] = useState("");
  const [expiry, setExpiry] = useState("");
  const [cvc, setCvc] = useState("");

  const {
    meta,
    getCardNumberProps,
    getExpiryDateProps,
    getCVCProps
  } = usePaymentInputs();

  return (
    <div>
      <div>
        <input
          {...getCardNumberProps({
            onChange: e => setNumber(e.target.value)
          })}
          value={number}
        />
      </div>
      <div>
        <input
          {...getExpiryDateProps({
            onChange: e => setExpiry(e.target.value)
          })}
          value={expiry}
        />
      </div>
      <div>
        <input
          {...getCVCProps({ onChange: e => setCvc(e.target.value) })}
          value={cvc}
        />
      </div>
      {meta.isTouched && meta.error && <div>Error: {meta.error}</div>}
      <button>place order</button>
    </div>
  );
}

what am i doing wrong?

[bartoszhernas]

I have the same issue. I see that in the package there is utils/formatter/formatCardNumber but I cannot import it. Can this function be made public?

[edmond-c]

The onChange prop is simply forwarded as shown below. The formatted value is set directly to the element. Perhaps a new prop onFormattedValue(value) would be useful

react-payment-inputs/src/usePaymentInputs.js

Lines 173 to 182 in d4cd50f

	const handleChangeExpiryDate = React.useCallback(
	(props = {}) => {
	return e => {
	setInputTouched('expiryDate', false);
	props.onChange && props.onChange(e);
	onChange && onChange(e);
	expiryDateField.current.value = utils.formatter.formatExpiry(e);

[bartoszhernas]

expiryDate is formatted correctly, the only problem is with cardNumber

I've fixed it by copying the formatCardNumber code into my project, and then using it when passing down the value.

        value={formatCardNumber(cardNumber || "")}

Also another bug is that this function requires sting, null or undefined will raise an exception.

[jxom]

Should be fixed in 1.0.7. Let me know how it goes!

[bartoszhernas]

Both issues are indeed resolved, thanks :)