React.js Project to Integrate Paypal Payment Gateway Button inside Browser Using JSX & Javascript

Welcome folks today in this blog post we will be integrating paypal payment gateway button inside the browser using jsx and javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js project using the below command as shown below

npx create-react-app sampleapp

cd sampleapp

And after that you need to install the below libraries using the below command as shown below

npm i @paypal/react-paypal-js

And after that you will see the below directory structure of the react.js app as shown below

Now we need to copy paste the below code inside the App.js file as shown below

App.js

import { PayPalButtons, PayPalScriptProvider } from '@paypal/react-paypal-js';
import { useState } from 'react';
import './App.css';
 
function App() {
 
  const [show, setShow] = useState(false)
  const [success, setSuccess] = useState(false)
  const [errorMessage, setErrorMessage] = useState('')
  const [orderId, setOrderId] = useState(false)
  
  const createOrder = (data, actions) => {
    return actions.order.create({
      purchase_units: [
        {
          description: 'This is the Book Worth 100
,
          amount: {
            currency_code: 'USD',
            value:100
          },
        },  
      ],
      application_context: {
        shipping_preference:'NO_SHIPPING'
      }
    })
      .then((orderID) => {
        setOrderId(orderID)
        return orderID
    })
  }
 
  const onApprove = (data,actions) => {
    return actions.order.capture().then(function (details) {
      const { payer } = details
      setSuccess(true)
    })
  }
 
  const onError = (data, actions) => {
    setErrorMessage("An error occured with your payment")
  }
 
  return (
    <div className="App">
      <PayPalScriptProvider
        options={{
          "client-id":
            "###replacethiswithyourownclientid###"
        }}
      >
      <h1>Simple Book Worth 100lt;/h1>
      <span>100lt;/span>
      <button onClick={() => setShow(true) } type='submit'>
        Buy Now
      </button>
 
      {show ? (
          <PayPalButtons style={{ layout: 'vertical' }} createOrder={createOrder}
            onApprove={onApprove} onError={onError}/>
        ) : null}
        
        {success ? (
          <h1>Your Payment has been done successfully please check email</h1>
        ):<h2>payment is pending</h2>}
      
    </PayPalScriptProvider>
    </div>
  );
}
 
export default App;

import { PayPalButtons, PayPalScriptProvider } from '@paypal/react-paypal-js';

import { useState } from 'react';

import './App.css';

function App() {

const [show, setShow] = useState(false)

const [success, setSuccess] = useState(false)

const [errorMessage, setErrorMessage] = useState('')

const [orderId, setOrderId] = useState(false)

const createOrder = (data, actions) => {

return actions.order.create({

purchase_units: [

{

description: 'This is the Book Worth 100

amount: {

currency_code: 'USD',

value:100

application_context: {

shipping_preference:'NO_SHIPPING'

}

})

.then((orderID) => {

setOrderId(orderID)

return orderID

})

}

const onApprove = (data,actions) => {

return actions.order.capture().then(function (details) {

const { payer } = details

setSuccess(true)

})

}

const onError = (data, actions) => {

setErrorMessage("An error occured with your payment")

}

return (

<PayPalScriptProvider

options={{

"client-id":

"###replacethiswithyourownclientid###"

}}

<h1>Simple Book Worth 100lt;/h1>

<button onClick={() => setShow(true) } type='submit'>

Buy Now

</button>

{show ? (

<PayPalButtons style={{ layout: 'vertical' }} createOrder={createOrder}

onApprove={onApprove} onError={onError}/>

) : null}

{success ? (

<h1>Your Payment has been done successfully please check email</h1>

):<h2>payment is pending</h2>}

</PayPalScriptProvider>

</div>

);

}

export default App;

Here you need to replace the clientid inside the above code. And here we are using the PaypalButtons library to render the buttons and here we are initializing the different events which is when the customer is creating the order and error happened.