react-authorize-net

Modern react integration layer for the Accept.js library.

Why

Integrating the Authorize.Net platform with a modern web application is hard. Integrating the platform with a React application is even harder. This library aims to help with that.

Installation

Using yarn

yarn add react-authorize-net

Using npm

npm install --save react-authorize-net

API

The core of this library is implemented using a pattern known as render props in the React community.

How to use

TypeScript

import React from 'react'
import FormContainer from 'react-authorize-net'

const MyPaymentForm = props => (
  <form onSubmit={props.handleSubmit}>
    <input
      name="cardNumber"
      onChange={props.handleChange('cardNumber')}
      value={props.values.cardNumber}
    />
    <input
      name="cardCode"
      onChange={props.handleChange('cardCode')}
      value={props.values.cardCode}
    />

    <input
      name="expDate"
      onChange={props.handleChange('expDate')}
      onFocus={props.handleFocus}
      value={props.values.expDate}
    />

    <button onClick={props.handleSubmit}>Pay now!</button>
  </form>
)

type InvoiceState = {
  status: 'paid' | 'unpaid'
  errors?: string[]
}

class Invoice extends React.Component<{}, InvoiceState> {
  state = { status: 'unpaid' }
  render() {
    return (
      <div>
        <h1>Invoice</h1>
        {status === 'unpaid' ? (
          <FormContainer
            component={MyPaymentForm}
            onSuccess={response => {
              // Process the payment nonce on your server...
              const result = processPaymentNonce(response.opaqueData)
              result
                .then(() => this.setState({ status: 'paid' }))
                .catch(err =>
                  this.setState({
                    status: 'unpaid',
                    errors: [
                      `Could not process payment because of ${err.toString()}`
                    ]
                  })
                )
            }}
          />
        ) : status === 'paid' ? (
          <p>Thank you for your payment!</p>
        ) : null}
      </div>
    )
  }
}