2

I'm using a library called react-payment-inputs to accept credit card numbers. The library provides input getter props that can be used to handle credit card input.

I'm able to use the getter prop methods with a simple input like this: <input {...getCardNumberProps()} />.

However, when doing the same with TextField I get an error from within the library: Error: Cannot read property 'match' of undefined at Object.formatCardNumber

Here's the code showing the issue.

import React from "react";
import { Grid, TextField } from "@material-ui/core";
import { usePaymentInputs } from "react-payment-inputs";

export default () => {
  const { getCardNumberProps } = usePaymentInputs();

  return (
    <Grid item xs={12}>
      {/* App blows up, see sandbox for demo */}
      <TextField {...getCardNumberProps()} />

      {/* If you uncomment then it shows 2 input boxes but the app doesnt blow up  */}
      {/* <input {...getCardNumberProps()} /> */}

      {/* If you uncomment this, then there is only 1 input box
      but the styling from the library (space after every 4 digits)
      is lost */}
      {/* <input {...getCardNumberProps()} type="hidden" /> */}
    </Grid>
  );
};

Here is a sandbox link showing the issue.

The library does have documentation on how to integrate with any 3rd party UI library. However, it doesn't provide a Material UI example. How can I forward these external props from TextField to the inner input correctly?

pyron_orion
  • 545
  • 5
  • 18

1 Answers1

3

I fixed it by using the inputProps property of TextField like this:

<TextField inputProps={getCardNumberProps({}) />

This works because it sends the getter methods to the input wrapped inside the TextField material element.

pyron_orion
  • 545
  • 5
  • 18