feat: new folder structure

client/oneTimePayment/html/src/index.html → client/components/paypalPayments/oneTimePayment/html/src/index.html

@@ -11,8 +11,8 @@ <h1>One-Time Payment Integrations</h1>
     <ul>
       <li>
         <a href="/recommended/index.html"
-          >Recommended integration with PayPal, Venmo, PayLater, and PayPal
-          Credit buttons</a
+          >Recommended integration with PayPal, PayLater, and PayPal Credit
+          buttons</a
         >
       </li>
       <li>

client/oneTimePayment/html/src/recommended/app.js → client/components/paypalPayments/oneTimePayment/html/src/recommended/app.js

@@ -3,7 +3,7 @@ async function onPayPalLoaded() {
     const clientToken = await getBrowserSafeClientToken();
     const sdkInstance = await window.paypal.createInstance({
       clientToken,
-      components: ["paypal-payments", "venmo-payments"],
+      components: ["paypal-payments"],
       pageType: "checkout",
     });
 
@@ -15,10 +15,6 @@ async function onPayPalLoaded() {
       setupPayPalButton(sdkInstance);
     }
 
-    if (paymentMethods.isEligible("venmo")) {
-      setupVenmoButton(sdkInstance);
-    }
-
     if (paymentMethods.isEligible("paylater")) {
       const paylaterPaymentMethodDetails =
         paymentMethods.getDetails("paylater");
@@ -71,25 +67,6 @@ async function setupPayPalButton(sdkInstance) {
   });
 }
 
-async function setupVenmoButton(sdkInstance) {
-  const venmoPaymentSession = sdkInstance.createVenmoOneTimePaymentSession(
-    paymentSessionOptions,
-  );
-  const venmoButton = document.querySelector("#venmo-button");
-  venmoButton.removeAttribute("hidden");
-
-  venmoButton.addEventListener("click", async () => {
-    try {
-      await venmoPaymentSession.start(
-        { presentationMode: "auto" },
-        createOrder(),
-      );
-    } catch (error) {
-      console.error(error);
-    }
-  });
-}
-
 async function setupPayLaterButton(sdkInstance, paylaterPaymentMethodDetails) {
   const paylaterPaymentSession =
     sdkInstance.createPayLaterOneTimePaymentSession(paymentSessionOptions);

client/oneTimePayment/html/src/recommended/index.html → client/components/paypalPayments/oneTimePayment/html/src/recommended/index.html

@@ -17,7 +17,6 @@ <h1>One-Time Payment Recommended Integration</h1>
 
     <div class="buttons-container">
       <paypal-button id="paypal-button" type="pay" hidden></paypal-button>
-      <venmo-button id="venmo-button" type="pay" hidden></venmo-button>
       <paypal-pay-later-button
         id="paylater-button"
         hidden

client/components/venmoPayments/oneTimePayment/html/README.md

@@ -0,0 +1,21 @@
+# One-Time Payments HTML Sample Integration
+
+This HTML sample integration uses HTML, JavaScript, and CSS. It does not require a build process to transpile the source code. It's just static files that can be served up by any web server. [Vite](https://vite.dev/) is used for the local web server to provide the following functionality:
+
+1. Serve up the static HTML and JavaScript files.
+2. Proxy the API server so both the client and server are running on port 3000.
+
+## How to Run Locally
+
+```bash
+npm install
+npm start
+```
+
+### Sample Integrations
+
+| Sample Integration                                              | Description                                                                                                                                                                                                                                                                                                                                                                                               |
+| --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Recommended](src/recommended/index.html)                       | Start with this recommended sample integration. It displays all buttons supported by the v6 SDK and includes eligibility logic. It uses the "auto" presentation mode which attempts to launch a popup window and then automatically falls back to the modal presentation mode when the browser does not support popups.                                                                                   |
+| [Custom Payment Handler](src/custom/paymentHandler/index.html)  | This custom integration uses the experimental "payment-handler" presentation mode. It teaches how to control the fallback logic for presentation modes based on what the browser supports.                                                                                                                                                                                                                |
+| [Custom Sandboxed Iframe](src/custom/sandboxedIframe/README.md) | This custom integration demonstrates how a merchant can wrap the v6 SDK integration code into their own iframe and what values need to be passed to the [iframe sandbox attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox). It does require two web servers to demonstrate the use case. Refer to the README in the src/custom/sandboxedIframe directory to learn more. |

