I have 2 forms with products using the PayPal checkout addon. They submit to paypal fine and the paypal popup window allows the user to complete the transaction fine and it closes… exposing the gravity form with paypal checkout buttons the user JUST submitted. There is a processing delay before the success message replaces the form. To overcome this delay I created a spinner… a developer has been attempting for a week to get this spinner to display and it will not. I am at a lose. There is css for the spinner in style.css in the child theme, there is code in functions.php for it, added through a wp code snippet in the footer of the form pages. Nothing. It does not appear. The forms function exactly as expected otherwise. This is the php in wp code snippets >>
add_action( ‘wp_footer’, function() {
?>
#paypal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.8); /* White with 80% opacity /
z-index: 999999;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
color: #000*; /* Black text for visibility on white /
font-size: 20px;
text-align: center;
}
#paypal-overlay img.spinner-image {
width: 120px; / Adjust spinner size */
height: auto;
margin-bottom: 15px;
}
<div id="paypal-overlay">
<img class="spinner-image" src="https://akroagatemarbles.com/wp-content/uploads/2025/08/akroagatemarbles_spinner1.png" alt="Loading...">
Completing Transaction...
</div>
<script>
jQuery(document).ready(function($) {
function attachPayPalListener() {
if (window.gform_ppcp && window.gform_ppcp.buttons) {
// Loop through all PayPal buttons
for (let key in window.gform_ppcp.buttons) {
let btn = window.gform_ppcp.buttons[key];
if (btn.originalConfigAttached) continue; // prevent double attach
let originalConfig = btn.config || {};
let originalOnApprove = originalConfig.onApprove;
originalConfig.onApprove = function(data, actions) {
$('#paypal-overlay').fadeIn(200);
if (typeof originalOnApprove === 'function') {
return originalOnApprove.call(this, data, actions);
}
};
btn.originalConfigAttached = true;
btn.config = originalConfig;
}
}
}
// Initial load
attachPayPalListener();
// Re-attach after GF renders (for AJAX forms)
$(document).on('gform_post_render', function() {
attachPayPalListener();
});
// Hide overlay when confirmation loads
$(document).on('gform_confirmation_loaded', function() {
$('#paypal-overlay').fadeOut(300);
});
});
</script>
<?php
});
This is the css added to style.css
img.gform_ajax_spinner {
position: fixed !important;
z-index: 999999;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block !important;
overflow: hidden !important;
width: 100% !important;
height: 100% !important;
background-color: rgba(255, 255, 255, 0.8); /* White with 80% opacity /
background-image: url(‘https://akroagatemarbles.com/wp-content/uploads/2025/08/akroagatemarbles_spinner1.png’);
background-repeat: no-repeat;
background-size: 8rem; / Larger spinner */
background-position: center center;
content: “”;
}
Does anyone see something wrong here?? The developer had the spinner showing at one point, FULL PAGE but incorrect colors and styling. With this new code, NOTHING shows at all. The code is supposedly in theglobal footer, but I have mentioned to him there are CUSTOM footers on all pages. The pages are https://akroagatemarbles.com/ and The Store-Book • Akro Agate Marbles they are virtually identical forms with one and two products, use gravity wiz inventory perk and sumbit to paypal checkout sandbox sucessfully, process successfully, show the confirmation message successfully… but there is a lag where a spinner overlay is needed between the time the paypal checkout window closing and the gravity form success message taking the place of the form. That is where the spinner comes in… but it will not display. Can anyone see anything wrong here?? Developer can not figure it out I guess and I need it to work. It has to work. So if anyone has an idea or can point mr to a paid service that can get this working in the next few days please share that information. There has got to be a service that can fix overlay spinner to work.
Thank you
ps. both these forms are in paypal sandbox mode… to test out and see what happens on purchase completion you can use this sandbox paypal password #bNv2’L?
