npm package: @monei-js/react-components
Description: MONEI React components for accepting payments with CardInput, Bizum, PayPal, and PaymentRequest.
Author: MONEI
Latest version: 2.0.7

# @monei-js/react-components

React components for MONEI payments. Typed props, `ref`-based `submit()`, and idiomatic React API.

## Install

```bash
npm install @monei-js/react-components @monei-js/components
```

## Components

| Component        | Description                                |
| ---------------- | ------------------------------------------ |
| `CardInput`      | Secure card input (iframe) with `submit()` |
| `Bizum`          | Bizum button + phone verification modal    |
| `PayPal`         | PayPal checkout button                     |
| `PaymentRequest` | Apple Pay / browser Payment Request button |

## Quick Start

```tsx
import {useRef} from 'react';
import {CardInput, confirmPayment, type CardInputHandle} from '@monei-js/react-components';

function PaymentForm({paymentId}: {paymentId: string}) {
  const cardRef = useRef<CardInputHandle>(null);

  const handleSubmit = async () => {
    const {token, error} = await cardRef.current!.submit();
    if (error) return console.error(error);
    await confirmPayment({paymentId, paymentToken: token});
  };

  return (
    <div>
      <CardInput ref={cardRef} paymentId={paymentId} />
      <button onClick={handleSubmit}>Pay</button>
    </div>
  );
}
```

## API Re-exports

`confirmPayment` and `api` are re-exported from this package for convenience:

```tsx
import {CardInput, Bizum, confirmPayment, api} from '@monei-js/react-components';
```

## Migrating from `.driver('react')`

### Import changes

Before:

```tsx
import {CardInput, Bizum, PayPal, PaymentRequest, createToken} from '@monei-js/components';
import React, {useRef} from 'react';

const ReactCardInput = CardInput.driver('react', {React});
const ReactBizum = Bizum.driver('react', {React});
const ReactPayPal = PayPal.driver('react', {React});
const ReactPaymentRequest = PaymentRequest.driver('react', {React});
```

After:

```tsx
import {CardInput, Bizum, PayPal, PaymentRequest} from '@monei-js/react-components';
```

### submit() migration

Before (standalone `createToken`):

```tsx
import {createToken} from '@monei-js/components';

const ref = useRef(null);
// ...
const {token} = await createToken(ref.current, {cardholderName: 'John'});
```

After (instance `submit()`):

```tsx
import {CardInput, type CardInputHandle} from '@monei-js/react-components';

const ref = useRef<CardInputHandle>(null);
// ...
const {token} = await ref.current!.submit({cardholderName: 'John'});
```

### Full example

```tsx
import {useRef, useState} from 'react';
import {CardInput, confirmPayment, type CardInputHandle} from '@monei-js/react-components';

function PaymentForm({paymentId}: {paymentId: string}) {
  const cardRef = useRef<CardInputHandle>(null);
  const [error, setError] = useState('');

  const handleSubmit = async () => {
    const {token, error} = await cardRef.current!.submit();
    if (error) return setError(error);
    await confirmPayment({paymentId, paymentToken: token});
  };

  return (
    <div>
      <CardInput ref={cardRef} paymentId={paymentId} onChange={({isValid}) => setError('')} />
      <button onClick={handleSubmit}>Pay</button>
      {error && <p>{error}</p>}
    </div>
  );
}
```

## Documentation

Full API reference: [docs.monei.com/monei-js/reference](https://docs.monei.com/monei-js/reference/)

## License

MIT