React components for Authorize.Net payments
npm install authorizenet-reactA 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.
- đĒļ 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)
``bash`
npm install authorizenet-react
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"
}
`jsx
import { AuthorizeNetProvider, Card, useAuthorizeNet } from 'react-authorize-net';
// Wrap your app with AuthorizeNetProvider
function App() {
return (
clientKey="YOUR_CLIENT_KEY"
environment="sandbox" // or "production"
>
);
}
// 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 (
API Reference
$3
The provider component that wraps your application:
jsx
clientKey="YOUR_CLIENT_KEY"
environment="sandbox" // or "production"
className="custom-class" // optional
>
{/ Your app /}
`#### Props
-
(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$3
A React component that creates a card input field:
`jsx
style: {
base: {
fontSize: '16px',
color: '#424770',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#9e2146'
}
}
}}
onChange={({ complete, error }) => {
// Handle changes
}}
className="custom-class"
/>
`#### Props
-
(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$3
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
-
: 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")MIT