Added ejs support and refactoring logic to server

.devcontainer/devcontainer.json

@@ -16,6 +16,7 @@
       "onAutoForward": "openBrowser"
     }
   },
+
   "secrets": {
     "CLIENT_ID": {
       "description": "Sandbox client ID of the application.",

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -0,0 +1,51 @@
+name: Bug Report
+description: File a bug report
+title: "[Bug]: "
+labels: ["bug", "triage"]
+assignees:
+  - octocat
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+  - type: textarea
+    id: Describe-the-Issue
+    attributes:
+      label: Describe the Issue
+      description: A high-level summary or description of the problem that you're facing.
+      placeholder: Tell us what you see!
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Steps To Reproduce
+      description: A list of steps that can be followed to recreate the issue.
+      placeholder: |
+        1. Right-click on the browser and select Inspect.
+        2. Go to the console tab
+        3. See error message...
+    validations:
+      required: true
+  - type: input
+    id: operating-systems
+    attributes:
+      label: What type of Operating System are you seeing the problem on?
+      placeholder: "Linux/Windows/Mac"
+    validations:
+      required: false
+  - type: input
+    id: browsers
+    attributes:
+      label: What type of browser are you seeing the problem on?
+      placeholder: "Firefox/Chrome/Safari/Microsoft Edge"
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Screenshots or Videos
+      description: | 
+        If you are reporting a UI based issue, please include screenshots or a short video to help visually explain the problem.
+        Ensure that the screenshots/videos are full screen and do not contain any sensitive information such as API keys or Access Tokens. 
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: PayPal Developer Tools Support Issues
+    url: https://github.com/paypal-examples/paypaldevsupport/issues/new/choose
+    about: Please file all developer tools related issues here

.github/ISSUE_TEMPLATE/feature_request.yaml

@@ -0,0 +1,19 @@
+name: Feature request
+description: Suggest an feature / idea for this project
+title: "[Feature Request / Suggestion]: "
+labels: ["enhancement"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        We appreciate your feedback on how to improve this project. Please be sure to include as much details & any resources if possible!
+  - type: textarea
+    id: Suggestion
+    attributes:
+      label: Suggestion / Feature Request
+      description: Describe the feature(s) you would like to see added.
+      placeholder: Tell us your suggestion
+      value: "Your suggestion here"
+    validations:
+      required: true
+

README.md

@@ -26,5 +26,19 @@ and configuring your .env config file with your Paypal ClientId and ClientSecret
 3. Run `npm run dev`
 4. Navigate to `http://localhost:8080/`
 
-### PayPal Codespaces Links
+## PayPal Codespaces
+
+PayPal codespaces require a client ID and client secret for your app.
+
+### Link to codespaces 
+
 [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/paypal-examples/eps)
+
+### Learn more 
+
+You can read more about codespaces in the [PayPal Developer Docs](https://developer.paypal.com/api/rest/sandbox/codespaces).
+
+### Feedback 
+
+* To report a bug or suggest a new feature, create an [issue in GitHub](https://github.com/paypal-examples/paypaldevsupport/issues/new/choose). 
+* To submit feedback, go to [GitHub Codespaces](https://developer.paypal.com/api/rest/sandbox/codespaces) and select the "Feedback" tab

client/index.js → client/public/index.js

@@ -1,16 +1,5 @@
 /* eslint-disable consistent-return, new-cap, no-alert, no-console */
 
-var order = {
-  purchase_units: [
-    {
-      amount: {
-        currency_code: "EUR",
-        value: "49.11",
-      },
-    },
-  ],
-};
-
 /* Paypal */
 paypal
   .Marks({
@@ -26,12 +15,38 @@ paypal
       color: "silver",
     },
     createOrder(data, actions) {
-      return actions.order.create(order);
+      //return actions.order.create(order);
+      return fetch("/api/orders", {
+        method: "post",
+        // use the "body" param to optionally pass additional order information
+        // like product skus and quantities
+        body: JSON.stringify({
+          cart: [
+            {
+              sku: "<YOUR_PRODUCT_STOCK_KEEPING_UNIT>",
+              quantity: "<YOUR_PRODUCT_QUANTITY>",
+            },
+          ],
+        }),
+      })
+        .then((response) => response.json())
+        .then((order) => order.id);
     },
     onApprove(data, actions) {
-      return actions.order.capture().then((details) => {
-        alert(`Transaction completed by ${details.payer.name.given_name}!`);
-      });
+      fetch(`/api/orders/${data.orderID}/capture`, {
+        method: "post",
+      })
+        .then((res) => res.json())
+        .then((data) => {
+          swal(
+            "Order Captured!",
+            `Id: ${data.id}, ${Object.keys(data.payment_source)[0]}, ${
+              data.purchase_units[0].payments.captures[0].amount.currency_code
+            } ${data.purchase_units[0].payments.captures[0].amount.value}`,
+            "success"
+          );
+        })
+        .catch(console.error);
     },
   })
   .render("#paypal-btn");
@@ -62,10 +77,25 @@ paypal
       label: "pay",
     },
     createOrder(data, actions) {
-      return actions.order.create(order);
+      //return actions.order.create(order);
+      return fetch("/api/orders", {
+        method: "post",
+        // use the "body" param to optionally pass additional order information
+        // like product skus and quantities
+        body: JSON.stringify({
+          cart: [
+            {
+              sku: "<YOUR_PRODUCT_STOCK_KEEPING_UNIT>",
+              quantity: "<YOUR_PRODUCT_QUANTITY>",
+            },
+          ],
+        }),
+      })
+        .then((response) => response.json())
+        .then((order) => order.id);
     },
     onApprove(data, actions) {
-      fetch(`/capture/${data.orderID}`, {
+      fetch(`/api/orders/${data.orderID}/capture`, {
         method: "post",
       })
         .then((res) => res.json())

client/index.html → client/views/index.ejs

@@ -37,7 +37,7 @@
     <div id="paypal-btn"></div>
     <div id="eps-btn"></div>
 
-    <script src="https://www.paypal.com/sdk/js?client-id=AfPbdUbV4LJdK0-0B0QPeUyHnzGgVhIwZfBO3wYRoazaSYRJAIKwwHnfI0EbekJB42FJuVi-3-vgsQvi&components=buttons,payment-fields,marks,funding-eligibility&enable-funding=eps&currency=EUR"></script>
+    <script src="https://www.paypal.com/sdk/js?client-id=<%= clientId %>&components=buttons,payment-fields,marks,funding-eligibility&enable-funding=eps&currency=EUR"></script>
     <script src="./index.js"></script>
 
     <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js" defer></script>

package.json

@@ -13,7 +13,8 @@
   "dependencies": {
     "axios": "^0.21.1",
     "dotenv": "^8.2.0",
-    "express": "^4.17.1"
+    "express": "^4.17.1",
+    "ejs": "^3.1.9"
   },
   "devDependencies": {
     "ngrok": "^3.4.0"

server/index.js

@@ -11,18 +11,61 @@ const { PAYPAL_API_BASE } = require("./config");
 const app = express();
 
 const port = process.env.PORT || 8080;
-
-app.use(express.static(resolve(__dirname, "../client")));
+app.set("view engine", "ejs");
+app.set('views', resolve(__dirname, "../client/views"));
+app.use(express.static(resolve(__dirname, "../client/public")));
 app.use(express.json());
 
 app.get("/", (req, res) => {
-  res.sendFile(resolve(__dirname, "../client/index.html"));
+  const clientId = process.env.CLIENT_ID;
+  const clientSecret = process.env.CLIENT_SECRET;
+  if(!clientId || !clientSecret) {
+    res.status(500).send('Client ID and/or Client Secret is missing');
+  } else {
+    res.render("index", { clientId });
+  }
+});
+
+/**
+ * Create Order handler.
+ */
+app.post("/api/orders", async (req, res) => {
+    // use the cart information passed from the front-end to calculate the purchase unit details
+    const { cart } = req.body;
+
+    const { access_token } = await getAccessToken();
+    const { data } = await axios({
+      url: `${PAYPAL_API_BASE}/v2/checkout/orders`,
+      method: "post",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${access_token}`,
+      },
+      data: JSON.stringify({
+        intent: "CAPTURE",
+        purchase_units: [
+          {
+            amount: {
+              currency_code: "EUR",
+              value: "49.11",
+            },
+          },
+        ]
+      })
+    });
+
+    console.log(`Order Created!`);
+    res.json(data);
+
+
 });
 
+
 /**
  * Capture Order handler.
  */
- app.post("/capture/:orderId", async (req, res) => {
+ app.post("/api/orders/:orderId/capture", async (req, res) => {
   const { orderId } = req.params
 
   try {