With the growing number of JavaScript libraries and architectural approaches, it becomes really difficult to figure out which one would suit our needs, and even whether we need to use one of these or not.

PayPal is the most popular payment gateway used in applications where a transaction has to happen. PayPal payments standard provides payment buttons as a quick and easy solution for accepting payments. It is widely accepted that PayPal is a secure option to accept credit card, debit card, and PayPal payments in your application.

This tutorial is intended to explain, how to integrate PayPal REST API with React.js. Includes two codebases, First one ‘PayPalExpressCheckOut.js’ is the main React component which includes the configuration part. This component can be kept in a common place and can be used anywhere we need to display the PayPal payment button. The second codebase shows an example of how to display the PayPal payment button in your web app.

Get your client ID:

Before you set up and execute payments using the REST API, you need a client ID. The client ID authenticates your account with PayPal.

Setting up Client:

Goto PayPal developer account and create your app to get client_id https://developer.paypal.com

  1. In the client option below, pass the client IDs for sandbox and production (live).
  2. While development set env as sandbox and when goes live set it as production.
  3. In the payment function, we call actions.payment.create() to set up the payment.
  4. In the onAuthorize function, we finalize the payment.
  5. Optionally show a confirmation page.

Codebase 1:  PayPalExpressCheckOut.js

Full Example:

Codebase 2:

Props / State:

  1. currency: String (Eg: USD) – Required
  2. total: Number (1.00 or 1 – depends on currency) – Required
  3. onError: A callback function (happens when Paypal’s main script cannot be loaded)
  4. onSuccess: A callback function (happens after payment has been finished successfully)
  5. onCancel: A callback function (happens when users press “cancel” or close Paypal’s popup)

Sample Returned Data;

  • onSuccess – the returned payment object will look like:

{paid: true, cancelled: false, payerID: “H8S4CU73PFRAG”, paymentID: “PAY-85JK825PA3216TLESPCDA”, paymentToken: “EC-8JN5188N284574L”, returnUrl: “https://www.sandbox.paypal.com/?paymentId=PAY-85JK825PA3216TLESPCDA&token=EC-8JN5188N284574L&PayerID=K44CU73PFTGH”}

  • onCancel – the returned data object will look like:

{paymentToken: “EC-42A825696K839141X”, cancelUrl: “https://www.sandbox.paypal.com?token=EC-42A825696K839141X“}

Hope you did get to know about How to Integrate Paypal REST API with React.js. We will discuss more about this topic through our upcoming blogs. 

Cubet Tech is a fast-growing, digital transformation solution company that helps you build your customer experience into real practice. With our niche and rich expertise in a wide range of technologies and services like React.js, Laravel, Meteor, Angularjs, Nodejs, Magento, WordPress etc.. For more information Contact us thoughts our Facebook, Twitter or our LinkedIn.
Thanks.

Learn More From Our Techies

Other Blogs:

 

Post By : Sreehari (2 Posts)

"Sreehari is a Team Lead at Cubet Techno Labs. He has 8+ years of experience in various web technologies like PHP, Javascript and different PHP frameworks like CodeIgniter, Kohana and Yii along with different databased such as MySQL, PostgreSQL and MongoDB. He is also having an indepth knowledge in various JavaScript libraries such as jQuery, AngularJs, ReactJs, BackboneJs, D3.js and FabricJs."

2 thoughts on “Integrating Paypal REST API with React.js

  1. I am getting an error when I try and set this up,

    ./src/PayPalExpressCheckOut.js
    Line 41: ‘paypal’ is not defined no-undef
    Line 60: ‘paypal’ is not defined react/jsx-no-undef

    I’m not entirely sure where paypal is suppose to be defined. Would it be coming from the scriptLoader, when it calls https://www.paypalobjects.com/api/checkout.js?

    Thank you for this awesome blog btw, I was going cross eyed in the paypal docs, this helped a lot. I’m just still a little lost on where paypal should be defined.

    • Hi Greg, Thanks for your valuable comment also apologize for the late reply.
      Please let us know whether you are still facing this problem?

Comments are closed.


You might also like...

INDIA OFFICE

info@cubettech.com
+91 484 4054324
Skype : cubettech
Leela Info Park,
Unit IX-C, 9th floor PhaseIV,
Kochi, Kerala, India

LONDON OFFICE

info@cubettech.com
+44 2071938618
Skype : cubettech
Kemp House
160 City Road
London- EC1V2NX, UK.
Top