Use Stripe and Material-UI

StripeTextField.js

import React, { useImperativeHandle } from "react";
import PropTypes from "prop-types";
import TextField from "@material-ui/core/TextField";
import { fade, useTheme } from "@material-ui/core/styles";

function StripeInput(props) {
  const {
    component: Component,
    inputRef,
    /* eslint-disable no-unused-vars */
    "aria-invalid": ariaInvalid,
    "aria-describedby": ariaDescribeBy,
    defaultValue,
    required,
    onKeyDown,
    onKeyUp,
    readOnly,
    autoComplete,
    autoFocus,
    type,
    name,
    rows,
    options,
    /* eslint-enable no-unused-vars */
    ...other
  } = props;
  const theme = useTheme();
  const [mountNode, setMountNode] = React.useState(null);

  useImperativeHandle(
    inputRef,
    () => ({
      focus: () => mountNode.focus(),
    }),
    [mountNode]
  );

  return (
    <Component
      onReady={setMountNode}
      options={{
        ...options,
        style: {
          base: {
            color: theme.palette.text.primary,
            fontSize: `${theme.typography.fontSize}px`,
            fontFamily: theme.typography.fontFamily,
            "::placeholder": {
              color: fade(theme.palette.text.primary, 0.42),
            },
          },
          invalid: {
            color: theme.palette.text.primary,
          },
        },
      }}
      {...other}
    />
  );
}

StripeInput.propTypes = {
  component: PropTypes.node.isRequired,
  inputRef: PropTypes.shape({ current: PropTypes.any }),
  "aria-invalid": PropTypes.bool,
  "aria-describedby": PropTypes.string,
  defaultValue: PropTypes.string,
  required: PropTypes.bool,
  onKeyDown: PropTypes.func,
  onKeyUp: PropTypes.func,
  readOnly: PropTypes.bool,
  autoComplete: PropTypes.bool,
  autoFocus: PropTypes.bool,
  type: PropTypes.string,
  name: PropTypes.string,
  rows: PropTypes.number,
  options: PropTypes.object,
};

export default function StripeTextField(props) {
  const {
    InputLabelProps,
    stripeElement,
    InputProps = {},
    inputProps,
    ...other
  } = props;

  return (
    <TextField
      fullWidth
      InputLabelProps={{
        ...InputLabelProps,
        shrink: true,
      }}
      InputProps={{
        ...InputProps,
        inputProps: {
          ...inputProps,
          ...InputProps.inputProps,
          component: stripeElement,
        },
        inputComponent: StripeInput,
      }}
      {...other}
    />
  );
}

StripeTextField.propTypes = {
  ...TextField.propTypes,
  stripeElement: PropTypes.node.isRequired,
};

Usage

import React from 'react'
import { CardElement } from "@stripe/react-stripe-js";
import StripeTextField from "./StripeTextField"

function MyComponent () {
  return (
    <StripeTextField label="Card" stripeElement={CardElement} />
  )
}

More Info: mui/material-ui#16037

I really like this solution, thanks!

I am trying to add options but it remains undefined