client/components/venmoPayments/oneTimePayment/html/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "v6-web-sdk-sample-integration-client-html",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "preview": "vite preview",
+    "start": "vite",
+    "format": "prettier . --write",
+    "format:check": "prettier . --check",
+    "lint": "echo \"eslint is not set up\""
+  },
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "prettier": "^3.5.3",
+    "vite": "^6.2.0"
+  }
+}

client/components/venmoPayments/oneTimePayment/html/src/app.js

@@ -0,0 +1,97 @@
+async function onPayPalLoaded() {
+  try {
+    const clientToken = await getBrowserSafeClientToken();
+    const sdkInstance = await window.paypal.createInstance({
+      clientToken,
+      components: ["venmo-payments"],
+      pageType: "checkout",
+    });
+
+    const paymentMethods = await sdkInstance.findEligibleMethods({
+      currencyCode: "USD",
+    });
+
+    if (paymentMethods.isEligible("venmo")) {
+      setupVenmoButton(sdkInstance);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+const paymentSessionOptions = {
+  async onApprove(data) {
+    console.log("onApprove", data);
+    const orderData = await captureOrder({
+      orderId: data.orderId,
+    });
+    console.log("Capture result", orderData);
+  },
+  onCancel(data) {
+    console.log("onCancel", data);
+  },
+  onError(error) {
+    console.log("onError", error);
+  },
+};
+
+async function setupVenmoButton(sdkInstance) {
+  const venmoPaymentSession = sdkInstance.createVenmoOneTimePaymentSession(
+    paymentSessionOptions,
+  );
+  const venmoButton = document.querySelector("#venmo-button");
+  venmoButton.removeAttribute("hidden");
+
+  venmoButton.addEventListener("click", async () => {
+    try {
+      await venmoPaymentSession.start(
+        { presentationMode: "auto" },
+        createOrder(),
+      );
+    } catch (error) {
+      console.error(error);
+    }
+  });
+}
+
+async function getBrowserSafeClientToken() {
+  const response = await fetch("/paypal-api/auth/browser-safe-client-token", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+  const { accessToken } = await response.json();
+
+  return accessToken;
+}
+
+async function createOrder() {
+  const response = await fetch(
+    "/paypal-api/checkout/orders/create-with-sample-data",
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+  const { id } = await response.json();
+
+  return { orderId: id };
+}
+
+async function captureOrder({ orderId }) {
+  const response = await fetch(
+    `/paypal-api/checkout/orders/${orderId}/capture`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+  const data = await response.json();
+
+  return data;
+}

client/components/venmoPayments/oneTimePayment/html/src/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>One-Time Payment - Recommended Integration - PayPal Web SDK</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      .buttons-container {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>One-Time Payment Recommended Integration</h1>
+
+    <div class="buttons-container">
+      <venmo-button id="venmo-button" type="pay" hidden></venmo-button>
+    </div>
+    <script src="app.js"></script>
+
+    <script
+      async
+      src="https://www.sandbox.paypal.com/web-sdk/v6/core"
+      onload="onPayPalLoaded()"
+    ></script>
+  </body>
+</html>

client/components/venmoPayments/oneTimePayment/html/vite.config.js

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

client/oneTimePayment/react/README.md → client/prebuiltPages/react/oneTimePayment/README.md

@@ -14,7 +14,7 @@ v6-web-sdk-sample-integration/server/node
 npm install
 npm start
 
-v6-web-sdk-sample-integration/client/oneTimePayment/react
+v6-web-sdk-sample-integration/client/prebuiltPages/react/oneTimePayment
 npm install
 npm start
 ```