Authorize Net Payment Gateway in React JS

In this article, we will learn how to integrate the payment gateway of Authorize .net in react js.

– First of all, we have to create a react application.

– Add the below package.

npm i react-acceptjs
npm i react-authorize-net

– Go to the below link and signup in Authorize .net  dashboard.

https://developer.authorize.net/hello_world/sandbox.html

– Go to the below link and sign in to Authorize .net dashboard.

https://sandbox.authorize.net/

– After signing in the below page is shown in this page you need to turn on the account on test mode.

– Then we have to follow the path Account > Settings > Security Settings > General Security Settings > Manage Public Client Key there is the Authorize      .net client key shown in the below image.

– Then we have to follow the path Account > Settings > Security Settings > General Security Settings >API Credentials & Keys there is the Authorize      .net API login key shown in the below image.

– Now open your app.js file and add the below code:

import './App.css';
import { HostedForm } from 'react-acceptjs';


function App() {
  const authData = {
    apiLoginID: '2q79Hg7Na',
    clientKey: '3YuGj99zQ9MbKRLGubTG99wstp7S7C7K2B44v5xX4t8QrH3hEJjk2ZrQRymZZ939',
  };
  const handleSubmit = (response) => {
    alert(`Received response: payment ${response.messages.message[0].text}`);
  };
  return (
    <div className="App">
     <HostedForm authData={authData} onSubmit={handleSubmit} />
    </div>
  );
}

export default App;

Output:-