Merge branch 'main' into dotenv-enhancements

Author: jshawl

advanced-integration/README.md

@@ -6,3 +6,4 @@
 2. Run `npm install`
 3. Run `npm start`
 4. Open http://localhost:8888
+5. Enter the credit card number provided from one of your [sandbox accounts](https://developer.paypal.com/dashboard/accounts) or [generate a new credit card](https://developer.paypal.com/dashboard/creditCardGenerator)

advanced-integration/public/app.js

@@ -1,17 +1,25 @@
 paypal
   .Buttons({
     // Sets up the transaction when a payment button is clicked
-    createOrder: function (data, actions) {
+    createOrder: function () {
       return fetch("/api/orders", {
         method: "post",
         // use the "body" param to optionally pass additional order information
-        // like product ids or amount
+        // 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);
     },
     // Finalize the transaction after payer approval
-    onApprove: function (data, actions) {
+    onApprove: function (data) {
       return fetch(`/api/orders/${data.orderID}/capture`, {
         method: "post",
       })
@@ -47,8 +55,16 @@ if (paypal.HostedFields.isEligible()) {
     createOrder: () => {
       return fetch("/api/orders", {
         method: "post",
-        // use the "body" param to optionally pass additional order information like
-        // product ids or amount.
+        // 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((res) => res.json())
         .then((orderData) => {

standard-integration/README.md

@@ -4,8 +4,10 @@ This folder contains example code for a standard PayPal integration using both t
 
 ## Instructions
 
-1. Replace `test` in `public/index.html` with your app's client-id
-2. Rename `.env.example` to `.env` and update `CLIENT_ID` and `APP_SECRET`.
-3. Run `npm install`
-4. Run `npm start`
-5. Open http://localhost:8888
+1. [Create an application](https://developer.paypal.com/dashboard/applications/sandbox/create)
+3. ARename `.env.example` to `.env` and update `CLIENT_ID` and `APP_SECRET`.
+2. Replace `test` in `public/index.html` with your app's client-id
+4. Run `npm install`
+5. Run `npm start`
+6. Open http://localhost:8888
+7. Click "PayPal" and log in with one of your [Sandbox test accounts](https://developer.paypal.com/dashboard/accounts).

standard-integration/public/index.html

@@ -12,19 +12,36 @@
       paypal
         .Buttons({
           // Sets up the transaction when a payment button is clicked
-          createOrder: function (data, actions) {
-            return fetch("/api/orders", {
+          createOrder: function () {
+            return fetch("/my-server/create-paypal-order", {
               method: "post",
+              headers: {
+                "Content-Type": "application/json",
+              },
               // use the "body" param to optionally pass additional order information
-              // like product ids or amount
+              // 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);
           },
           // Finalize the transaction after payer approval
-          onApprove: function (data, actions) {
-            return fetch(`/api/orders/${data.orderID}/capture`, {
+          onApprove: function (data) {
+            return fetch("/my-server/capture-paypal-order", {
               method: "post",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                orderID: data.orderID,
+              }),
             })
               .then((response) => response.json())
               .then((orderData) => {
@@ -34,8 +51,7 @@
                   orderData,
                   JSON.stringify(orderData, null, 2)
                 );
-                var transaction =
-                  orderData.purchase_units[0].payments.captures[0];
+                const transaction = orderData.purchase_units[0].payments.captures[0];
                 alert(
                   "Transaction " +
                     transaction.status +

standard-integration/server.js

@@ -6,7 +6,10 @@ const app = express();
 
 app.use(express.static("public"));
 
-app.post("/api/orders", async (req, res) => {
+// parse post params sent in body in json format
+app.use(express.json());
+
+app.post("/my-server/create-paypal-order", async (req, res) => {
   try {
     const order = await paypal.createOrder();
     res.json(order);
@@ -15,8 +18,8 @@ app.post("/api/orders", async (req, res) => {
   }
 });
 
-app.post("/api/orders/:orderID/capture", async (req, res) => {
-  const { orderID } = req.params;
+app.post("/my-server/capture-paypal-order", async (req, res) => {
+  const { orderID } = req.body;
   try {
     const captureData = await paypal.capturePayment(orderID);
     res.json(captureData);