Add ejs to better match the v2 advanced integration docs (#93)

Author: gregjopa

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/)

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"
   },

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, () => {

advanced-integration/v2/client/checkout.html renamed to 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>