Multiparty annotated code

multiparty-standard-integration/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "java.compile.nullAnalysis.mode": "disabled"
+}

multiparty-standard-integration/client/html/.env.example

@@ -0,0 +1,4 @@
+# Create an application to obtain credentials at
+# https://developer.paypal.com/dashboard/applications/sandbox
+
+PAYPAL_CLIENT_ID=YOUR_CLIENT_ID_GOES_HERE

multiparty-standard-integration/client/html/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+*.local

multiparty-standard-integration/client/html/README.md

@@ -0,0 +1,74 @@
+# Standard Integration with PayPal : HTML/JS
+
+## Getting Started
+
+This guide will walk you through setting up and running the HTML/JS Standard Integration locally.
+
+### Before You Code
+
+1. **Setup a PayPal Account**
+
+   To get started, you'll need a developer, personal, or business account.
+
+   [Sign Up](https://www.paypal.com/signin/client?flow=provisionUser) or [Log In](https://www.paypal.com/signin?returnUri=https%253A%252F%252Fdeveloper.paypal.com%252Fdashboard&intent=developer)
+
+   You'll then need to visit the [Developer Dashboard](https://developer.paypal.com/dashboard/) to obtain credentials and to make sandbox accounts.
+
+2. **Create an Application**
+
+   Once you've setup a PayPal account, you'll need to obtain a **Client ID** and **Secret**. [Create a sandbox application](https://developer.paypal.com/dashboard/applications/sandbox/create).
+
+### Installation
+
+```bash
+npm install
+```
+
+### Configuration
+
+1. Environmental Variables (.env)
+
+    - Rename the .env.example file to .env
+    - Update the following keys with their actual values -
+
+      ```bash
+      PAYPAL_CLIENT_ID=<PAYPAL_CLIENT_ID>
+      ```
+
+2. Connecting the client and server (vite.config.js)
+
+    - Open vite.config.js in the root directory.
+    - Locate the proxy configuration object.
+    - Update the proxy key to match the server's address and port. For example:
+
+        ```js
+            export default defineConfig({
+
+                server: {
+                    proxy: {
+                        "/api": {
+                            target: "http://localhost:8080", // Replace with your server URL
+                            changeOrigin: true,
+                        },
+                    },
+                },
+            });
+        ```
+
+3. Starting the development server
+
+    - **Start the server**: Follow the instructions in the server's README to start it. Typically, this involves running npm run start or a similar command in the server directory.
+
+    - **Start the client**:
+
+        ```bash
+            npm run start
+        ```
+
+        This will start the development server, and you should be able to access the Standard Checkout Page in your browser at `http://localhost:3000` (or the port specfied in the terminal output).
+
+### Additional Notes
+
+- **Server Setup**: Make sure you have the server up and running before starting the client.
+- **Environment Variables**: Carefully configure the environment variables in the .env file to match your setup.
+- **Proxy Configuration**: The proxy setting in vite.config.js is crucial for routing API requests from the client to the server during development.

multiparty-standard-integration/client/html/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "paypal-standard-integration-frontend-html",
+    "version": "1.0.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "build": "vite build",
+        "preview": "vite preview",
+        "start": "vite",
+        "format": "npx prettier --write **/*.{js,md}",
+        "format:check": "npx prettier --check **/*.{js,md}"
+    },
+    "devDependencies": {
+        "dotenv": "^16.4.5",
+        "vite": "^5.4.2"
+    }
+}

multiparty-standard-integration/client/html/src/app.js

@@ -0,0 +1,106 @@
+window.paypal
+  .Buttons({
+    style: {
+      shape: "rect",
+      layout: "vertical",
+      color: "gold",
+      label: "paypal",
+    },
+    message: {
+      amount: 100,
+    },
+
+    async createOrder() {
+      try {
+        const response = await fetch("/api/orders", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          // use the "body" param to optionally pass additional order information
+          // like product ids and quantities
+          body: JSON.stringify({
+            cart: [
+              {
+                id: "YOUR_PRODUCT_ID",
+                quantity: "YOUR_PRODUCT_QUANTITY",
+              },
+            ],
+          }),
+        });
+
+        const orderData = await response.json();
+
+        if (orderData.id) {
+          return orderData.id;
+        }
+        const errorDetail = orderData?.details?.[0];
+        const errorMessage = errorDetail
+          ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
+          : JSON.stringify(orderData);
+
+        throw new Error(errorMessage);
+      } catch (error) {
+        console.error(error);
+        resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
+      }
+    },
+
+    async onApprove(data, actions) {
+      try {
+        const response = await fetch(`/api/orders/${data.orderID}/authorize`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const orderData = await response.json();
+        // Three cases to handle:
+        //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
+        //   (2) Other non-recoverable errors -> Show a failure message
+        //   (3) Successful transaction -> Show confirmation or thank you message
+
+        const errorDetail = orderData?.details?.[0];
+
+        if (errorDetail?.issue === "INSTRUMENT_DECLINED") {
+          // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
+          // recoverable state, per
+          // https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
+          return actions.restart();
+        } else if (errorDetail) {
+          // (2) Other non-recoverable errors -> Show a failure message
+          throw new Error(`${errorDetail.description} (${orderData.debug_id})`);
+        } else if (!orderData.purchase_units) {
+          throw new Error(JSON.stringify(orderData));
+        } else {
+          // (3) Successful transaction -> Show confirmation or thank you message
+          // Or go to another URL:  actions.redirect('thank_you.html');
+          const transaction =
+            orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
+            orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];
+          resultMessage(
+            `Transaction ${transaction.status}: ${transaction.id}<br>
+          <br>See console for all available details`
+          );
+          console.log(
+            "Capture result",
+            orderData,
+            JSON.stringify(orderData, null, 2)
+          );
+        }
+      } catch (error) {
+        console.error(error);
+        resultMessage(
+          `Sorry, your transaction could not be processed...<br><br>${error}`
+        );
+      }
+    },
+  })
+  .render("#paypal-button-container");
+
+// Example function to show a result to the user. Your site's UI library can be used instead.
+function resultMessage(message) {
+  const container = document.querySelector("#result-message");
+  container.innerHTML = message;
+}

