paypal-examples · nbierdeman · Jun 16, 2025 · Jun 10, 2025 · Jun 11, 2025 · Jun 11, 2025
@@ -0,0 +1,20 @@
+# Upstream Messages 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 only shows how a message can be auto bootstrapped |
+| [Advanced](src/advanced/index.html)       | This is an advanced integration. It shows how a message can be configured via JavaScript             |
@@ -0,0 +1,19 @@
+{
+  "name": "v6-web-sdk-sample-integration-client-upstream-messages",
+  "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"
+  }
+}
@@ -0,0 +1,43 @@
+async function onPayPalLoaded() {
+  try {
+    const clientToken = await getBrowserSafeClientToken();
+    const sdkInstance = await window.paypal.createInstance({
+      clientToken,
+      components: ["paypal-messages"],
+    });
+    createMessage(sdkInstance);
+  } 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 createMessage(sdkInstance) {
+  const messagesInstance = sdkInstance.createPayPalMessages();
+  const messageElement = document.querySelector("#paypal-message");
+
+  sdkInstance.createPayPalMessages({
+    buyerCountry: "US",
+    currencyCode: "USD",
+  });
+
+  const content = await messagesInstance.fetchContent({
+    textColor: "MONOCHROME",
+    onReady: (content) => {
+      messageElement.setContent(content);
+    },
+  });
+
+  return content;
+}
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Upstream Messages - Minimal Integration - PayPal Web SDK</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <h1>Upstream Messages Advanced Integration</h1>
+    <h2>HTML config with JS to update amount</h2>
+
+    <div id="message-background">
+      <paypal-message id="paypal-message"></paypal-message>
+    </div>
+
+    <script src="app.js"></script>
+
+    <script
+      async
+      src="https://www.sandbox.paypal.com/web-sdk/v6/core"
+      onload="onPayPalLoaded()"
+    ></script>
+  </body>
+</html>
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Upstream Messages Sample Integrations - PayPal Web SDK</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <h1>Upstream Messages Integrations</h1>
+
+    <ul>
+      <li>
+        <a href="/recommended/index.html">Recommended integration</a> - HTML
+        config with JS to update amount
+      </li>
+      <li>
+        <a href="/advanced/index.html">Advanced integration</a> - JS config to
+        fetch and set options
+      </li>
+    </ul>
+  </body>
+</html>
@@ -0,0 +1,43 @@
+async function onPayPalLoaded() {
+  try {
+    const clientToken = await getBrowserSafeClientToken();
+    const sdkInstance = await window.paypal.createInstance({
+      clientToken,
+      components: ["paypal-messages"],
+    });
+    sdkInstance.createPayPalMessages();
+    addAmountEventListener();
+  } 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;
+}
+
+// basic example product interaction
+function addAmountEventListener() {
+  const messageElement = document.querySelector("#paypal-message");
+  const quantityInput = document.querySelector("#quantity-input");
+  const totalAmount = document.querySelector("#total-amount");
+  const quantity = document.querySelector("#quantity");
+
+  quantityInput.addEventListener("input", (event) => {
+    const quantityValue = event.target.value;
+    const calculatedTotalAmount = (50 * quantityValue).toFixed(2).toString();
+
+    quantity.innerHTML = quantityValue;
+    totalAmount.innerHTML = calculatedTotalAmount;
+
+    messageElement.amount = calculatedTotalAmount;
+  });
+}
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Upstream Messages - Recommended Integration - PayPal Web SDK</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <h1>Upstream Messages Recommended Integration</h1>
+    <h2>JS config to fetch and set options</h2>
+
+    <div id="message-background">
+      <paypal-message
+        id="paypal-message"
+        auto-bootstrap
+        amount="50"
+        currency-code="USD"
+      ></paypal-message>
+    </div>
+
+    <!-- basic example product interaction -->
+    <p>
+      Amount: $<span id="total-amount">50</span>, Quantity:
+      <span id="quantity">1</span>
+    </p>
+    <fieldset>
+      <legend>Update the quantity of the items to adjust the amount</legend>
+      <input type="number" id="quantity-input" value="1" />
+    </fieldset>
+
+    <script src="app.js"></script>
+
+    <script
+      async
+      src="https://www.sandbox.paypal.com/web-sdk/v6/core"
+      onload="onPayPalLoaded()"
+    ></script>
+  </body>
+</html>
@@ -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,
+      },
+    },
+  },
+});