|
houstonprideband
|
September 23, 2016 at 7:03 pm
I’m the web manager for a non-profit, and I’m currently building a registration website for a national band conference. The site itself is not WordPress, so I purchased EE, and installed it and WordPress on a subdomain.
My plan was to iFrame the registration into my website, but then, of course I ran into the PayPal issue. I’ve found several work-arounds, both in these forums and elsewhere, for PayPal Standard checkout from an iFrame
Here: http://stackoverflow.com/questions/7290847/paypal-integration-with-iframe-based-cart
And Here: https://eventespresso.com/topic/how-do-you-get-paypal-registration-to-work-in-iframes/
But both would require access to the form template page for PayPal checkout, and it seems that this is rather different in EE4 from EE3. Is there a way for me to get in and modify the form to get this working?
|
|
Lorenzo Orlando Caum
|
September 24, 2016 at 8:22 am
Hello,
You may want to take a look at Event Smart (https://eventsmart.com).
It is a hosted version of Event Espresso which means you can get a subdomain site such as this one:
houstonprideband.eventsmart.com (not a valid link, just an example).
—
Lorenzo
|
|
houstonprideband
|
September 30, 2016 at 8:42 am
I have looked at Event Smart, but it is far too expensive for our little non-profit. I was able to solve the issue, and I’ll post my solution here so anyone in my situation can get it working.
First, the iFrame MUST be on the same domain as the main page. Not a sub-domain, same exact domain. Shouldn’t be an issue here, as you need access to both anyway.
Then comes the JavaScript/Jquery. I put this all in my $(window).load function so that it starts as soon as the page is loaded.
Next, use the following function to set the height of your iFrame to match the page, where #email-frame is your iFrame ID (Optional)
window.setInterval(function() {
if($("#email-frame").contents().find('html').height() != undefined){
var ht = $("#email-frame").contents().find('html').height() + 100;
if(ht < $(window).height())
ht=$(window).height();
$("#email-frame").css('height',ht+'px').css('min-height','100%').css('overflow-x','hidden');
}
},500);
Finally, I use a variable isModified to track if I’ve modified the iFrame page or now. When the iFrame is loaded, I look for a particular Event Espresso ID every 1 second. If it’s found, I inject the line “<base target=”_blank” />” into the iFrame page’s head.
Then, I look for the “If you aren’t automatically redirected” form, wait a few seconds, and make a hidden div that says “Once you finish at PayPal you’re done” appear, so that the user doesn’t expect the page to update again.
var isModified = false;
var isSubmitted = false;
$("#email-frame").load(function(){
$("#email-frame").css('visibility','visible');
window.setInterval(function() {
if(!isModified){
if($("#email-frame").contents().find('#ee-spco-payment_options-reg-step-form').attr('action') != undefined){
if(!isModified){
isModified=true;
$("#email-frame").contents().find('head').append('<base target="_blank" />');
window.setInterval(function(){
if($("#email-frame").contents().find("[name='gateway_form']").attr('action') != undefined){
if(!isSubmitted){
isSubmitted=true;
$(".payment-received").delay(5000).hide().removeClass("hidden").slideDown(1000);
}
}
}, 3000);
}
}
}
}, 1000);
});
It’s not the most efficient solution, I’ll admit, but it has worked for me 100%.
|
|
houstonprideband
|
September 30, 2016 at 8:44 am
Erm… The Code tags seemed to have mangled my code. Here’s the complete script.
var isModified = false;
var isSubmitted = false;
$(window).load( function(){
window.setInterval(function() {
if($(“#email-frame”).contents().find(‘html’).height() != undefined){
var ht = $(“#email-frame”).contents().find(‘html’).height() + 100;
if(ht < $(window).height())
ht=$(window).height();
$(“#email-frame”).css(‘height’,ht+’px’).css(‘min-height’,’100%’).css(‘overflow-x’,’hidden’);
}
},500);
var isModified = false;
var isSubmitted = false;
$(“#email-frame”).load(function(){
$(“#email-frame”).css(‘visibility’,’visible’);
window.setInterval(function() {
if(!isModified){
if($(“#email-frame”).contents().find(‘#ee-spco-payment_options-reg-step-form’).attr(‘action’) != undefined){
if(!isModified){
isModified=true;
$(“#email-frame”).contents().find(‘head’).append(‘<base target=”_blank” />’);
window.setInterval(function(){
if($(“#email-frame”).contents().find(“[name=’gateway_form’]”).attr(‘action’) != undefined){
if(!isSubmitted){
isSubmitted=true;
$(“.payment-received”).delay(5000).hide().removeClass(“hidden”).slideDown(1000);
}
}
}, 3000);
}
}
}
}, 1000);
});
$(“#email-frame”).attr(‘src’,'[YOUR URL]’);
});
|
|
Josh
|
September 30, 2016 at 10:33 am
It’s really best to post code like the above in a gist or paste bin.
|
