Modern react integration layer for the Accept.js library.
Integrating the Authorize.Net platform with a modern web application can be painful.
Their whole platform is very unfriendly to SPAs and even more so to the beautiful programming model offered by React.
The main goal of this library is to abstract some of this pain away.
- Modern idiomatic React interface to Accept.js
- Small API surface
- Fully typed interface (using TypeScript)
- Quick and easy integration in any modern React stack
- Elegant and beautiful form UX available by default
- Simple authentication with Authorize.Net platform
- Easy validation of user input
npm install --save react-authorize-net
This component can be used to easily implement and integrate a payment form in a React application.
string
Your Authorize.Net Client Key.
string
Your Authorize.Net API Login ID.
number
The amount of money that is being charged by the payment form.
"sandbox" | "production"
Which underlying Accept.js library to use.
The libaries are unique to both Authorize.Net environments (production and sandbox), so it is important to load the sandbox library if you are testing transactions, and to use the production library for live transaction processing, as shown below.
(response: Accept.Response) => void
Function called on successful reception of payment nonce.
(errors: string[]) => void
Function called on failed form submission.
FormContainer
expect a function returning some React elements (a component) passed in the render
prop. This should allow for maximum flexibility during the implementation of your payment form UX.
This function will be called with an object containing the following properties:
{ cardCode: string, cardNumber: string, expDate: string }
values
represents the values backing your underlying input elements.
(keyof FormType, React.ChangeEvent<any>) => React.ChangeEvent<any>
handleChange
is the callback used to notify FormContainer
about changes to the raw values backing your form inputs.
{ cardCode: boolean, cardNumber: boolean, expDate: boolean }
validationErrors
is an object used to represent any invalid state (invalid user input) present in your payment form.
The validation is made according to the shape of data that Authorize.Net API is expecting.
[]string
apiErrors
represents any errors that Authorize.Net API might return while making the underlying API request.
You can use this repo as a reference point on how to integrate the library in an existing React application.