Skip to content

Venmo fix #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fernanDOTdo merged 2 commits into from
Dec 1, 2025
Merged

Venmo fix #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2bac7b2
Fix Venmo detection logic using MutationObserver and height check
fernanDOTdo Dec 1, 2025
4ba5c9a
ENgrid Version Adjust
fernanDOTdo Dec 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions dist/engrid.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
*
* ENGRID PAGE TEMPLATE ASSETS
*
* Date: Thursday, November 13, 2025 @ 08:00:35 ET
* By: michael
* Date: Monday, December 1, 2025 @ 16:32:12 ET
* By: fernando
* ENGrid styles: v0.23.0
* ENGrid scripts: v0.23.2
*
Expand Down
98 changes: 66 additions & 32 deletions dist/engrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
*
* ENGRID PAGE TEMPLATE ASSETS
*
* Date: Thursday, November 13, 2025 @ 08:00:35 ET
* By: michael
* Date: Monday, December 1, 2025 @ 16:32:12 ET
* By: fernando
* ENGrid styles: v0.23.0
* ENGrid scripts: v0.23.2
*
Expand Down Expand Up @@ -24254,39 +24254,73 @@ const AppVersion = "0.23.2";

;// CONCATENATED MODULE: ./src/scripts/main.js
const customScript = function (App, DonationFrequency) {
console.log("ENGrid client scripts are executing"); // Listen to the message PayPal sends to the parent window when Venmo is enabled

const VENMO_IDENTIFIER = "venmo"; // Print to the console ALL messages from iFrames

window.addEventListener("message", function (event) {
// Check the origin of the message
if (event.origin === "https://www.paypal.com") {
const data = JSON.parse(event.data); // Get the content from the first item of the data object

const firstKey = Object.keys(data)[0];
const content = data[firstKey][0];
const hasData = ("data" in content);
const hasName = hasData && "name" in content.data;
const isRemember = hasName && content.data.name === "remember";
const hasArgs = isRemember && "args" in content.data;
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;

if (isVenmo) {
// Venmo is Enabled
// If you are on iPhone, only enable Venmo if using Safari
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
const isSafari = navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("CriOS") && !navigator.userAgent.includes("FxiOS");

if (isIOS && !isSafari) {
App.log("Venmo is not enabled on non-Safari iOS");
return;
}
console.log("ENGrid client scripts are executing"); // Venmo Detection

const paypalTouchContainer = document.getElementById("en__digitalWallet__paypalTouch__container");

if (paypalTouchContainer) {
App.log("Venmo Detection: Container found");
let isChecking = false;

const checkVenmo = function () {
let observer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
if (isChecking) return;
isChecking = true;
App.log("Venmo Detection: Checking..."); // Temporarily make the container visible to check its height

const originalDisplay = paypalTouchContainer.style.display;
const originalVisibility = paypalTouchContainer.style.visibility;
const originalPosition = paypalTouchContainer.style.position;
paypalTouchContainer.style.visibility = "hidden";
paypalTouchContainer.style.position = "absolute";
paypalTouchContainer.style.display = "block";
setTimeout(() => {
const height = paypalTouchContainer.offsetHeight;
App.log(`Venmo Detection: Height is ${height}`); // Restore original styles

paypalTouchContainer.style.display = originalDisplay;
paypalTouchContainer.style.visibility = originalVisibility;
paypalTouchContainer.style.position = originalPosition;

if (height > 70) {
// Venmo is Enabled
// If you are on iPhone, only enable Venmo if using Safari
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
const isSafari = navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("CriOS") && !navigator.userAgent.includes("FxiOS");

if (isIOS && !isSafari) {
App.log("Venmo is not enabled on non-Safari iOS");
} else {
App.setBodyData("venmo-enabled", "true");
App.log("Venmo is enabled");
}
} // Stop observing once checked


App.setBodyData("venmo-enabled", "true");
App.log("Venmo is enabled");
if (observer) observer.disconnect();
isChecking = false;
}, 500);
};

const venmoObserver = new MutationObserver(mutationsList => {
for (const mutation of mutationsList) {
if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
App.log("Venmo Detection: Mutation detected");
checkVenmo(venmoObserver);
}
}
});
venmoObserver.observe(paypalTouchContainer, {
childList: true,
subtree: true
}); // Check immediately in case it's already loaded

if (paypalTouchContainer.childNodes.length > 0) {
App.log("Venmo Detection: Immediate check triggered");
checkVenmo(venmoObserver);
}
}); // Add Images to the transaction.giveBySelect labels
} // Add Images to the transaction.giveBySelect labels


const paymentMethods = document.querySelectorAll("[name='transaction.giveBySelect'] + label");
paymentMethods.forEach(label => {
Expand Down
4 changes: 2 additions & 2 deletions dist/engrid.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions dist/engrid.min.js
View file
Open in desktop

Large diffs are not rendered by default.

105 changes: 68 additions & 37 deletions src/scripts/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,77 @@
export const customScript = function (App, DonationFrequency) {
console.log("ENGrid client scripts are executing");

// Listen to the message PayPal sends to the parent window when Venmo is enabled
const VENMO_IDENTIFIER = "venmo";

// Print to the console ALL messages from iFrames
window.addEventListener("message", function (event) {
// Check the origin of the message
if (event.origin === "https://www.paypal.com") {
const data = JSON.parse(event.data);
// Get the content from the first item of the data object
const firstKey = Object.keys(data)[0];
const content = data[firstKey][0];
const hasData = "data" in content;
const hasName = hasData && "name" in content.data;
const isRemember = hasName && content.data.name === "remember";
const hasArgs = isRemember && "args" in content.data;
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;
if (isVenmo) {
// Venmo is Enabled
// If you are on iPhone, only enable Venmo if using Safari
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
const isSafari =
navigator.userAgent.includes("Safari") &&
!navigator.userAgent.includes("CriOS") &&
!navigator.userAgent.includes("FxiOS");

if (isIOS && !isSafari) {
App.log("Venmo is not enabled on non-Safari iOS");
return;
// Venmo Detection
const paypalTouchContainer = document.getElementById(
"en__digitalWallet__paypalTouch__container"
);
if (paypalTouchContainer) {
App.log("Venmo Detection: Container found");
let isChecking = false;
const checkVenmo = (observer = null) => {
if (isChecking) return;
isChecking = true;
App.log("Venmo Detection: Checking...");
// Temporarily make the container visible to check its height
const originalDisplay = paypalTouchContainer.style.display;
const originalVisibility = paypalTouchContainer.style.visibility;
const originalPosition = paypalTouchContainer.style.position;

paypalTouchContainer.style.visibility = "hidden";
paypalTouchContainer.style.position = "absolute";
paypalTouchContainer.style.display = "block";

setTimeout(() => {
const height = paypalTouchContainer.offsetHeight;
App.log(`Venmo Detection: Height is ${height}`);

// Restore original styles
paypalTouchContainer.style.display = originalDisplay;
paypalTouchContainer.style.visibility = originalVisibility;
paypalTouchContainer.style.position = originalPosition;

if (height > 70) {
// Venmo is Enabled
// If you are on iPhone, only enable Venmo if using Safari
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
const isSafari =
navigator.userAgent.includes("Safari") &&
!navigator.userAgent.includes("CriOS") &&
!navigator.userAgent.includes("FxiOS");

if (isIOS && !isSafari) {
App.log("Venmo is not enabled on non-Safari iOS");
} else {
App.setBodyData("venmo-enabled", "true");
App.log("Venmo is enabled");
}
}
// Stop observing once checked
if (observer) observer.disconnect();
isChecking = false;
}, 500);
};

const venmoObserver = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
App.log("Venmo Detection: Mutation detected");
checkVenmo(venmoObserver);
}
App.setBodyData("venmo-enabled", "true");
App.log("Venmo is enabled");
}
});

venmoObserver.observe(paypalTouchContainer, {
childList: true,
subtree: true,
});

// Check immediately in case it's already loaded
if (paypalTouchContainer.childNodes.length > 0) {
App.log("Venmo Detection: Immediate check triggered");
checkVenmo(venmoObserver);
}
});
}

// Add Images to the transaction.giveBySelect labels
const paymentMethods = document.querySelectorAll(
Expand Down
Loading