Skip to content

Commit aad2d16

Browse files
merlinpaypalmerlinpaypal
authored
feat: add upstream message examples (#49)
* feat: add upstream message examples * move under components * Change minimal to advanced and update recommended * Run prettier * Update recommended approach
1 parent cbbfefa commit aad2d16

File tree

8 files changed

+227
-0
lines changed

8 files changed

+227
-0
lines changed

‎client/components/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 only shows how a message can be auto bootstrapped |
20+
| [Advanced](src/advanced/index.html) | This is an advanced integration. It shows how a message can be configured via JavaScript |

‎client/components/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/components/upstreamMessages/html/src/advanced/app.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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+
const messagesInstance = sdkInstance.createPayPalMessages();
28+
const messageElement = document.querySelector("#paypal-message");
29+
30+
sdkInstance.createPayPalMessages({
31+
buyerCountry: "US",
32+
currencyCode: "USD",
33+
});
34+
35+
const content = await messagesInstance.fetchContent({
36+
textColor: "MONOCHROME",
37+
onReady: (content) => {
38+
messageElement.setContent(content);
39+
},
40+
});
41+
42+
return content;
43+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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 Advanced Integration</h1>
10+
<h2>HTML config with JS to update amount</h2>
11+
12+
<div id="message-background">
13+
<paypal-message id="paypal-message"></paypal-message>
14+
</div>
15+
16+
<script src="app.js"></script>
17+
18+
<script
19+
async
20+
src="https://www.sandbox.paypal.com/web-sdk/v6/core"
21+
onload="onPayPalLoaded()"
22+
></script>
23+
</body>
24+
</html>

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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> - HTML
14+
config with JS to update amount
15+
</li>
16+
<li>
17+
<a href="/advanced/index.html">Advanced integration</a> - JS config to
18+
fetch and set options
19+
</li>
20+
</ul>
21+
</body>
22+
</html>

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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+
sdkInstance.createPayPalMessages();
9+
addAmountEventListener();
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+
// basic example product interaction
28+
function addAmountEventListener() {
29+
const messageElement = document.querySelector("#paypal-message");
30+
const quantityInput = document.querySelector("#quantity-input");
31+
const totalAmount = document.querySelector("#total-amount");
32+
const quantity = document.querySelector("#quantity");
33+
34+
quantityInput.addEventListener("input", (event) => {
35+
const quantityValue = event.target.value;
36+
const calculatedTotalAmount = (50 * quantityValue).toFixed(2).toString();
37+
38+
quantity.innerHTML = quantityValue;
39+
totalAmount.innerHTML = calculatedTotalAmount;
40+
41+
messageElement.amount = calculatedTotalAmount;
42+
});
43+
}

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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+
<h2>JS config to fetch and set options</h2>
11+
12+
<div id="message-background">
13+
<paypal-message
14+
id="paypal-message"
15+
auto-bootstrap
16+
amount="50"
17+
currency-code="USD"
18+
></paypal-message>
19+
</div>
20+
21+
<!-- basic example product interaction -->
22+
<p>
23+
Amount: $<span id="total-amount">50</span>, Quantity:
24+
<span id="quantity">1</span>
25+
</p>
26+
<fieldset>
27+
<legend>Update the quantity of the items to adjust the amount</legend>
28+
<input type="number" id="quantity-input" value="1" />
29+
</fieldset>
30+
31+
<script src="app.js"></script>
32+
33+
<script
34+
async
35+
src="https://www.sandbox.paypal.com/web-sdk/v6/core"
36+
onload="onPayPalLoaded()"
37+
></script>
38+
</body>
39+
</html>

‎client/components/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)