Woocommerce Paypal REST api integration with React JS

1
votes

I am using Woocommerce for backend and react js for the front end. Since woocommerce is supported with apis, I am trying to integrate PayPal for payment gateway. Default WordPress themes work with woocommerce are making the payment in the following flow.

  1. When Pay with PayPal button clicked order placed with payment status pending
  2. Redirects user to PayPal payment site with order id and cart amount
  3. When the user completes payment, the user gets redirected to the order placed page.
  4. The previously placed order status get updated to appropriate response from Paypal as Processing or Cancelled

My question is How can I achieve this process with REST API.

Is it best to use client-side integration or server-side integration? If using client-side integration, will there be any vulnerability? How can I confirm that the user paid the value of the cart?

1
phpwordpresswoocommercepaypal

1 Answers

2
votes

Both Woocommerce and PayPal are having their own resources.

Using their API documentation we can achieve the API implementation which can communicate both with for order/shop management as well as the paypal for payment management

API request will always be initiated from the client side so we can start implementing from the client side but the main thing is that the endpoint shouldn't actually point either or real , instead we should implement the API related works in the server side with our own . For example, for creating order in the actual is

curl -X POST https://<store_domain>/wp-json/wc/v3/orders \
-u consumer_key:consumer_secret \
-H "Content-Type: application/json" \
-d '{payload}'

We shouldn't use this directly instead we can do like,

https://api.<store_domain>.com/create_order/

with some header authentication and then the server,

api.<store_domain>.com

should call actual store,

https://<store_domain>/wp-json/wc/v3/orders

endpoint same way for PayPal request too so that the payload that has been used for the API resources in both and will not be visible to the end-user.

In a similar way the response from the paypal should be redirected to

 api.<store_domain>.com

after verifying whether the transaction was successful or not and then using the response we can handle it in react js by this way we can ensure the security! For more information regarding handling the response from the please refer the URL.