Code A Web App With React And Paypal

Intergrate Paypal into a React application

What you'll learn

Understanding how the Paypal API works

Understanding how to configure a React app from scratch

Creating API endpoints with Nodejs

Combine a React app with a Nodejs backend

Requirements

Basic knowledge of Javascript

Basic knowledge of HTML

Basic knowledge of Nodejs

Description

This tutorial covers how to integrate Paypal functionality into a React application; the backend is made with Nodejs and Express.Learning React is simple when coding an application from scratch; the idea is explaining the configuration of React by using Webpack and once the configuration is completed then coding the web app step by step.I've divided the tutorial into very brief videos so that you don't have to struggle understanding the topic; each video lasts around five minutes and only a few last more than ten minutes.When processing payments with Paypal a Paypal order must be created; a Paypal order is a JSON object with many properties which describe how much will be charged to the buyer as well as all the details related to the transaction like the shipping information, the taxes and more. At first glance the Paypal order may seem intimidating because of the large number of properties but after coding this web application you will feel very familiar with Paypal and will be prepared to integrate it into any web app.This web application contains several form fields; the content of the form fields are the values for the Paypal order. Once the form fields are filled in then the Paypal order is submitted to the Paypal API and the user is redirected to Paypal to complete the payment.I think this tutorial is a good choice because as you learn React you also learn how to process payments with Paypal.Finally the backend is coded with Nodejs and some API endpoints are created so that the React app can communicate with Paypal.

Overview

Section 1: Introduction

Lecture 1 Welcome to the tutorial

Lecture 2 Webpack installation

Lecture 3 Basic configuration for Webpack

Lecture 4 Enable CSS support by using Webpack

Lecture 5 Enable support for image files by using Webpack

Lecture 6 Enable support for font files by using Webpack

Lecture 7 Install a Webpack plugin to generate HTML files

Lecture 8 Configure HtmlWebpackPlugin

Lecture 9 Create the template to generate HTML files automatically with Webpack

Lecture 10 Configure React by using Webpack

Lecture 11 Installing some dependencies necessary for React to work

Lecture 12 Installing another dependencies necessary for React to work

Lecture 13 Code a simple React application

Lecture 14 Watch mode in Webpack

Lecture 15 Installing Express

Lecture 16 Coding a web server with Nodejs

Lecture 17 Fixing a tiny bug in the code

Lecture 18 Running the web server and testing the React app

Lecture 19 Creating the first React component

Lecture 20 Fixing ReactDOM import

Section 2: Creating the form to input product details

Lecture 21 Splitting the webpage layout into three sections

Lecture 22 Add font files to the project

Lecture 23 Understanding a PayPal order

Lecture 24 Apply a linear gradient as the background for the webpage

Lecture 25 Apply some styling to the text content of the webpage

Lecture 26 Add a CSS framework to the project

Lecture 27 Making a responsive grid with CSS

Lecture 28 Storing the items object into an state variable

Lecture 29 Adding a text field for the name of the product

Lecture 30 Adding a text field for the description of the product

Lecture 31 Adding a text field for the product SKU

Lecture 32 Adding a text field for the price of the product

Lecture 33 Adding a text field for the tax of the product

Lecture 34 Adding a text field for the quantity of the product

Lecture 35 Adding a dropdown menu for the category of the product

Lecture 36 Updating the responsive grid

Lecture 37 Adding the handleChange event handler to the form fields

Lecture 38 Create the logic for the handleChange event handler

Lecture 39 Styling the labels of the form fields

Lecture 40 Adding a button and styling it

Lecture 41 Create a Paypal order

Lecture 42 Saving the Paypal order into the web browser

Lecture 43 Redirecting the user to the next webpage

Lecture 44 Testing the Order Items page

Section 3: Create the form to input the shipping address

Lecture 45 Setting up a new webpage for the project using Webpack

Lecture 46 Add some React code to the new webpage

