### Installing react-payment-inputs with npm

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Installs the react-payment-inputs library and its dependencies using the npm package manager.

```Shell
npm install react-payment-inputs --save
```

--------------------------------

### Installing react-payment-inputs with Yarn

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Installs the react-payment-inputs library and its dependencies using the Yarn package manager.

```Shell
yarn add react-payment-inputs
```

--------------------------------

### Integrating react-payment-inputs with React Final Form (JSX)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

This snippet demonstrates integrating `react-payment-inputs` with React Final Form. Similar to the Formik example, it uses `usePaymentInputs` to get input props and validation meta. These are then connected to React Final Form's `Field` components, using the `input` prop provided by React Final Form's render prop pattern. The validation logic mirrors the Formik example, translating `react-payment-inputs` errors into the format expected by React Final Form.

```jsx
import { Form, Field } from 'react-final-form';
import { PaymentInputsWrapper, usePaymentInputs } from 'react-payment-inputs';

function PaymentForm() {
  const {
    meta,
    getCardImageProps,
    getCardNumberProps,
    getExpiryDateProps,
    getCVCProps,
    wrapperProps
  } = usePaymentInputs();

  return (
    <Form
      onSubmit={data => console.log(data)}
      validate={() => {
        let errors = {};
        if (meta.erroredInputs.cardNumber) {
          errors.cardNumber = meta.erroredInputs.cardNumber;
        }
        if (meta.erroredInputs.expiryDate) {
          errors.expiryDate = meta.erroredInputs.expiryDate;
        }
        if (meta.erroredInputs.cvc) {
          errors.cvc = meta.erroredInputs.cvc;
        }
        return errors;
      }}
    >
      {({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <PaymentInputsWrapper {...wrapperProps}>
              <svg {...getCardImageProps({ images })} />
              <Field name="cardNumber">
                {({ input }) => (
                  <input {...getCardNumberProps({ onBlur: input.onBlur, onChange: input.onChange })} />
                )}
              </Field>
              <Field name="expiryDate">
                {({ input }) => (
                  <input {...getExpiryDateProps({ onBlur: input.onBlur, onChange: input.onChange })} />
                )}
              </Field>
              <Field name="cvc">
                {({ input }) => <input {...getCVCProps({ onBlur: input.onBlur, onChange: input.onChange })} />}
              </Field>
            </PaymentInputsWrapper>
          </div>
          <Button marginTop="major-2" type="submit">
            Submit
          </Button>
        </form>
      )}
    </Form>
  );
}
```

--------------------------------

### Apply Props to ZIP Input (JSX)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Provides an example of applying props from `getZIPProps` to the ZIP code input, ensuring custom event handlers are correctly integrated by passing them within the function call.

```jsx
<input {...getZIPProps({ onBlur: handleBlur, onChange: handleChange })} />
```

--------------------------------

### Apply Props to Card Image SVG (JSX)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Shows how to use `getCardImageProps` to apply necessary props to an SVG element for displaying the card type image. This example includes importing the default images provided by the library.

```jsx
import images from 'react-payment-inputs/images';

<svg {...getCardImageProps({ images })} />
```

--------------------------------

### Using usePaymentInputs Hook in React

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Demonstrates how to use the usePaymentInputs hook in a React functional component to manage payment input fields. It shows how to get input props and display validation errors.

```JSX
import React from 'react';
import { usePaymentInputs } from 'react-payment-inputs';

export default function PaymentInputs() {
  const { meta, getCardNumberProps, getExpiryDateProps, getCVCProps } = usePaymentInputs();

  return (
    <div>
      <input {...getCardNumberProps({ onChange: handleChangeCardNumber })} value={cardNumber} />
      <input {...getExpiryDateProps({ onChange: handleChangeExpiryDate })} value={expiryDate} />
      <input {...getCVCProps({ onChange: handleChangeCVC })} value={cvc} />
      {meta.isTouched && meta.error && <span>Error: {meta.error}</span>}
    </div>
  );
}
```

--------------------------------

### Integrating react-payment-inputs with Formik (JSX)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

