From 72865668b5e522e8c3c752b2eacc7de161daa971 Mon Sep 17 00:00:00 2001
From: Greg Jopa <534034+gregjopa@users.noreply.github.com>
Date: Wed, 25 Oct 2023 10:54:58 -0500
Subject: [PATCH] Add ejs to better match the v2 advanced integration docs

---
 advanced-integration/v2/README.md                |  6 +++---
 advanced-integration/v2/package.json             |  1 +
 advanced-integration/v2/server/server.js         | 16 ++++++++++++----
 .../checkout.html => server/views/checkout.ejs}  |  3 +--
 4 files changed, 17 insertions(+), 9 deletions(-)
 rename advanced-integration/v2/{client/checkout.html => server/views/checkout.ejs} (89%)

diff --git a/advanced-integration/v2/README.md b/advanced-integration/v2/README.md
index fc665be3..2cf823b0 100644
--- a/advanced-integration/v2/README.md
+++ b/advanced-integration/v2/README.md
@@ -18,6 +18,6 @@ Version 2 is the current advanced Checkout integration, and includes hosted card
 
 The documentation for advanced Checkout integration using JavaScript SDK includes additional sample code in the following sections:
 
-* **3. Adding PayPal buttons and card fields** includes [a full-stack Node.js example](v2/examples/full-stack/).
-* **4. Call Orders API for PayPal buttons and card fields** includes [a server-side example](v2/examples/call-orders-api-server-side/)
-* **5. Capture order** includes [a server-side example](v2/examples/capture-order-server-side/)
+- **3. Adding PayPal buttons and card fields** includes [a full-stack Node.js example](v2/examples/full-stack/).
+- **4. Call Orders API for PayPal buttons and card fields** includes [a server-side example](v2/examples/call-orders-api-server-side/)
+- **5. Capture order** includes [a server-side example](v2/examples/capture-order-server-side/)
diff --git a/advanced-integration/v2/package.json b/advanced-integration/v2/package.json
index c87347ac..ff3f5b41 100644
--- a/advanced-integration/v2/package.json
+++ b/advanced-integration/v2/package.json
@@ -14,6 +14,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "dotenv": "^16.3.1",
+    "ejs": "^3.1.9",
     "express": "^4.18.2",
     "node-fetch": "^3.3.2"
   },
diff --git a/advanced-integration/v2/server/server.js b/advanced-integration/v2/server/server.js
index 0d8d3cb8..f1188758 100644
--- a/advanced-integration/v2/server/server.js
+++ b/advanced-integration/v2/server/server.js
@@ -1,12 +1,14 @@
 import express from "express";
 import fetch from "node-fetch";
 import "dotenv/config";
-import path from "path";
 
 const { PAYPAL_CLIENT_ID, PAYPAL_CLIENT_SECRET, PORT = 8888 } = process.env;
 const base = "https://api-m.sandbox.paypal.com";
 const app = express();
 
+app.set("view engine", "ejs");
+app.set("views", "./server/views");
+
 // host static files
 app.use(express.static("client"));
 
@@ -142,9 +144,15 @@ app.post("/api/orders/:orderID/capture", async (req, res) => {
   }
 });
 
-// serve index.html
-app.get("/", (req, res) => {
-  res.sendFile(path.resolve("./client/checkout.html"));
+// render checkout page with client id & unique client token
+app.get("/", async (req, res) => {
+  try {
+    res.render("checkout", {
+      clientId: PAYPAL_CLIENT_ID,
+    });
+  } catch (err) {
+    res.status(500).send(err.message);
+  }
 });
 
 app.listen(PORT, () => {
diff --git a/advanced-integration/v2/client/checkout.html b/advanced-integration/v2/server/views/checkout.ejs
similarity index 89%
rename from advanced-integration/v2/client/checkout.html
rename to advanced-integration/v2/server/views/checkout.ejs
index cbc61169..2b685ad6 100644
--- a/advanced-integration/v2/client/checkout.html
+++ b/advanced-integration/v2/server/views/checkout.ejs
@@ -17,8 +17,7 @@
       <button id="multi-card-field-button" type="button">Pay now with Card</button>
     </div>
     <p id="result-message"></p>
-    <!-- Replace the "test" client-id value with your client-id -->
-    <script src="https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=test"></script>
+    <script src="https://www.paypal.com/sdk/js?components=buttons,card-fields&client-id=<%= clientId %>"></script>
     <script src="checkout.js"></script>
   </body>
 </html>