PayPal Express Checkout with React JS and PHP RESTful

PayPal Express Checkout with React JS and PHP RESTful

There are several payment options available in the market today. PayPal checkout option is one among them. In my previous articles, I have already discussed few payment options - Braintree PayPal using PHP, Payment system and PayPal Express Checkout with PHP and MySQL. These are the most viewed and trending articles till this day. Today, let’s see how the PayPal Express Checkout works with React JS.

Database Design

To build the PayPal checkout ordering system, you have to create the following tables. Social login user table has been present in the previous article.

Products

Product table contains all the product details. You can extend this table based on your needs.

Orders

Order table contains all the user order details with PayPal payment ids.
Live demo sandbox PayPal credentials for testing username: demos@9lessons.info password: 9lessons
Live Demo

Orders

Order table contains all the user order details with PayPal payment ids.

CREATE TABLE 

orders(
oid int AUTO_INCREMENT PRIMARY KEY,
pid_fk int,
uid_fk int,
payerID varchar(500),
paymentID varchar(500),
token varchar(500),
created int(11)
);


Home.js

Let continue the provious article. Here the user session storage data is present, storing the data with setState. Using user id and token you can access other informaiton like products and order details.
import React, {Component} from 'react';
import './Home.css';
import {Redirect} from 'react-router-dom';
class Home extends Component {

constructor(props){
    super(props);
    this.state = {
       name:'',
       redirect: false,
   };
}

componentDidMount() {
     let data = JSON.parse(sessionStorage.getItem('userData'));
     console.log(data);
     this.setState({name: data.userData.name})
}

render() {

if(!sessionStorage.getItem('userData') || this.state.redirect){
    return (<Redirect to={'/'}/>)
}

return (
<div >
Welcome {this.state.name}
</div>
);
}
}
export default Home;

Lets start
You have to create common components for multiple uses. In this project, we are commonly using project title and log out.

Title.js
This component contains project Title and log out functionality. Using the props you can disturbute the data. You can import this component in multiple pages.
import React, { Component } from "react";
import { Redirect } from "react-router-dom";
import "./Title.css";

class Title extends Component {
constructor(props) {
   super(props);
   this.logout = this.logout.bind(this);
   this.state = {
     redirect: false
   };
}

logout() {
   sessionStorage.setItem("userData", "");
   sessionStorage.clear();
   this.setState({ redirect: true });
}

render() {
if (this.state.redirect) {
   return <Redirect to={"/"} />;
}
return (
   <div className="row">
   <div className="medium-12 columns">
   <ul className="right">
   <li>
      <a href="/orders">Orders</a>
   </li>
   <li>
   <a href="#" onClick={this.logout}>
      Logout
   </a>
   </li>
   </ul>
   <h2>Welcome {this.props.name}</h2>
   </div>
   </div>
);
}
}

export default Title;


ProductsList.js
Component for displaying all of the product details. Here the product data is calling from React props constuctor. onClick button this.props.checkOut points to parent function, you will find this in next step.
import React, { Component } from "react";
import "./ProductsList.css";
class ProductsList extends Component {
constructor(props) {
   super(props);
}

render() {
let productList = this.props.productsData.map(function(productData, index) {
return (
   <div className="row list" key={index}>
   <div className="medium-3 columns">
   <img
src={
"https://demos.9lessons.info/PHP-PayPal-ExpressCheckout/img/" +
productData.product_img
}
/>
</div>
   <div className="medium-3 columns">{productData.product}</div>
   <div className="medium-3 columns">$ {productData.price}</div>
   <div className="medium-3 columns">
<button className="button" value={productData.pid}
onClick={this.props.checkout}>
   Order
</button>
</div>
</div>
);
}, this);

return <div>{productList}</div>;
}
}

export default ProductsList;

Importing Components and Data Binding with RESTful APIs

Home.js
Imported Title and ProductList components with PostData URL fetch provider. Fun

Comments

Post a Comment

Popular posts from this blog

18 Year-Old Becomes Richest Boy In India Making Money Online

Image
18 Year-Old Becomes Richest Boy In India Making Money Online Sai Reddy is presently formally one of the most extravagant 19-year olds in the Pune and the whole India, so far as that is concerned. The Pune local was playing on his cell phone a week ago when he found a well known new application called Olymp Trade. He had as of late downloaded it yet hadn't played it yet.So, Sai opened the application and began playing with the demo account you get while enlisting for nothing. In only 15 minutes he multiplied his cash, making more than his folks acquire buckling down the whole month.One week later, Olymp Trade parallel choices saved 1200$ of Sai's income straight into his mom's bank account.Sai is the main child of Vihaan and Pari Reddy, a run of the mill white collar class couple, both of whom are initially from Chennai. Sai's mother encouraged him how to utilize a PC at the youthful age of 6 and as far back as at that point, he had been snared. At the point whe...
Read more

18 ANSWERS OF PROPHET (pbuh)

18 ANSWERS OF THE HOLY PROPHET (PBUH)  _____________________________ A traveler once came to the masjid to see the Prophet Muhammad (S.A.W) after greeting the Prophet (S.A.W), he was asked where he was from. The traveler replied that he came from very far just to get a few questions answered. Following is the dialogue between the traveler and the Prophet (S.A.W). Traveler : I do not want punishments to be written in my account. Prophet : Behave well with your parents Traveler : I want to be known amongst people as an intelligent person. Prophet : Fear Allah (Jalla Jalalu),always. Traveler : I want to be counted amongst Allah's favourites. Prophet : Recite Quran every morning and evening. Traveler : I want my heart to always be enlightened. Prophet : Never forget death. Traveler : I never want to be away from Allah's blessing. Prophet : Always treat fellow creatures well. Traveler : I never want to be harmed by my enemies. Prophet : Always have faith in Allah...
Read more

3 Kinds of Facebook Posts that Get Crazy Likes and Comments

3 Kinds of Facebook Posts that Get Crazy Likes and Comments Creating content isn't easy. Coming up with great ideas and knowing exactly what to post -- not easy. In fact, it's such a struggle for some businesses that they give up trying. I wrote this blog post for those businesses. If this includes you, then I'm hoping this post will make it easier for you to create effective Facebook posts. Yep... the kind that get crazy Likes and Comments. :) NOTE: if you don't have time to read this article, I'd recommend just installing Post Planner and using their viral photos. It will probably triple your engagement overnight! 3 Kinds of Facebook Posts that Get Crazy Likes and Comments Posting great content on Facebook starts with knowing what kinds of posts are possible. I've broken them down into six types: Images Text Videos Other People’s Content Website/Blog posts Podcasts Here's a mind-mapping infographic showi...
Read more