react-acceptjs

> A lightweight modern React implementation of Authorize.net's Accept.JS library for easily submitting payments to the Authorize.net platform.

 

Install

``bash


install with npm

npm install --save react-acceptjs

install with yarn

yarn add react-acceptjs
`

Getting Started

Per Authorize.net's Accept.js documentation, there are three options for sending secure payment data to the Authorize.net platform (rather than transmitting sensitive credit card data to your server). You can follow along by building and running the example app located in the example directory.

Please note that Accept.js and Authorize.net require an HTTPS connection.

1. Host your own payment form and use the dispatchData() function exposed by the useAcceptJs() hook. This function returns a payment nonce which can be used by your server to process a payment in place of CC or bank account data.

`tsx
import { useAcceptJs } from 'react-acceptjs';

const authData = {
apiLoginID: 'YOUR AUTHORIZE.NET API LOGIN ID',
clientKey: 'YOUR AUTHORIZE.NET PUBLIC CLIENT KEY',
};

type BasicCardInfo = {
cardNumber: string;
cardCode: string;
month: string;
year: string;
};

const App = () => {
const { dispatchData, loading, error } = useAcceptJs({ authData });
const [cardData, setCardData] = React.useState({
cardNumber: '',
month: '',
year: '',
cardCode: '',
});

const handleSubmit = async (event) => {
event.preventDefault();
// Dispatch CC data to Authorize.net and receive payment nonce for use on your server
const response = await dispatchData({ cardData });
console.log('Received response:', response);
};

return (


type="text"
name="cardNumber"
value={cardData.cardNumber}
onChange={(event) =>
setCardData({ ...cardData, cardNumber: event.target.value })
}
/>
type="text"
name="month"
value={cardData.month}
onChange={(event) =>
setCardData({ ...cardData, month: event.target.value })
}
/>
type="text"
name="year"
value={cardData.year}
onChange={(event) =>
setCardData({ ...cardData, year: event.target.value })
}
/>
type="text"
name="cardCode"
value={cardData.cardCode}
onChange={(event) =>
setCardData({ ...cardData, cardCode: event.target.value })
}
/>

Pay


);
};

export default App;
`

2. Embed the hosted, mobile-optimized payment information form provided by Accept.js into your page via the HostedForm component. This component renders a button which, when clicked, will trigger a lightbox modal containing the hosted Accept.js form. You'll still receive the payment nonce for use on your server similar to option #1.

`tsx
import { HostedForm } from 'react-acceptjs';

const authData = {
apiLoginID: 'YOUR AUTHORIZE.NET API LOGIN ID',
clientKey: 'YOUR AUTHORIZE.NET PUBLIC CLIENT KEY',
};

const App = () => {
const handleSubmit = (response) => {
console.log('Received response:', response);
};
return ;
};

export default App;
`

3. Use Accept Hosted, Authorize.net's fully hosted payment solution that you can redirect your customers to or embed as an iFrame within your page. First, your server will make a request to the getHostedPaymentPageRequest API and receive a form token in return. Next, you'll pass this form token to the component. Rather than return a payment nonce for use on your server, Authorize.net will handle the entire transaction process based on options you specify in the getHostedPaymentPageRequest API call and return a response indicating success or failure and transaction information.

1. Redirect your customers to the Accept Hosted form:

`tsx
import { AcceptHosted } from 'react-acceptjs';

const App = ({ formToken }: { formToken: string | null }) => {
return formToken ? (

Continue to Redirect

) : (


);
};

export default App;
`

2. Embed the Accept Hosted form as in iFrame lightbox modal:

1. You'll need to host an JavaScript page that can receive messages from the Accept Hosted iFrame on the same domain as your app with the code below. You should pass this URL as the hostedPaymentIFrameCommunicatorUrl option in the getHostedPaymentPageRequest request you make to receive your form token. For example, in a React app created with Create-React-App, you could put this file into the public/ directory in order to be accessible to Accept Hosted, or place the



`

2. Now you can use the component.

`tsx
const App = ({ formToken }: { formToken: string | null }) => {
return formToken ? (
formToken={formToken}
integration="iframe"
onTransactionResponse={(response) =>
setResponse(JSON.stringify(response, null, 2) + '\n')
}
>

Continue to IFrame






) : (


);
};

export default App;
`

3. A note on styling: a goal of this library is to invert control of the UI to the developer. Each of the compound compontents (, , , and