Modern and idiomatic React interface to Authorize.Net.

Why

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.

Features

• Modern idiomatic React interface to Authorize.Net
• 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

Installation

ES Module

npm install --save react-authorize-net

API

<FormContainer />

This component can be used to easily implement and integrate a payment form in a React application.

Props

clientKey

string

Your Authorize.Net Client Key.

apiLoginId

string

Your Authorize.Net API Login ID.

amount

number

The amount of money that is being charged by the payment form.

environment

"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.

onSuccess

(response: Accept.Response) => void

Function called on successful reception of payment nonce.

onError

(errors: string[]) => void

Function called on failed form submission.

render

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:

values

{ cardCode: string, cardNumber: string, expDate: string }

values represents the values backing your underlying input elements.

handleChange

(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.

validationErrors

{ 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.

apiErrors

[]string

apiErrors represents any errors that Authorize.Net API might return while making the underlying API request.

<AcceptHosted />

This component allows you to create forms that are fully SAQ-A compliant, through an idiomatic and easy-to-use API.

It is essentially a wrapper around Accept Hosted.

Styling

Custom styles can be applied to the form by supplying an appropriate style or className prop.

Custom element

The button used to trigger the actual payment form can be customized by using the children prop.

<AcceptHosted formToken={'...'}>
  <button>Pay now</button>
</AcceptHosted>

Props

formToken

string

formToken is used to represent the transaction itself.

It is returned by Authorize.Net API.

mode

'sandbox' | 'production'

If you're using the sandbox environment or not.

type

'redirect' | 'iframe'

Renders the form either as an iframe or redirect link.

More information

onResize

(width: number, height: number) => void

Called for every resizeWindow messages from Accept Hosted.

onCancel

() => void

Called for every cancel messages from Accept Hosted.

onTransact

(response: TransactionResponse) => void

Called for every transactResponse messages from Accept Hosted.

onReceiveCommunication

(queryStr: string) => void

Low level handler for raw communication between Accept Hosted and client code.

onMessage

(message: Message) => void

Called for every valid messages coming from Accept Hosted.

How to use

Code sample

You can use this repo as a reference point on how to integrate the library in an existing React application.

Commercial support

Are you having trouble integrating Authorize.Net with the rest of your infrastructure? Do you need a feature that is not supported in react-authorize-net yet?

Reach out at [email protected]!