Placing a website inside another as light box checkout

Asked

Viewed 578 times

4

I am a web developer and I came across a problem where I need to display a registration form within another page. The customer does not want his user to be directed to our page, I tried to instruct him to use iframe more this resulted in a horrible mobile experience. There are examples that can do exactly what I want most outside that are developed in javascript I do not understand very well how they work and I could not find search terms to do something similar, Just looking at their code becomes difficult to understand because they are possibly minified with webpack or Gulp.

Following are examples:

https://dev.pagseguro.uol.com.br/documentacao/pagamento-online/pagamentos/pagamento-lightbox/api-de-pagamentos-lightbox

or

https://pagar.me/checkout/

or

https://docs.mundipagg.com/docs/checkout-lightbox

My client in the case would follow the same examples, where he would put a script tag and the dependency data, thus opening a modal where the content inside would be controlled by my site giving an experience to the user a distributed system that does not change site. I know I didn’t post an error or code and I’m not asking for a code made but a guide of how to do something similar.

javascript

  • So brother, in such cases, the processing is actually performed in the service (pagseguro, etc). But the form is in your system. Not an external HTML no. You should use the events of the . js framework on the HTML you will mount or what they suggest...

  • Have you researched the PHP Include, or the tag <object> of HTML ?

  • @Diegosantos using the framework events would be to mount the code inside his page ? Because in my case I have clients who use different js framework, I would have to assemble a part of my site for each framework, what I thought was a flashy javascript which would take several frameworks at once. And the same would only import this code to his website, using a script tag pointed at my server. This configuration I’m not quite sure how to start.

  • So, if you use their . js, this JS itself will make requests to their system directly. That’s already a behavior of these frameworks. all you have to do is configure some information, usually tokens, etc. You will have to mount only one HTML and connect the dots.

1 answer

1

I tried it in a way that maybe works but I’m not sure it will work 100% because certain plugins might not load

<div id="load"></div>

    $(document).ready(function(){
        $("#load").load("https://www.famalicaocanal.pt");
    })
</script>

In this example you can display that site on your page only if you have at the top of the page the following code on the site you want to present

 header("Access-Control-Allow-Origin: *");

Feel free to test with that url of the site.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.