material-ui-stripe-elements/src/index.js

Use Stripe elements in combination with Material-UI with ease

import React, { cloneElement } from "react";
import { TextField, withTheme } from "@material-ui/core";

const StripeTextField = withTheme(function(props) {
  const { stripeOptions, StripeElement, theme, ...rest } = props;
  const options = {
    style: {
      iconStyle: "solid",
      base: {
        ...theme.typography.body1,
        color: theme.palette.text.primary,
        fontSmoothing: "antialiased",
        "::placeholder": {
          color: theme.palette.text.secondary
        }
      },
      invalid: {
        iconColor: theme.palette.error.main,
        color: theme.palette.error.main
      }
    },
    ...stripeOptions
  };
  return (
    <TextField
      InputLabelProps={{
        shrink: true
      }}
      InputProps={{
        inputComponent: props.select ? null : (
          <StripeElement options={options}></StripeElement>
        )
      }}
      SelectProps={{
        inputComponent: props.select ? (
          <StripeElement options={options}></StripeElement>
        ) : null
      }}
      {...rest}
    />
  );
});

export default StripeTextField;