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

npm install authorizenet-react

Peer Dependencies

This library requires the following peer dependencies:

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

Usage

Card Element

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:

<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:

<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:

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