authorizenet-react/README.md

React components for Authorize.Net payments

# React Authorize.Net

A lightweight React library for integrating Authorize.Net payments into your React applications. This library provides React components and hooks for accepting payments through Authorize.Net with minimal dependencies.


## Features

- 🪶 Lightweight with zero dependencies
- ⚛️ React hooks for easy integration
- 🔒 Secure token generation
- 🎨 Customizable styling
- 📱 Responsive design
- 💪 TypeScript support
- 🖼️ Multiple payment form options (Card Element and Hosted Form)

## Installation

```bash
npm install authorizenet-react
```

## Peer Dependencies

This library requires the following peer dependencies:

```json
{
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
```

## Usage

### Card Element

```jsx
import { AuthorizeNetProvider, Card, useAuthorizeNet } from 'react-authorize-net';

// Wrap your app with AuthorizeNetProvider
function App() {
  return (
    <AuthorizeNetProvider
      apiLoginId="YOUR_API_LOGIN_ID"
      clientKey="YOUR_CLIENT_KEY"
      environment="sandbox" // or "production"
    >
      <CheckoutForm />
    </AuthorizeNetProvider>
  );
}

// Create a checkout form component
function CheckoutForm() {
  const { createToken } = useAuthorizeNet();

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const { token, descriptor } = await createToken();
      // Send token to your server
      console.log('Payment token:', token);
      console.log('Descriptor:', descriptor);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement 
        options={{
          style: {
            base: {
              fontSize: '16px',
              color: '#424770',
              '::placeholder': {
                color: '#aab7c4'
              }
            },
            invalid: {
              color: '#9e2146'
            }
          }
        }}
        onChange={({ complete, error }) => {
          if (complete) {
            console.log('Card details complete');
          }
          if (error) {
            console.error('Error:', error);
          }
        }}
      />
      <button type="submit">Pay</button>
    </form>
  );
}
```

## API Reference

### AuthorizeNetProvider

The provider component that wraps your application:

```jsx
<AuthorizeNetProvider
  apiLoginId="YOUR_API_LOGIN_ID"
  clientKey="YOUR_CLIENT_KEY"
  environment="sandbox" // or "production"
  className="custom-class" // optional
>
  {/* Your app */}
</AuthorizeNetProvider>
```

#### Props

- `apiLoginId` (string, required): Your Authorize.Net API Login ID
- `clientKey` (string, required): Your Authorize.Net Client Key
- `environment` (string, optional): "sandbox" or "production", defaults to "sandbox"
- `className` (string, optional): Custom CSS class for the provider wrapper

### CardElement

A React component that creates a card input field:

```jsx
<Card
  options={{
    style: {
      base: {
        fontSize: '16px',
        color: '#424770',
        '::placeholder': {
          color: '#aab7c4'
        }
      },
      invalid: {
        color: '#9e2146'
      }
    }
  }}
  onChange={({ complete, error }) => {
    // Handle changes
  }}
  className="custom-class"
/>
```

#### Props

- `options` (object, optional): Styling options for the card element
- `onChange` (function, optional): Callback for form state changes
- `className` (string, optional): Custom CSS class for the card element

### useAuthorizeNet

A hook for accessing the Authorize.Net context:

```jsx
const { createToken, isScriptLoaded } = useAuthorizeNet();

// Create a payment token
const handlePayment = async () => {
  try {
    const { token, descriptor } = await createToken();
    // Use the token
  } catch (error) {
    // Handle error
  }
};
```

#### Returns

- `createToken`: Function to generate a payment token
- `isScriptLoaded`: Boolean indicating if the Authorize.Net script is loaded
- `setCardData`: Function to set card data manually (advanced usage)
- `apiLoginId`: The API Login ID provided to the provider
- `clientKey`: The Client Key provided to the provider
- `environment`: The environment setting ("sandbox" or "production")

## License

MIT