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.