Skip to content

Commit eb05232

Browse files
fernanDOTdofernanDOTdo
authored
Merge pull request #81 from 4site-interactive-studios/venmo-fix
Venmo fix
2 parents 4bb14fa + 4ba5c9a commit eb05232

5 files changed

Lines changed: 141 additions & 76 deletions

File tree

‎dist/engrid.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
*
2020
* ENGRID PAGE TEMPLATE ASSETS
2121
*
22-
* Date: Thursday, November 13, 2025 @ 08:00:35 ET
23-
* By: michael
22+
* Date: Monday, December 1, 2025 @ 16:32:12 ET
23+
* By: fernando
2424
* ENGrid styles: v0.23.0
2525
* ENGrid scripts: v0.23.2
2626
*

‎dist/engrid.js‎

Lines changed: 66 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
*
1818
* ENGRID PAGE TEMPLATE ASSETS
1919
*
20-
* Date: Thursday, November 13, 2025 @ 08:00:35 ET
21-
* By: michael
20+
* Date: Monday, December 1, 2025 @ 16:32:12 ET
21+
* By: fernando
2222
* ENGrid styles: v0.23.0
2323
* ENGrid scripts: v0.23.2
2424
*
@@ -24254,39 +24254,73 @@ const AppVersion = "0.23.2";
2425424254

