Payment Card

e => setValue(e.target.value)

e => console.log(e.target.value)

import * as React from "react";
import { PaymentCard } from "spaceweb/payment-card";

export default () => {
  const [value, setValue] = React.useState("");
  return (
    <PaymentCard
      value={value}
      onChange={e => setValue(e.target.value)}
      debouncedOnChange={e => console.log(e.target.value)}
      debounceInterval={200}
      style="w-3/4"
      intent="default"
      variant="default"
      placeholder="Please enter your credit card number..."
    />
  );
}

The Payment Card input automatically detects and formats credit card types. It shows a small thumbnail icon of the parsed credit card brand to let users know they have entered their card in the correct format. The supported credit card brands are listed here:

The card-validator library is used to determine the card format. It's also re-exported from baseui/payment-card as valid in case you need more metadata about the card.

This component is based on the Input component. All of the props you can pass to Input also work on PaymentCard.

Examples

If you'd like to add further validations, check out the card-validator package that Base Web uses under the hood too.

AutoFocus

PaymentCard accepts an autoFocus prop. For information on its behaviour, check Input's autoFocus example.

As with many of our components, there is also an uncontrolled version, StatefulPaymentCard, which manages its own state.

API

Payment Card props

Payment Card exports

You can import this module like so:

import {PaymentCard} from 'spaceweb/payment-card'

It exports the following components or utility functions:

• PaymentCard
• SIZE
• StatefulContainer
• StatefulPaymentCard
• StyledIconWrapper
• valid