JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
   <head>
      <script src='https://cdn.ipaper.io/flipbooks/api/v3/latest.js'></script>
   </head>
   <body><iframe id="myFlipbook" src="https://viewer.ipaper.io/code-examples/javascript/?page=2" style="width: 100%; height: 400px;" data-ipaper></iframe></body>
   <script>
      const myIframe = document.getElementById('myFlipbook');
      // Create a new V3 API instance with the iframe
      const myApiInstance = iPaperJsApi(myIframe, 3);
      myApiInstance.basket.onProductAdded((product) => {
        // Use template literals to display the product information in an alert dialog box
        alert(`Product Information:
              Title: ${product.title}
              Description: ${product.description}
              Product ID: ${product.productId}
              Price: ${product.price}
              Quantity: ${product.quantity}`);
      });
   </script>
</html>