Code a web app with React and Paypal

Focused View

Amazing Tutorials

9:32:24

44 View

1. Introduction

1.1 mypaypalappcopy.tar.zip

1. Welcome to the tutorial.html

2. Webpack installation.mp4

03:20

3. Basic configuration for Webpack.mp4

08:51

4. Enable CSS support by using Webpack.mp4

03:43

5. Enable support for image files by using Webpack.mp4

02:39

6. Enable support for font files by using Webpack.mp4

02:51

7. Install a Webpack plugin to generate HTML files.mp4

01:18

8. Configure HtmlWebpackPlugin.mp4

05:19

9. Create the template to generate HTML files automatically with Webpack.mp4

04:23

10. Configure React by using Webpack.mp4

05:05

11. Installing some dependencies necessary for React to work.mp4

02:38

12. Installing another dependencies necessary for React to work.mp4

01:35

13. Code a simple React application.mp4

04:41

14. Watch mode in Webpack.mp4

03:46

15. Installing Express.mp4

01:28

16. Coding a web server with Nodejs.mp4

07:39

17. Fixing a tiny bug in the code.mp4

02:05

18. Running the web server and testing the React app.mp4

02:56

19. Creating the first React component.mp4

06:29

20. Fixing ReactDOM import.mp4

01:20

2. Creating the form to input product details

1. Splitting the webpage layout into three sections.mp4

06:25

2. Add font files to the project.mp4

04:37

3. Understanding a PayPal order.mp4

06:40

4. Apply a linear gradient as the background for the webpage.mp4

03:50

5. Apply some styling to the text content of the webpage.mp4

03:57

6. Add a CSS framework to the project.mp4

03:31

7. Making a responsive grid with CSS.mp4

06:44

8. Storing the items object into an state variable.mp4

05:41

9. Adding a text field for the name of the product.mp4

06:12

10. Adding a text field for the description of the product.mp4

02:38

11. Adding a text field for the product SKU.mp4

02:16

12. Adding a text field for the price of the product.mp4

02:37

13. Adding a text field for the tax of the product.mp4

01:49

14. Adding a text field for the quantity of the product.mp4

03:34

15. Adding a dropdown menu for the category of the product.mp4

04:22

16. Updating the responsive grid.mp4

01:52

17. Adding the handleChange event handler to the form fields.mp4

06:06

18. Create the logic for the handleChange event handler.mp4

07:39

19. Styling the labels of the form fields.mp4

04:50

20. Adding a button and styling it.mp4

06:27

21. Create a Paypal order.mp4

11:02

22. Saving the Paypal order into the web browser.mp4

04:41

23. Redirecting the user to the next webpage.mp4

01:38

24. Testing the Order Items page.mp4

01:47

3. Create the form to input the shipping address

1. Setting up a new webpage for the project using Webpack.mp4

03:22

2. Add some React code to the new webpage.mp4

06:03

3. Adding a new route to the web server.mp4

05:15

4. Create a new React component from scratch.mp4

05:28

5. Create the basic layout of the webpage.mp4

02:12

6. Styling the Shipping Address page.mp4

06:16

7. Save the shipping address into an state variable.mp4

05:30

8. Create a responsive grid to center the content.mp4

02:36

9. Add a text field to input the fullname of the buyer.mp4

05:55

10. Dropdown menu to select the country code.mp4

04:56

11. Text fields for the state and city.mp4

04:16

12. Text field for the postal code.mp4

02:29

13. Text field for the street and the number.mp4

02:29

14. Text field for the apartment or unit number.mp4

02:40

15. Creating the logic for the onChange event.mp4

09:21

16. Adding a button and styling it with CSS.mp4

04:17

17. Adding the logic for the button.mp4

08:55

18. Redirecting the user to the Amount Breakdown page.mp4

01:32

19. Testing the web application.mp4

03:30

4. Creating a web page to calculate the final amount

1. Configure a new page for the project with Webpack.mp4

03:14

2. Creating the basic React code for the new page.mp4