2425524255
;// CONCATENATED MODULE: ./src/scripts/main.js
2425624256
const customScript = function (App, DonationFrequency) {
24257-
console.log("ENGrid client scripts are executing"); // Listen to the message PayPal sends to the parent window when Venmo is enabled
24258-
24259-
const VENMO_IDENTIFIER = "venmo"; // Print to the console ALL messages from iFrames
24260-
24261-
window.addEventListener("message", function (event) {
24262-
// Check the origin of the message
24263-
if (event.origin === "https://www.paypal.com") {
24264-
const data = JSON.parse(event.data); // Get the content from the first item of the data object
24265-
24266-
const firstKey = Object.keys(data)[0];
24267-
const content = data[firstKey][0];
24268-
const hasData = ("data" in content);
24269-
const hasName = hasData && "name" in content.data;
24270-
const isRemember = hasName && content.data.name === "remember";
24271-
const hasArgs = isRemember && "args" in content.data;
24272-
const isVenmo = hasArgs && Array.isArray(content.data.args) && content.data.args.length > 0 && Array.isArray(content.data.args[0]) && content.data.args[0].length > 0 && content.data.args[0][0] === VENMO_IDENTIFIER;
24273-
24274-
if (isVenmo) {
24275-
// Venmo is Enabled
24276-
// If you are on iPhone, only enable Venmo if using Safari
24277-
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
24278-
const isSafari = navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("CriOS") && !navigator.userAgent.includes("FxiOS");
24279-
24280-
if (isIOS && !isSafari) {
24281-
App.log("Venmo is not enabled on non-Safari iOS");
24282-
return;
24283-
}
24257+
console.log("ENGrid client scripts are executing"); // Venmo Detection
24258+
24259+
const paypalTouchContainer = document.getElementById("en__digitalWallet__paypalTouch__container");
24260+
24261+
if (paypalTouchContainer) {
24262+
App.log("Venmo Detection: Container found");
24263+
let isChecking = false;
24264+
24265+
const checkVenmo = function () {
24266+
let observer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
24267+
if (isChecking) return;
24268+
isChecking = true;
24269+
App.log("Venmo Detection: Checking..."); // Temporarily make the container visible to check its height
24270+
24271+
const originalDisplay = paypalTouchContainer.style.display;
24272+
const originalVisibility = paypalTouchContainer.style.visibility;
24273+
const originalPosition = paypalTouchContainer.style.position;
24274+
paypalTouchContainer.style.visibility = "hidden";
24275+
paypalTouchContainer.style.position = "absolute";
24276+
paypalTouchContainer.style.display = "block";
24277+
setTimeout(() => {
24278+
const height = paypalTouchContainer.offsetHeight;
24279+
App.log(`Venmo Detection: Height is ${height}`); // Restore original styles
24280+
24281+
paypalTouchContainer.style.display = originalDisplay;
24282+
paypalTouchContainer.style.visibility = originalVisibility;
24283+
paypalTouchContainer.style.position = originalPosition;
24284+
24285+
if (height > 70) {
24286+
// Venmo is Enabled
24287+
// If you are on iPhone, only enable Venmo if using Safari
24288+
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
24289+
const isSafari = navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("CriOS") && !navigator.userAgent.includes("FxiOS");
24290+
24291+
if (isIOS && !isSafari) {
24292+
App.log("Venmo is not enabled on non-Safari iOS");
24293+
} else {
24294+
App.setBodyData("venmo-enabled", "true");
24295+
App.log("Venmo is enabled");
24296+
}
24297+
} // Stop observing once checked
24298+
2428424299

24285-
App.setBodyData("venmo-enabled", "true");
24286-
App.log("Venmo is enabled");
24300+
if (observer) observer.disconnect();
24301+
isChecking = false;
24302+
}, 500);
24303+
};
24304+
24305+
const venmoObserver = new MutationObserver(mutationsList => {
24306+
for (const mutation of mutationsList) {
24307+
if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
24308+
App.log("Venmo Detection: Mutation detected");
24309+
checkVenmo(venmoObserver);
24310+
}
2428724311
}
24312+
});
24313+
venmoObserver.observe(paypalTouchContainer, {
24314+
childList: true,
24315+
subtree: true
24316+
}); // Check immediately in case it's already loaded
24317+
24318+
if (paypalTouchContainer.childNodes.length > 0) {
24319+
App.log("Venmo Detection: Immediate check triggered");
24320+
checkVenmo(venmoObserver);
2428824321
}
24289-
}); // Add Images to the transaction.giveBySelect labels
24322+
} // Add Images to the transaction.giveBySelect labels
24323+
2429024324

2429124325
const paymentMethods = document.querySelectorAll("[name='transaction.giveBySelect'] + label");
2429224326
paymentMethods.forEach(label => {

‎dist/engrid.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/engrid.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/scripts/main.js‎

Lines changed: 68 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,77 @@
11
export const customScript = function (App, DonationFrequency) {
22
console.log("ENGrid client scripts are executing");
33

4-
// Listen to the message PayPal sends to the parent window when Venmo is enabled
5-
const VENMO_IDENTIFIER = "venmo";
6-
7-
// Print to the console ALL messages from iFrames
8-
window.addEventListener("message", function (event) {
9-
// Check the origin of the message
10-
if (event.origin === "https://www.paypal.com") {
11-
const data = JSON.parse(event.data);
12-
// Get the content from the first item of the data object
13-
const firstKey = Object.keys(data)[0];
14-
const content = data[firstKey][0];
15-
const hasData = "data" in content;
16-
const hasName = hasData && "name" in content.data;
17-
const isRemember = hasName && content.data.name === "remember";
18-
const hasArgs = isRemember && "args" in content.data;
19-
const isVenmo =
20-
hasArgs &&
21-
Array.isArray(content.data.args) &&
22-
content.data.args.length > 0 &&
23-
Array.isArray(content.data.args[0]) &&
24-
content.data.args[0].length > 0 &&
25-
content.data.args[0][0] === VENMO_IDENTIFIER;
26-
if (isVenmo) {
27-
// Venmo is Enabled
28-
// If you are on iPhone, only enable Venmo if using Safari
29-
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
30-
const isSafari =
31-
navigator.userAgent.includes("Safari") &&
32-
!navigator.userAgent.includes("CriOS") &&
33-
!navigator.userAgent.includes("FxiOS");
34-
35-
if (isIOS && !isSafari) {
36-
App.log("Venmo is not enabled on non-Safari iOS");
37-
return;
4+
// Venmo Detection
5+
const paypalTouchContainer = document.getElementById(
6+
"en__digitalWallet__paypalTouch__container"
7+
);
8+
if (paypalTouchContainer) {
9+
App.log("Venmo Detection: Container found");
10+
let isChecking = false;
11+
const checkVenmo = (observer = null) => {
12+
if (isChecking) return;
13+
isChecking = true;
14+
App.log("Venmo Detection: Checking...");
15+
// Temporarily make the container visible to check its height
16+
const originalDisplay = paypalTouchContainer.style.display;
17+
const originalVisibility = paypalTouchContainer.style.visibility;
18+
const originalPosition = paypalTouchContainer.style.position;
19+
20+
paypalTouchContainer.style.visibility = "hidden";
21+
paypalTouchContainer.style.position = "absolute";
22+
paypalTouchContainer.style.display = "block";
23+
24+
setTimeout(() => {
25+
const height = paypalTouchContainer.offsetHeight;
26+
App.log(`Venmo Detection: Height is ${height}`);
27+
28+
// Restore original styles
29+
paypalTouchContainer.style.display = originalDisplay;
30+
paypalTouchContainer.style.visibility = originalVisibility;
31+
paypalTouchContainer.style.position = originalPosition;
32+
33+
if (height > 70) {
34+
// Venmo is Enabled
35+
// If you are on iPhone, only enable Venmo if using Safari
36+
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
37+
const isSafari =
38+
navigator.userAgent.includes("Safari") &&
39+
!navigator.userAgent.includes("CriOS") &&
40+
!navigator.userAgent.includes("FxiOS");
41+
42+
if (isIOS && !isSafari) {
43+
App.log("Venmo is not enabled on non-Safari iOS");
44+
} else {
45+
App.setBodyData("venmo-enabled", "true");
46+
App.log("Venmo is enabled");
47+
}
48+
}
49+
// Stop observing once checked
50+
if (observer) observer.disconnect();
51+
isChecking = false;
52+
}, 500);
53+
};
54+
55+
const venmoObserver = new MutationObserver((mutationsList) => {
56+
for (const mutation of mutationsList) {
57+
if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
58+
App.log("Venmo Detection: Mutation detected");
59+
checkVenmo(venmoObserver);
3860
}
39-
App.setBodyData("venmo-enabled", "true");
40-
App.log("Venmo is enabled");
4161
}
62+
});
63+
64+
venmoObserver.observe(paypalTouchContainer, {
65+
childList: true,
66+
subtree: true,
67+
});
68+
69+
// Check immediately in case it's already loaded
70+
if (paypalTouchContainer.childNodes.length > 0) {
71+
App.log("Venmo Detection: Immediate check triggered");
72+
checkVenmo(venmoObserver);
4273
}
43-
});
74+
}
4475

4576
// Add Images to the transaction.giveBySelect labels
4677
const paymentMethods = document.querySelectorAll(

0 commit comments

Comments
 (0)