React Component Library

import React from 'react';
import {
    PaymentForm,
    PayloadInput,
    CardNumber,
    Expiry,
    CardCode
} from 'payload-react';

function CheckoutForm() {
    return <PaymentForm
      clientToken='client_key_2zsp9Pske5l2Bgcy3bySES'
      className="container"
      styles={{invalid: 'is-invalid'}}
      onProcessed={(evt)=>{
        alert(`Processed: ${evt.transaction_id}`)
      }}
      onError={(evt)=>{
        alert(evt.message)
      }}
    >
        <PayloadInput
         attr="amount" type="hidden" value="10.00"
        />
        <div className="row pt-2">
            <div className="form-group col-7 px-1">
                <label>Card</label>
                <CardNumber className="form-control"
                 onInvalid={(evt)=>{
                    alert(evt.message)
                 }}
                />
            </div>
            <div className="form-group col-3 px-1">
                <label>Expiration</label>
                <Expiry className="form-control"
                 onInvalid={(evt)=>{
                    alert(evt.message)
                 }}
                />
            </div>
            <div className="form-group col-2 px-1">
                <label>CVC</label>
                <CardCode className="form-control"/>
            </div>
        </div>
        <div className="row pt-2">
            <button className="btn btn-primary" type="submit">
                Pay Now
            </button>
        </div>
    </PaymentForm>
}

npm install payload-react

import {
    PaymentForm,
    PaymentMethodForm,
    PayloadInput,
    CardNumber,
    Expiry,
    CardCode,
    RoutingNumber,
    AccountNumber,
    ProcessingAccountForm,
    openProcessingAccountForm
} from 'payload-react';