diff --git a/client/components/upstreamMessages/html/README.md b/client/components/upstreamMessages/html/README.md
new file mode 100644
index 00000000..bd631d54
--- /dev/null
+++ b/client/components/upstreamMessages/html/README.md
@@ -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 |
diff --git a/client/components/upstreamMessages/html/package.json b/client/components/upstreamMessages/html/package.json
new file mode 100644
index 00000000..a614d1b9
--- /dev/null
+++ b/client/components/upstreamMessages/html/package.json
@@ -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"
+ }
+}
diff --git a/client/components/upstreamMessages/html/src/advanced/app.js b/client/components/upstreamMessages/html/src/advanced/app.js
new file mode 100644
index 00000000..92cf661a
--- /dev/null
+++ b/client/components/upstreamMessages/html/src/advanced/app.js
@@ -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;
+}
diff --git a/client/components/upstreamMessages/html/src/advanced/index.html b/client/components/upstreamMessages/html/src/advanced/index.html
new file mode 100644
index 00000000..7c9425d1
--- /dev/null
+++ b/client/components/upstreamMessages/html/src/advanced/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+ Upstream Messages - Minimal Integration - PayPal Web SDK
+
+
+
+ Upstream Messages Advanced Integration
+ HTML config with JS to update amount
+
+
+
+
+
+
+
+
diff --git a/client/components/upstreamMessages/html/src/index.html b/client/components/upstreamMessages/html/src/index.html
new file mode 100644
index 00000000..7cdc75c2
--- /dev/null
+++ b/client/components/upstreamMessages/html/src/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+ Upstream Messages Sample Integrations - PayPal Web SDK
+
+
+
+ Upstream Messages Integrations
+
+
+
+
diff --git a/client/components/upstreamMessages/html/src/recommended/app.js b/client/components/upstreamMessages/html/src/recommended/app.js
new file mode 100644
index 00000000..f3a0929a
--- /dev/null
+++ b/client/components/upstreamMessages/html/src/recommended/app.js
@@ -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;
+ });
+}
diff --git a/client/components/upstreamMessages/html/src/recommended/index.html b/client/components/upstreamMessages/html/src/recommended/index.html
new file mode 100644
index 00000000..1b859a6f
--- /dev/null
+++ b/client/components/upstreamMessages/html/src/recommended/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+ Upstream Messages - Recommended Integration - PayPal Web SDK
+
+
+
+ Upstream Messages Recommended Integration
+ JS config to fetch and set options
+
+
+
+
+
+ Amount: $50, Quantity:
+ 1
+
+
+
+
+
+
+
+
diff --git a/client/components/upstreamMessages/html/vite.config.js b/client/components/upstreamMessages/html/vite.config.js
new file mode 100644
index 00000000..cc128a59
--- /dev/null
+++ b/client/components/upstreamMessages/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,
+ },
+ },
+ },
+});