@monei-js/react-components

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

Install

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

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:

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

Migrating from .driver('react')

Import changes

Before:

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:

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

submit() migration

Before (standalone createToken):

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

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

After (instance submit()):

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

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

Full example

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

License

MIT