03:18

3. Adding a new route for the new page.mp4

02:02

4. Testing the Webpack configuration so far.mp4

03:15

5. Creating a new React component for the Amount Breakdown page.mp4

04:57

6. Creating the basic sections of the new page.mp4

02:31

7. Apply some CSS styling to the new page.mp4

05:02

8. Create a new state variable for the amount details.mp4

04:51

9. Create a table with the CSS framework.mp4

04:49

10. Create a responsive grid to center the content.mp4

03:46

11. Add a text field to enter the shipping cost.mp4

11:04

12. Add a text field to enter the handling cost.mp4

03:18

13. Add a text field to enter the tax total.mp4

03:18

14. Add a text field for the shipping discount.mp4

03:29

15. Add a text field for the discount.mp4

02:55

16. Display the final amount.mp4

03:23

17. Styling the Amount Breakdown table.mp4

04:49

18. Configure the handleChange event handler.mp4

03:02

19. Explanation of the logic inside the handleChange event handler.mp4

04:23

20. Complete the logic inside the handleChange event handler.mp4

03:12

21. Explanation on how to calculate the item total.mp4

04:11

22. Create the code to calculate the item total.mp4

12:13

23. Create the code to calculate the tax total.mp4

08:27

24. Create the code to calculate the final amount.mp4

15:22

25. Testing the web app.mp4

07:50

5. Configure Paypal to work with the React app

1. Creating a test buyer account.mp4

08:57

2. Creating a test seller account.mp4

05:19

3. Creating a Paypal App.mp4

04:01

4. Install fetch.mp4

02:35

5. Get the access token from Paypal.mp4

07:31

6. Function which creates a Paypal order.mp4

07:26

7. PayPal request id.mp4

07:07

8. Function which captures a Paypal order.mp4

06:00

9. Create order endpoint.mp4

04:18

10. Capture order endpoint.mp4

04:15

11. Adding the Pay Now button.mp4

03:45

12. Creating the logic for the Pay Now button.mp4

08:20

13. Completing the logic for the Pay Now button.mp4

09:19

14. Testing the response from PayPal.mp4

04:10

15. Redirecting the user to Paypal.mp4

05:00

16. Testing the web application.mp4

04:29

17. Adding a new web page for the project with Webpack.mp4

03:17

18. Create the initial React code for the new page.mp4

03:36

19. Create a new route for the new page.mp4

02:07

20. Checking whether the new page works.mp4

03:04

21. Creating a new React component.mp4

04:08

22. Getting the access token.mp4

10:10

23. Capture order HTTP request.mp4

06:31

24. Confirmation message when the transaction is completed.mp4

07:08

25. Apply some CSS styling to the previous web page.mp4

04:05

26. Testing a Paypal transaction.mp4

10:16

27. Add the cancel page with Webpack.mp4

02:48

28. Initial React code for the cancel page.mp4

04:07

29. Add a new route for the cancel page.mp4

01:49

30. Check the new page configuration.mp4

02:38

31. Creating an new React component.mp4

04:09

32. Adding an image file to the project.mp4

01:26

33. Cancel page content.mp4

03:57

34. Checking the cancel page.mp4

03:30

35. Cancelling a payment.mp4

02:22

Description

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

Who is this for?

Web developers who want to learn Nodejs

Web developers who want to learn React

Web developers who want to integrate Paypal into their apps

What You Need to Know?

Basic knowledge of Javascript

Basic knowledge of HTML

Basic knowledge of Nodejs

More details

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.

Who this course is for:
Web developers who want to learn Nodejs
Web developers who want to learn React
Web developers who want to integrate Paypal into their apps

User Reviews

Rating

average 0

Total votes0

Focused display

React

Amazing Tutorials

Instructor's Courses

I'm a web developer with experience in Nodejs. Nodejs is very exciting because it enables anyone to become a full-stack developer by learning a single language : Javascript.Since I started crafting and deploying apps written in Nodejs I realizaed how interesting it is that's why I'm here to share my knowledge.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.