22. Back to the Client | 16. Paying for an Order

Author: webmakaka

22_Back_to_the_Client.md

@@ -83,6 +83,18 @@ If chome will block page for security reasons, type: **thisisunsafe**
 
 <br/>
 
+### 14. Configuring Stripe
+
+<br/>
+
+### 15. Test Credit Card Numbers
+
+<br/>
+
+### 16. Paying for an Order
+
+<br/>
+
 ---
 
 <br/>

22_Back_to_the_Client/app/client/hooks/use-request.js

@@ -5,10 +5,13 @@ import { useState } from 'react';
 export default ({ url, method, body, onSuccess }) => {
   const [errors, setErrros] = useState(null);
 
-  const doRequest = async () => {
+  const doRequest = async (props = {}) => {
     try {
       setErrros(null);
-      const response = await axios[method](url, body);
+      const response = await axios[method](url, {
+        ...body,
+        ...props,
+      });
 
       if (onSuccess) {
         onSuccess(response.data);

22_Back_to_the_Client/app/client/pages/orders/[orderId].js

@@ -1,8 +1,19 @@
 import { useEffect, useState } from 'react';
+import StripeCheckout from 'react-stripe-checkout';
+import useRequest from '../../hooks/use-request';
 
-const OrderShow = ({ order }) => {
+const OrderShow = ({ order, currentUser }) => {
   const [timeLeft, setTimeLeft] = useState(0);
 
+  const { doRequest, errors } = useRequest({
+    url: '/api/payments',
+    method: 'post',
+    body: {
+      orderId: order.id,
+    },
+    onSuccess: (payment) => console.log(payment),
+  });
+
   useEffect(() => {
     const findTimeLeft = () => {
       const msLeft = new Date(order.expiresAt) - new Date();
@@ -20,7 +31,18 @@ const OrderShow = ({ order }) => {
     return <div>Order Expired</div>;
   }
 
-  return <div>TIme left to pay: {timeLeft} seconds</div>;
+  return (
+    <div>
+      Time left to pay: {timeLeft} seconds <br />
+      <StripeCheckout
+        token={({ id }) => doRequest({ token: id })}
+        stripeKey="pk_test_LQWgtToPhlyDhBDmdn9ULxmn00WVghorjW"
+        amount={order.ticket.price * 100}
+        email={currentUser.email}
+      />
+      {errors}
+    </div>
+  );
 };
 
 OrderShow.getInitialProps = async (context, client) => {

22_Back_to_the_Client/app/client/pages/tickets/[ticketId].js

@@ -17,7 +17,7 @@ const TicketShow = ({ ticket }) => {
       <h1>{ticket.title}</h1>
       <h4>Price: {ticket.price}</h4>
       {errors}
-      <button className="btn btn-primary" onClick={doRequest}>
+      <button className="btn btn-primary" onClick={() => doRequest()}>
         Purchase
       </button>
     </div>