What are the options for implementing a storefront widget embedded on a website?

Question

JavaScript

Good afternoon colleagues, tell me please, the task is to implement an embedded constructor (essentially a storefront), by analogy with VK widgets, for example.

In fact, the task is to create a client-server web application. The server will be implemented on Bitrix, the client on JS; They will communicate with each other based on the RESTful API with token authorization (oAuth 2.0); All logic will be on the server i.e. if a product is added to the cart, then using the API we transfer information about this to the server, which adds it to the cart, the same with placing an order, etc..

What is the best and easiest way to implement this? For the most part, the implementation of the client is of interest, if there are ready-made solutions that can be used (cms, libraries, plugins?) Or is it easier to write from scratch?

UPDATE
And one more question, what is the best way to embed a widget? IFRAME? Or on the page itself in some div id='myshop' ? If you do not take into account possible conflicts when implementing embedding using JS (without IFRAME). What are the pros and cons of these approaches?

Answer 1

when embedded in a div, the downside is that the site that embeds has full access to the content. can change the design / code, etc. of the pluses only if you need this site to receive callbacks for different actions. for example when a customer added to cart.
with an iframe, this is a little more difficult to do (via postMessage). iframe gives you complete isolation from sites, they will no longer be able to peek inside and modify.
also, if the height of the content should change, then everything is simple with divs, for the iframe, you again need to do it through postMessage.
on implementation: either a budget option - just a separate version of the site with transitions inside (another advantage of the iframe - the page can be updated, making transitions to other URLs). budget, because the frontend is the simplest, you can even just put your site without a header/footer there.
not a budget - SPA application, for it just use any js framework (angular / react, etc.).