Lecture 47 Adding a new route to the web server

Lecture 48 Create a new React component from scratch

Lecture 49 Create the basic layout of the webpage

Lecture 50 Styling the Shipping Address page

Lecture 51 Save the shipping address into an state variable

Lecture 52 Create a responsive grid to center the content

Lecture 53 Add a text field to input the fullname of the buyer

Lecture 54 Dropdown menu to select the country code

Lecture 55 Text fields for the state and city

Lecture 56 Text field for the postal code

Lecture 57 Text field for the street and the number

Lecture 58 Text field for the apartment or unit number

Lecture 59 Creating the logic for the onChange event

Lecture 60 Adding a button and styling it with CSS

Lecture 61 Adding the logic for the button

Lecture 62 Redirecting the user to the Amount Breakdown page

Lecture 63 Testing the web application

Section 4: Creating a web page to calculate the final amount

Lecture 64 Configure a new page for the project with Webpack

Lecture 65 Creating the basic React code for the new page

Lecture 66 Adding a new route for the new page

Lecture 67 Testing the Webpack configuration so far

Lecture 68 Creating a new React component for the Amount Breakdown page

Lecture 69 Creating the basic sections of the new page

Lecture 70 Apply some CSS styling to the new page

Lecture 71 Create a new state variable for the amount details

Lecture 72 Create a table with the CSS framework

Lecture 73 Create a responsive grid to center the content

Lecture 74 Add a text field to enter the shipping cost

Lecture 75 Add a text field to enter the handling cost

Lecture 76 Add a text field to enter the tax total

Lecture 77 Add a text field for the shipping discount

Lecture 78 Add a text field for the discount

Lecture 79 Display the final amount

Lecture 80 Styling the Amount Breakdown table

Lecture 81 Configure the handleChange event handler

Lecture 82 Explanation of the logic inside the handleChange event handler

Lecture 83 Complete the logic inside the handleChange event handler

Lecture 84 Explanation on how to calculate the item total

Lecture 85 Create the code to calculate the item total

Lecture 86 Create the code to calculate the tax total

Lecture 87 Create the code to calculate the final amount

Lecture 88 Testing the web app

Section 5: Configure Paypal to work with the React app

Lecture 89 Creating a test buyer account

Lecture 90 Creating a test seller account

Lecture 91 Creating a Paypal App

Lecture 92 Install fetch

Lecture 93 Get the access token from Paypal

Lecture 94 Function which creates a Paypal order

Lecture 95 PayPal request id

Lecture 96 Function which captures a Paypal order

Lecture 97 Create order endpoint

Lecture 98 Capture order endpoint

Lecture 99 Adding the Pay Now button

Lecture 100 Creating the logic for the Pay Now button

Lecture 101 Completing the logic for the Pay Now button

Lecture 102 Testing the response from PayPal

Lecture 103 Redirecting the user to Paypal

Lecture 104 Testing the web application

Lecture 105 Adding a new web page for the project with Webpack

Lecture 106 Create the initial React code for the new page

Lecture 107 Create a new route for the new page

Lecture 108 Checking whether the new page works

Lecture 109 Creating a new React component

Lecture 110 Getting the access token

Lecture 111 Capture order HTTP request

Lecture 112 Confirmation message when the transaction is completed

Lecture 113 Apply some CSS styling to the previous web page

Lecture 114 Testing a Paypal transaction

Lecture 115 Add the cancel page with Webpack

Lecture 116 Initial React code for the cancel page

Lecture 117 Add a new route for the cancel page

Lecture 118 Check the new page configuration

Lecture 119 Creating an new React component

Lecture 120 Adding an image file to the project

Lecture 121 Cancel page content

Lecture 122 Checking the cancel page

Lecture 123 Cancelling a payment

Web developers who want to learn Nodejs,Web developers who want to learn React,Web developers who want to integrate Paypal into their apps