This snippet shows how to integrate `react-payment-inputs` with Formik. It uses the `usePaymentInputs` hook to get input props and validation meta, and then wires these into Formik's `Field` components. Formik handles the form state and submission, while `react-payment-inputs` provides the input logic and validation details via the `meta` object. The validation function maps `react-payment-inputs` errors to Formik's error structure.

```jsx
import { Formik, Field } from 'formik';
import { PaymentInputsWrapper, usePaymentInputs } from 'react-payment-inputs';

function PaymentForm() {
  const {
    meta,
    getCardImageProps,
    getCardNumberProps,
    getExpiryDateProps,
    getCVCProps,
    wrapperProps
  } = usePaymentInputs();

  return (
    <Formik
      initialValues={{
        cardNumber: '',
        expiryDate: '',
        cvc: ''
      }}
      onSubmit={data => console.log(data)}
      validate={() => {
        let errors = {};
        if (meta.erroredInputs.cardNumber) {
          errors.cardNumber = meta.erroredInputs.cardNumber;
        }
        if (meta.erroredInputs.expiryDate) {
          errors.expiryDate = meta.erroredInputs.expiryDate;
        }
        if (meta.erroredInputs.cvc) {
          errors.cvc = meta.erroredInputs.cvc;
        }
        return errors;
      }}
    >
      {({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <PaymentInputsWrapper {...wrapperProps}>
              <svg {...getCardImageProps({ images })} />
              <Field name="cardNumber">
                {({ field }) => (
                  <input {...getCardNumberProps({ onBlur: field.onBlur, onChange: field.onChange })} />
                )}
              </Field>
              <Field name="expiryDate">
                {({ field }) => (
                  <input {...getExpiryDateProps({ onBlur: field.onBlur, onChange: field.onChange })} />
                )}
              </Field>
              <Field name="cvc">
                {({ field }) => <input {...getCVCProps({ onBlur: field.onBlur, onChange: field.onChange })} />}
              </Field>
            </PaymentInputsWrapper>
          </div>
          <Button marginTop="major-2" type="submit">
            Submit
          </Button>
        </form>
      )}
    </Formik>
  );
}
```

--------------------------------

### Access Input-Specific Errors (JavaScript)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Illustrates how to access the `meta.erroredInputs` object to get individual validation error messages for each payment input field. The object keys correspond to input names.

```javascript
const { meta } = usePaymentInputs();

console.log(meta.erroredInputs);
/*
{
  cardNumber: undefined,
  expiryDate: 'Enter an expiry date',
  cvc: 'Enter a CVC'
}
*/
```

--------------------------------

### Custom Card Number Validator Function (JS)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Provides an example of a custom validator function for the card number input. This function checks if the card type is either Visa or Mastercard and returns an error message if it's not. It demonstrates how to pass this custom validator to the `usePaymentInputs` hook options.

```JS
const cardNumberValidator = ({ cardNumber, cardType, errorMessages }) => {
  if (cardType.displayName === 'Visa' || cardType.displayName === 'Mastercard') {
    return;
  }
  return 'Card must be Visa or Mastercard';
}

export default function MyComponent() {
  const { ... } = usePaymentInputs({
    cardNumberValidator
  });
}
```

--------------------------------

### Apply Props to CVC Input (JSX)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Illustrates applying props from `getCVCProps` to the CVC input, highlighting the correct way to pass custom event handlers like `onBlur` and `onChange` within the function call.

```jsx
<input {...getCVCProps({ onBlur: handleBlur, onChange: handleChange })} />
```

--------------------------------

### Integrating React Payment Inputs with Fannypack (JSX)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

This snippet demonstrates how to integrate the `usePaymentInputs` hook with Fannypack UI components to create payment input fields. It shows how to spread the hook's props onto the input elements and display validation errors based on the `meta` object.

