react-authorize-net
react-authorize-net copied to clipboard
j-em
Authorize.net integration for React
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.
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]!
j-em