multiparty-standard-integration/client/html/src/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PayPal JS SDK Standard Integration</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://www.paypalobjects.com/webstatic/en_US/developer/docs/css/cardfields.css"
+    />
+  </head>
+  <body>
+    <div id="paypal-button-container" class="paypal-button-container"></div>
+    <p id="result-message"></p>
+
+    <script src="https://www.paypal.com/sdk/js?client-id=%PAYPAL_CLIENT_ID%&buyer-country=US&currency=USD&components=buttons&enable-funding=venmo&intent=authorize"></script>
+    <script src="app.js"></script>
+  </body>
+</html>

multiparty-standard-integration/client/html/vite.config.js

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [],
+  envDir: "../",
+  envPrefix: "PAYPAL",
+  root: "src",
+  server: {
+    port: 3000,
+    proxy: {
+      "/api": {
+        target: "http://localhost:8080",
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+  },
+})

multiparty-standard-integration/client/react/.env.example

@@ -0,0 +1 @@
+PAYPAL_CLIENT_ID=PAYPAL_CLIENT_ID

multiparty-standard-integration/client/react/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+*.local

multiparty-standard-integration/client/react/README.md

@@ -0,0 +1,74 @@
+# Standard Integration with PayPal : React
+
+## Getting Started
+
+This guide will walk you through setting up and running the React Standard Integration locally.
+
+### Before You Code
+
+1. **Setup a PayPal Account**
+
+   To get started, you'll need a developer, personal, or business account.
+
+   [Sign Up](https://www.paypal.com/signin/client?flow=provisionUser) or [Log In](https://www.paypal.com/signin?returnUri=https%253A%252F%252Fdeveloper.paypal.com%252Fdashboard&intent=developer)
+
+   You'll then need to visit the [Developer Dashboard](https://developer.paypal.com/dashboard/) to obtain credentials and to make sandbox accounts.
+
+2. **Create an Application**
+
+   Once you've setup a PayPal account, you'll need to obtain a **Client ID** and **Secret**. [Create a sandbox application](https://developer.paypal.com/dashboard/applications/sandbox/create).
+
+### Installation
+
+```bash
+npm install
+```
+
+### Configuration
+
+1. Environmental Variables (.env)
+
+    - Rename the .env.example file to .env
+    - Update the following keys with their actual values -
+
+      ```bash
+      PAYPAL_CLIENT_ID=<PAYPAL_CLIENT_ID>
+      ```
+
+2. Connecting the client and server (vite.config.js)
+
+    - Open vite.config.js in the root directory.
+    - Locate the proxy configuration object.
+    - Update the proxy key to match the server's address and port. For example:
+
+        ```js
+            export default defineConfig({
+
+                server: {
+                    proxy: {
+                        "/api": {
+                            target: "http://localhost:8080", // Replace with your server URL
+                            changeOrigin: true,
+                        },
+                    },
+                },
+            });
+        ```
+
+3. Starting the development server
+
+    - **Start the server**: Follow the instructions in the server's README to start it. Typically, this involves running npm run start or a similar command in the server directory.
+
+    - **Start the client**:
+
+        ```bash
+            npm run start
+        ```
+
+        This will start the development server, and you should be able to access the Standard Checkout Page in your browser at `http://localhost:3000` (or the port specfied in the terminal output).
+
+### Additional Notes
+
+- **Server Setup**: Make sure you have the server up and running before starting the client.
+- **Environment Variables**: Carefully configure the environment variables in the .env file to match your setup.
+- **Proxy Configuration**: The proxy setting in vite.config.js is crucial for routing API requests from the client to the server during development.

multiparty-standard-integration/client/react/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "paypal-standard-integration-frontend-react",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@paypal/react-paypal-js": "^8.6.0",
+    "dotenv": "^16.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "client-dev": "vite",
+    "client-build": "vite build",
+    "client-preview": "vite preview",
+    "start": "npm run client-dev",
+    "format": "npx prettier --write **/*.{js,jsx,md}",
+    "format:check": "npx prettier --check **/*.{js,jsx,md}"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.4.2"
+  }
+}