```jsx
import React from 'react';
import { FieldSet, InputField } from 'fannypack';
import { usePaymentInputs } from 'react-payment-inputs';
import images from 'react-payment-inputs/images';

export default function PaymentInputs() {
  const {
    meta,
    getCardNumberProps,
    getExpiryDateProps,
    getCVCProps
  } = usePaymentInputs();
  const { erroredInputs, touchedInputs } = meta;

  return (
    <FieldSet isHorizontal>
      <InputField
        // Here is where React Payment Inputs injects itself into the input element.
        {...getCardNumberProps()}
        placeholder="0000 0000 0000 0000"
        label="Card number"
        inputRef={getCardNumberProps().ref}
        // You can retrieve error state by making use of the error & touched attributes in `meta`.
        state={erroredInputs.cardNumber && touchedInputs.cardNumber ? 'danger' : undefined}
        validationText={touchedInputs.cardNumber && erroredInputs.cardNumber}
        maxWidth="15rem"
      />
      <InputField
        {...getExpiryDateProps()}
        label="Expiry date"
        inputRef={getExpiryDateProps().ref}
        state={erroredInputs.expiryDate && touchedInputs.expiryDate ? 'danger' : undefined}
        validationText={touchedInputs.expiryDate && erroredInputs.expiryDate}
        maxWidth="8rem"
      />
      <InputField
        {...getCVCProps()}
        placeholder="123"
        label="CVC"
        inputRef={getCVCProps().ref}
        state={erroredInputs.cvc && touchedInputs.cvc ? 'danger' : undefined}
        validationText={touchedInputs.cvc && erroredInputs.cvc}
        maxWidth="5rem"
      />
    </FieldSet>
  );
}
```

--------------------------------

### Using PaymentInputsWrapper with usePaymentInputs Hook (JSX)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Shows how to use the `PaymentInputsWrapper` component along with the `usePaymentInputs` hook to create styled payment input fields. It utilizes prop getters from the hook (`wrapperProps`, `getCardImageProps`, etc.) to apply necessary props to the wrapper, image, and input elements. Requires `styled-components` as a dependency.

```JSX
import React from 'react';
import { PaymentInputsWrapper, usePaymentInputs } from 'react-payment-inputs';
import images from 'react-payment-inputs/images';

export default function PaymentInputs() {
  const {
    wrapperProps,
    getCardImageProps,
    getCardNumberProps,
    getExpiryDateProps,
    getCVCProps
  } = usePaymentInputs();

  return (
    <PaymentInputsWrapper {...wrapperProps}>
      <svg {...getCardImageProps({ images })} />
      <input {...getCardNumberProps()} />
      <input {...getExpiryDateProps()} />
      <input {...getCVCProps()} />
    </PaymentInputsWrapper>
  );
}
```

--------------------------------

### Custom Error Messages Configuration (JS)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Illustrates how to define and use custom error messages for the payment inputs. An object containing specific error keys and their desired message strings is created and then passed to the `errorMessages` option of the `usePaymentInputs` hook.

```JS
const ERROR_MESSAGES = {
  emptyCardNumber: 'El número de la tarjeta es inválido',
  invalidCardNumber: 'El número de la tarjeta es inválido',
  emptyExpiryDate: 'La fecha de expiración es inválida',
  monthOutOfRange: 'El mes de expiración debe estar entre 01 y 12',
  yearOutOfRange: 'El año de expiración no puede estar en el pasado',
  dateOutOfRange: 'La fecha de expiración no puede estar en el pasado',
  invalidExpiryDate: 'La fecha de expiración es inválida',
  emptyCVC: 'El código de seguridad es inválido',
  invalidCVC: 'El código de seguridad es inválido'
}

export default function MyComponent() {
  const { ... } = usePaymentInputs({
    errorMessages: ERROR_MESSAGES
  });
}
```

--------------------------------

### Apply Props to Expiry Date Input (JSX)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Shows how to apply props from `getExpiryDateProps` to the expiry date input, emphasizing the need to include custom event handlers within the function call to avoid overriding default handlers.

```jsx
<input {...getExpiryDateProps({ onBlur: handleBlur, onChange: handleChange })} />
```

--------------------------------

### Apply Props to Card Number Input (JSX)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Demonstrates how to apply props returned by `getCardNumberProps` to an input element, including custom event handlers like `onBlur` and `onChange`. Custom handlers must be passed within the function call.

