Issues with iFrame

I am running self-hosted InvoiceNinja 4.5.17. I have been using the client portal to deliver invoices and collect payments. I have been doing that successfully but would like to use the iFrame option instead because it would display the invoice on the main website. I think that looks more professional.

InvoiceNinja is installed in a subdomain to my Wordpress business website (invoiceninja.mybusinessdomain.com). I set the url in the control panel for the iFrame to mybusinessdomain.com/payments, not to the subdomain.

I turned off the client portal.
I set up a payment page on my website and inserted the iFrame code into that page.
I set up a test account with an email address not related to my InvoiceNinja install.
I set up a test invoice for that test account with a dollar amount to be collected.

When I email the invoice and click the link to see it, one of two weird things happen.

  1. If I am still logged into the InvoiceNinja backend, when I click the link in the test email to see the invoice, I see what is basically the homepage from the mobile app - summaries, other customer info, etc… Exactly what I do not want my customers to see.

  2. If I log out of the InvoiceNinja backend, then click the link in the test email to see the invoice, I get the subdomain InvoiceNinja login form, asking for my username and password.

I don’t understand what I’m doing wrong. I understand that I should be able to display the iFrame outside the subdomain where InvoiceNinja is installed. If someone can give me some direction, I’d appreciate it. I’ve found basically no specific info about using the iframe in the documentation.

Thanks for any input you can offer.

Not sure if it’s the problem but the client portal should be enabled

I thought we had to have one or the other - client portal, or iframe. I activated the client portal and tried again with a new dummy invoice. The button in the email sent me to the right page but I got this error:

“Not Found
The requested URL was not found on this server. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.”

The error is not for the payments page itself. The link took me to the right page. The sidebar on that page displays. It’s the iFrame that isn’t there and is throwing the error message.

Thanks.

One other note. The payments page where the iFrame is inserted is mybusinessdomain.com/payments/, then the iFrame is attached at the end. I have tried it with and without the trailing slash after payments and found the result is the same 404 error either way.

Does the mybusinessdomain.com/payments page load correctly? It should contain the iFrame code from the app.

Yes, the page loads correctly. The header, sidebar, footer, etc. is there. It is just the iFrame that isn’t loading and is getting a 404.

I’m still trying to resolve this issue. I changed the email addresses on the test clients to be certain there could be no connection between an InvoiceNinja user and the iFrame behavior.

The weirdest thing to me is that several times earlier today, I was logged into InvoiceNinja and when I clicked the link to view the test email in the client portal that should have taken me to see the invoice in the iFrame at mybusinessdomain.com/payments. Instead of the invoice being in the iFrame, I got that control panel that looks very similar to the InvoiceNinja mobile app. If I log out of InvoiceNinja and click the link in the test email, I get the 404 message where the iFrame should be.

I have tried several different email addresses with test clients. Note: The email addresses for the test clients weren’t even close to the one I use to log into InvoiceNinja, so that should not be a conflict.

Every test invoice email goes to the active payment page, but gets the 404 error for the iFrame. The fact that I somehow wound up viewing the InvoiceNinja control panel in the iFrame earlier today tells me that in some weird way the iFrame can occasionally be found.

What link is returning the 404?

This is the link that the emails are sending. I have tried it with and without the trailing slash after “payments.” It makes no difference. Same result either way.

https://mybusinessdomain.com/payments?zvc3qbw3vjxq8163r3hnrgvdjpxv87wx/view

Any ideas yet what might be causing this issue?

Thanks.

When the page load what link is generating the 404?

I’m not sure what link you are referring to. In my earlier reply, I just posted in the link that is behind the button in the email that InvoiceNinja sent. Below, I’ve posted links from the browser after the link in the email was clicked. They appear to be the same. Here are two examples - Links from browser address bar, different test invoices, original and reminder. I noticed that in example #1, there is a slight different between the original and reminder. In Example #2, they are the same.

Example #1:

Original: https://mybusinessdomain.com/payments?w2lw8bws4xora10m1m5vv2o1mf0xs27a/view

Reminder: https://mybusinessdomain.com/payment-3?w2lw8bws4xora10m1m5vv2o1mf0xs27a/view

Example #2:

Original: https://mybusinessdomain.com/payments?zvc3qbw3vjxq8163r3hnrgvdjpxv87wx/view

Reminder: https://mybusinessdomain.com/payments?zvc3qbw3vjxq8163r3hnrgvdjpxv87wx/view

Any ideas?

Earlier you wrote “I get the 404 message where the iFrame should be”, can you please let me know what URL is returning the 404?

Sorry, I thought it didn’t matter the actual domain of my site, that you were just looking at the structure of the url. There are no url details given within the 404 message. The payments page is loading. The header, footer, and sidebar are there, but there is a 404 message where the iFrame should be. I just created a new test invoice and tried it again, this time with a trailing slash in the settings for the iFrame url. I get the same results with or without the trailing slash. Here is the url for the payment page where the link in the email sends me to:

https://domain.com/payments?dzzr9xy7sezzxzfogtorfkvuyafl06jb/view

In settings, I have the iFrame url set to https://domain.com/payments/

Thanks.

Thanks, I think the problem is being caused by having /public in the URL. For some reason it’s being removed (by the app/server?) when trying to load the invoice causing the 404.

I suggest correcting the app’s install so it uses the /public folder as the web root, also make sure the value for APP_URL in the .env file matches.

InvoiceNinja is installed in a subdomain. The payment page is in the main domain. Does that matter as it applies to the instructions you gave?

I’m not sure I understand your question.

I removed the link to your site but I was able to try it and saw it was configured to use /public in the URL.

I guess we’re equally confused. In my last post I pasted the actual url as copied from the button in the email that the client receives. /public is not there. How can you tell that is is configured to use /public in the url? Is that something I can fix? I attempted to add /public to the url in a couple different ways and still got the 404.

That’s the URL for your site, ‘/public’ only applies to the app.

What URL do you use to login to the app?