Skip to content

Commit a49b694

Browse files
merlinpaypalmerlinpaypal
committed
feat: add upstream message examples
1 parent 7c77f3f commit a49b694

File tree

8 files changed

+215
-0
lines changed

8 files changed

+215
-0
lines changed

‎client/upstreamMessages/html/README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Upstream Messages HTML Sample Integration
2+
3+
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:
4+
5+
1. Serve up the static HTML and JavaScript files.
6+
2. Proxy the API server so both the client and server are running on port 3000.
7+
8+
## How to Run Locally
9+
10+
```bash
11+
npm install
12+
npm start
13+
```
14+
15+
### Sample Integrations
16+
17+
| Sample Integration | Description |
18+
| ----------------------------------------- | ------------------------------------------------------------------------------------------------ |
19+
| [Recommended](src/recommended/index.html) | Start with this recommended sample integration. It displays all messages supported by the v6 SDK |
20+
| [Minimal](src/minimal/index.html) | This is a minimal integration. It only shows how a message can be auto bootstrapped |

‎client/upstreamMessages/html/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "v6-web-sdk-sample-integration-client-upstream-messages",
3+
"version": "1.0.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"start": "vite",
10+
"format": "prettier . --write",
11+
"format:check": "prettier . --check",
12+
"lint": "echo \"eslint is not set up\""
13+
},
14+
"license": "Apache-2.0",
15+
"devDependencies": {
16+
"prettier": "^3.5.3",
17+
"vite": "^6.2.0"
18+
}
19+
}

‎client/upstreamMessages/html/src/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Upstream Messages Sample Integrations - PayPal Web SDK</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
</head>
8+
<body>
9+
<h1>Upstream Messages Integrations</h1>
10+
11+
<ul>
12+
<li>
13+
<a href="/recommended/index.html">Recommended integration</a>
14+
</li>
15+
</ul>
16+
</body>
17+
</html>

‎client/upstreamMessages/html/src/minimal/app.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
async function onPayPalLoaded() {
2+
try {
3+
const clientToken = await getBrowserSafeClientToken();
4+
const sdkInstance = await window.paypal.createInstance({
5+
clientToken,
6+
components: ["paypal-messages"],
7+
});
8+
createMessage(sdkInstance);
9+
} catch (error) {
10+
console.error(error);
11+
}
12+
}
13+
14+
async function getBrowserSafeClientToken() {
15+
const response = await fetch("/paypal-api/auth/browser-safe-client-token", {
16+
method: "GET",
17+
headers: {
18+
"Content-Type": "application/json",
19+
},
20+
});
21+
const { accessToken } = await response.json();
22+
23+
return accessToken;
24+
}
25+
26+
async function createMessage(sdkInstance) {
27+
sdkInstance.createPayPalMessages({
28+
buyerCountry: "US",
29+
currencyCode: "USD",
30+
});
31+
}

‎client/upstreamMessages/html/src/minimal/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Upstream Messages - Minimal Integration - PayPal Web SDK</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
</head>
8+
<body>
9+
<h1>Upstream Messages Minimal Integration</h1>
10+
11+
<div id="message-background">
12+
<paypal-message auto-bootstrap id="paypal-message"></paypal-message>
13+
</div>
14+
15+
<script src="app.js"></script>
16+
17+
<script
18+
async
19+
src="https://www.sandbox.paypal.com/web-sdk/v6/core"
20+
onload="onPayPalLoaded()"
21+
></script>
22+
</body>
23+
</html>

‎client/upstreamMessages/html/src/recommended/app.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
async function onPayPalLoaded() {
2+
try {
3+
const clientToken = await getBrowserSafeClientToken();
4+
const sdkInstance = await window.paypal.createInstance({
5+
clientToken,
6+
components: ["paypal-messages"],
7+
});
8+
const content = await createMessage(sdkInstance);
9+
addAmountEventListener(content);
10+
} catch (error) {
11+
console.error(error);
12+
}
13+
}
14+
15+
async function getBrowserSafeClientToken() {
16+
const response = await fetch("/paypal-api/auth/browser-safe-client-token", {
17+
method: "GET",
18+
headers: {
19+
"Content-Type": "application/json",
20+
},
21+
});
22+
const { accessToken } = await response.json();
23+
24+
return accessToken;
25+
}
26+
27+
async function createMessage(sdkInstance) {
28+
const messagesInstance = sdkInstance.createPayPalMessages({
29+
buyerCountry: "US",
30+
currencyCode: "USD",
31+
});
32+
const messageElement = document.querySelector("#paypal-message");
33+
34+
const content = await messagesInstance.fetchContent({
35+
onReady: (content) => {
36+
messageElement.setContent(content);
37+
},
38+
});
39+
40+
return content;
41+
}
42+
43+
// basic example product interaction
44+
function addAmountEventListener(content) {
45+
const quantityInput = document.querySelector("#quantity-input");
46+
const totalAmount = document.querySelector("#total-amount");
47+
const quantity = document.querySelector("#quantity");
48+
49+
quantityInput.addEventListener("input", (event) => {
50+
const quantityValue = event.target.value;
51+
const calculatedTotalAmount = (50 * quantityValue).toString();
52+
53+
quantity.innerHTML = quantityValue;
54+
totalAmount.innerHTML = calculatedTotalAmount;
55+
56+
content.update({ amount: calculatedTotalAmount });
57+
});
58+
}

‎client/upstreamMessages/html/src/recommended/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Upstream Messages - Recommended Integration - PayPal Web SDK</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
</head>
8+
<body>
9+
<h1>Upstream Messages Recommended Integration</h1>
10+
11+
<div id="message-background">
12+
<paypal-message id="paypal-message"></paypal-message>
13+
</div>
14+
15+
<!-- basic example product interaction -->
16+
<p>Amount: $<span id="total-amount">50</span>, Quantity: <span id="quantity">1</span></p>
17+
<fieldset>
18+
<legend>Update the quantity of the items to adjust the amount</legend>
19+
<input type="number" id="quantity-input" value="1"></input>
20+
</fieldset>
21+
22+
<script src="app.js"></script>
23+
24+
<script
25+
async
26+
src="https://www.sandbox.paypal.com/web-sdk/v6/core"
27+
onload="onPayPalLoaded()"
28+
></script>
29+
</body>
30+
</html>

‎client/upstreamMessages/html/vite.config.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { defineConfig } from "vite";
2+
3+
// https://vitejs.dev/config/
4+
export default defineConfig({
5+
plugins: [],
6+
root: "src",
7+
server: {
8+
port: 3000,
9+
proxy: {
10+
"/paypal-api": {
11+
target: "http://localhost:8080",
12+
changeOrigin: true,
13+
secure: false,
14+
},
15+
},
16+
},
17+
});

0 commit comments

Comments
 (0)