```jsx
<input {...getCardNumberProps({ onBlur: handleBlur, onChange: handleChange })} />
```

--------------------------------

### Using PaymentInputsContainer with Render Props (JSX)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Demonstrates how to use the `PaymentInputsContainer` component with the render props pattern. It shows how to access prop getter functions (`getCardNumberProps`, `getExpiryDateProps`, `getCVCProps`) and meta data from the render props to build custom payment input fields. Event handlers like `onChange` must be passed within the prop getter functions.

```JSX
import React from 'react';
import { PaymentInputsContainer } from 'react-payment-inputs';

export default function PaymentInputs() {
  return (
    <PaymentInputsContainer>
      {({ meta, getCardNumberProps, getExpiryDateProps, getCVCProps }) => (
        <div>
          <input {...getCardNumberProps({ onChange: handleChangeCardNumber })} value={cardNumber} />
          <input {...getExpiryDateProps({ onChange: handleChangeExpiryDate })} value={expiryDate} />
          <input {...getCVCProps({ onChange: handleChangeCVC })} value={cvc} />
          {meta.isTouched && meta.error && <span>Error: {meta.error}</span>}
        </div>
      )}
    </PaymentInputsContainer>
  );
}
```

--------------------------------

### Access Input-Specific Touched State (JavaScript)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Demonstrates how to access the `meta.touchedInputs` object to check the touched state (whether the user has interacted with) each payment input field. The object keys correspond to input names.

```javascript
const { meta } = usePaymentInputs();

console.log(meta.touchedInputs);
/*
{
  cardNumber: true,
  expiryDate: true,
  cvc: false
}
*/
```

--------------------------------

### Access Current Card Type Metadata (JSX)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Demonstrates how to access the `meta.cardType` object from the `usePaymentInputs` hook to retrieve and display information about the currently detected card type, such as its display name.

```jsx
const { meta } = usePaymentInputs();

<span>Current card: {meta.cardType.displayName}</span>
```

--------------------------------

### Access Global Error Message (JavaScript)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Shows how to retrieve the overall validation error message across all inputs using `meta.error` from the `usePaymentInputs` hook. This property holds a single string representing the highest priority error.

```javascript
const { meta } = usePaymentInputs();

console.log(meta.error); // "Card number is invalid"
```

--------------------------------

### Integrating React Payment Inputs with Bootstrap (JSX)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

This snippet illustrates how to use the `usePaymentInputs` hook with React Bootstrap form components. It applies the hook's props to `Form.Control` elements and uses Bootstrap's `isInvalid` prop and `Form.Control.Feedback` for displaying validation errors.

```jsx
import React from 'react';
import { FieldSet, InputField } from 'fannypack';
import { usePaymentInputs } from 'react-payment-inputs';
import images from 'react-payment-inputs/images';

export default function PaymentInputs() {
  const {
    meta,
    getCardNumberProps,
    getExpiryDateProps,
    getCVCProps
  } = usePaymentInputs();
  const { erroredInputs, touchedInputs } = meta;

  return (
    <Form>
      <Form.Row>
        <Form.Group as={Col} style={{ maxWidth: '15rem' }}>
          <Form.Label>Card number</Form.Label>
          <Form.Control
            // Here is where React Payment Inputs injects itself into the input element.
            {...getCardNumberProps()}
            // You can retrieve error state by making use of the error & touched attributes in `meta`.
            isInvalid={touchedInputs.cardNumber && erroredInputs.cardNumber}
            placeholder="0000 0000 0000 0000"
          />
          <Form.Control.Feedback type="invalid">{erroredInputs.cardNumber}</Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} style={{ maxWidth: '10rem' }}>
          <Form.Label>Expiry date</Form.Label>
          <Form.Control
            {...getExpiryDateProps()}
            isInvalid={touchedInputs.expiryDate && erroredInputs.expiryDate}
          />
          <Form.Control.Feedback type="invalid">{erroredInputs.expiryDate}</Form.Control.Feedback>
        </Form.Group>
        <Form.Group as={Col} style={{ maxWidth: '7rem' }}>
          <Form.Label>CVC</Form.Label>
          <Form.Control
            {...getCVCProps()}
            isInvalid={touchedInputs.cvc && erroredInputs.cvc}
            placeholder="123"
          />
          <Form.Control.Feedback type="invalid">{erroredInputs.cvc}</Form.Control.Feedback>
        </Form.Group>
      </Form.Row>
    </Form>
  );
}
```

