Video-30-PayPal-Payment (basir#30)

Author: basir

README.md

@@ -253,9 +253,16 @@ JS AMAZONA
  1. create OrderScreen.js
  2. style elements
 30. PayPal Payment
- 1. add paypal checkout script
- 2. show paypal button
- 3. update order after payment
+ 1. get client id from paypal
+ 2. set it in .env file
+ 3. create route form /api/paypal/clientId
+ 4. create getPaypalClientID in api.js
+ 5. add paypal checkout script in OrderScreen.js
+ 6. show paypal button
+ 7. update order after payment
+ 8. create payOrder in api.js
+ 9. create route for /:id/pay in orderRouter.js
+ 10. rerender after pay order
 31. User Order History
  1. Create order history api
  2. Show orders in profile screen

backend/config.js

@@ -5,4 +5,5 @@ dotenv.config();
 export default {
  MONGODB_URL: process.env.MONGODB_URL,
  JWT_SECRET: process.env.JWT_SECRET,
+ PAYPAL_CLIENT_ID: process.env.PAYPAL_CLIENT_ID,
 };

backend/routers/orderRouter.js

@@ -34,5 +34,24 @@ orderRouter.post(
  res.status(201).send({ message: 'New Order Created', order: createdOrder });
  })
 );
-
+orderRouter.put(
+ '/:id/pay',
+ isAuth,
+ expressAsyncHandler(async (req, res) => {
+ const order = await Order.findById(req.params.id);
+ if (order) {
+ order.isPaid = true;
+ order.paidAt = Date.now();
+ order.payment.paymentResult = {
+ payerID: req.body.payerID,
+ paymentID: req.body.paymentID,
+ orderID: req.body.orderID,
+ };
+ const updatedOrder = await order.save();
+ res.send({ message: 'Order Paid', order: updatedOrder });
+ } else {
+ res.status(404).send({ message: 'Order Not Found.' });
+ }
+ })
+);
 export default orderRouter;

backend/server.js

@@ -24,6 +24,9 @@ app.use(cors());
 app.use(bodyParser.json());
 app.use('/api/users', userRouter);
 app.use('/api/orders', orderRouter);
+app.get('/api/paypal/clientId', (req, res) => {
+ res.send({ clientId: config.PAYPAL_CLIENT_ID });
+});
 app.get('/api/products', (req, res) => {
  res.send(data.products);
 });

frontend/src/api.js

@@ -128,3 +128,37 @@ export const getOrder = async (id) => {
  return { error: err.message };
  }
 };
+
+export const getPaypalClientId = async () => {
+ const response = await axios({
+ url: `${apiUrl}/api/paypal/clientId`,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ });
+ if (response.statusText !== 'OK') {
+ throw new Error(response.data.message);
+ }
+ return response.data.clientId;
+};
+
+export const payOrder = async (orderId, paymentResult) => {
+ try {
+ const { token } = getUserInfo();
+ const response = await axios({
+ url: `${apiUrl}/api/orders/${orderId}/pay`,
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`,
+ },
+ data: paymentResult,
+ });
+ if (response.statusText !== 'OK') {
+ throw new Error(response.data.message);
+ }
+ return response.data;
+ } catch (err) {
+ return { error: err.response ? err.response.data.message : err.message };
+ }
+};

frontend/src/srceens/OrderScreen.js

@@ -1,6 +1,74 @@
-import { parseRequestUrl } from '../utils';
-import { getOrder } from '../api';
+import {
+ parseRequestUrl,
+ showLoading,
+ hideLoading,
+ showMessage,
+ rerender,
+} from '../utils';
+import { getOrder, getPaypalClientId, payOrder } from '../api';
 
+const addPaypalSdk = async (totalPrice) => {
+ const clientId = await getPaypalClientId();
+ showLoading();
+ if (!window.paypal) {
+ const script = document.createElement('script');
+ script.type = 'text/javascript';
+ script.src = 'https://www.paypalobjects.com/api/checkout.js';
+ script.async = true;
+ script.onload = () => handlePayment(clientId, totalPrice);
+ document.body.appendChild(script);
+ } else {
+ handlePayment(clientId, totalPrice);
+ }
+};
+const handlePayment = (clientId, totalPrice) => {
+ window.paypal.Button.render(
+ {
+ env: 'sandbox',
+ client: {
+ sandbox: clientId,
+ production: '',
+ },
+ locale: 'en_US',
+ style: {
+ size: 'responsive',
+ color: 'gold',
+ shape: 'pill',
+ },
+
+ commit: true,
+ payment(data, actions) {
+ return actions.payment.create({
+ transactions: [
+ {
+ amount: {
+ total: totalPrice,
+ currency: 'USD',
+ },
+ },
+ ],
+ });
+ },
+ onAuthorize(data, actions) {
+ return actions.payment.execute().then(async () => {
+ showLoading();
+ await payOrder(parseRequestUrl().id, {
+ orderID: data.orderID,
+ payerID: data.payerID,
+ paymentID: data.paymentID,
+ });
+ hideLoading();
+ showMessage('Payment was successfull.', () => {
+ rerender(OrderScreen);
+ });
+ });
+ },
+ },
+ '#paypal-button'
+ ).then(() => {
+ hideLoading();
+ });
+};
 const OrderScreen = {
  after_render: async () => {},
  render: async () => {
@@ -19,6 +87,9 @@ const OrderScreen = {
  isPaid,
  paidAt,
  } = await getOrder(request.id);
+ if (!isPaid) {
+ addPaypalSdk(totalPrice);
+ }
  return `
  <div>
  <h1>Order ${_id}</h1>
@@ -83,7 +154,8 @@ const OrderScreen = {
  <li><div>Items</div><div>$${itemsPrice}</div></li>
  <li><div>Shipping</div><div>$${shippingPrice}</div></li>
  <li><div>Tax</div><div>$${taxPrice}</div></li>
- <li class="total"><div>Order Total</div><div>$${totalPrice}</div></li> 
+ <li class="total"><div>Order Total</div><div>$${totalPrice}</div></li> 
+ <li><div class="fw" id="paypal-button"></div></li>
  <li>
  
  </div>