--------------------------------

### Access Currently Focused Input (JavaScript)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

Shows how to access the `meta.focused` string to determine which payment input field currently has focus. The value is the name of the focused input ('cardNumber', 'expiryDate', 'cvc', or 'zip').

```javascript
const { meta } = usePaymentInputs();

console.log(meta.focused); // "cardNumber"
```

--------------------------------

### Customizing React Payment Inputs Wrapper Styles (JSX)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

This snippet shows how to apply custom styles to the PaymentInputsWrapper and its internal elements (field wrapper, input wrapper, input, error text) using the styles prop. It utilizes styled-components' css helper for defining styles based on different states (base, errored, focused) and input types (cardNumber, expiryDate, cvc).

```JSX
import { css } from 'styled-components';
import { usePaymentInputs, PaymentInputsWrapper } from 'react-payment-inputs';

function PaymentForm() {
  const {
    getCardNumberProps,
    getExpiryDateProps,
    getCVCProps,
    wrapperProps
  } = usePaymentInputs();

  return (
    <PaymentInputsWrapper
      {...wrapperProps}
      styles={{
        fieldWrapper: {
          base: css`
            margin-bottom: 1rem;
          `
        },
        inputWrapper: {
          base: css`
            border-color: green;
          `,
          errored: css`
            border-color: maroon;
          `,
          focused: css`
            border-color: unset;
            box-shadow: unset;
            outline: 2px solid blue;
            outline-offset: 2px;
          `
        },
        input: {
          base: css`
            color: green;
          `,
          errored: css`
            color: maroon;
          `,
          cardNumber: css`
            width: 15rem;
          `,
          expiryDate: css`
            width: 10rem;
          `,
          cvc: css`
            width: 5rem;
          `
        },
        errorText: {
          base: css`
            color: maroon;
          `
        }
      }}
    >
      <input {...getCardNumberProps()} />
      <input {...getExpiryDateProps()} />
      <input {...getCVCProps()} />
    </PaymentInputsWrapper>
  );
}
```

--------------------------------

### Providing Custom Card Images for React Payment Inputs (JSX)

Source: https://github.com/medipass/react-payment-inputs/blob/master/README.md

This snippet illustrates how to replace the default card images by passing a custom images object to the getCardImageProps function. The images object should contain SVG paths or elements keyed by card type names (e.g., 'mastercard'). The custom image is rendered within an <svg> element.

```JSX
import { css } from 'styled-components';
import { usePaymentInputs, PaymentInputsWrapper } from 'react-payment-inputs';

const images = {
  mastercard: (
    <g fill="none" fillRule="evenodd">
      <rect fill="#252525" height="16" rx="2" width="24" />
      <circle cx="9" cy="8" fill="#eb001b" r="5" />
      <circle cx="15" cy="8" fill="#f79e1b" r="5" />
      <path
        d="m12 3.99963381c1.2144467.91220633 2 2.36454836 2 4.00036619s-.7855533 3.0881599-2 4.0003662c-1.2144467-.9122063-2-2.36454837-2-4.0003662s.7855533-3.08815986 2-4.00036619z"
        fill="#ff5f00"
      />
    </g>
  )
}

function PaymentForm() {
  const {
    getCardNumberProps,
    getExpiryDateProps,
    getCVCProps,
    getCardImageProps,
    wrapperProps
  } = usePaymentInputs();

  return (
    <PaymentInputsWrapper {...wrapperProps}>
      <svg {...getCardImageProps({ images })} />
      <input {...getCardNumberProps()} />
      <input {...getExpiryDateProps()} />
      <input {...getExpiryDateProps()} />
      <input {...getCVCProps()} />
    </PaymentInputsWrapper>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.