Offer Discovery Widget

<div id="banner-container" class="paytm-banner-wrap">
<span id="banner"></span>
</div>

<script>
  function onScriptLoad(){
      var config =  {
                "root": "#banner",
                "data": {
                  "accessToken": "ACCESS_TOKEN_HERE",
                  "referenceId": "ACCESS_TOKEN_REFERENCE_ID",
                  "amount": "10000",    // total cart value
                  "offerDiscoveryInfo": {
                    "amountBasedBankOffer": false,   // mandatory to determine type of Bank offer
                    "items": [
                      {
                        "id": "item1116",             //random identifier for item 
                        "productId": "2",             // SKU code configured in the merchant's DB
                        "brandId": "1707",            // Brand identifier assigned for the brand
                        "categoryId": "124",          // Category identifier assigned for the category
                        "model": "iphone_11_24",      // Model configured in the merchant's DB
                        "price": 10000.00             // price of the product
                      }
                    ],
                    "amountBasedSubvention": false    // mandatory to determine type of subvention
                  },
                  "userDetail": 
                              {
                         "mobileNumber": "1111111111"  
                    }
                },
                "merchant": {     "mid": "YOUR_MID_HERE" }
};
    if(window.Paytm && window.Paytm.OfferJS){
        window.Paytm.OfferJS.onLoad(function excecuteAfterCompleteLoad() {
            window.Paytm.OfferJS.initLib(config.merchant.mid).then(res => {
                 window.Paytm.OfferJS.init(config).then(res => {
                     window.Paytm.OfferJS.invoke();
                 })
             })
        })
      }
  }
</script>

<script type="application/javascript" crossorigin="anonymous" src="{HOST}/merchantpgpui/offerjs/merchants/{MID}.js" onload="onScriptLoad();"> </script>

<script>
    function onScriptLoad(price) {
        // Remove the existing script if it exists
        let oldScript = document.getElementById('dynamicScript');
        if (oldScript) {
            oldScript.parentNode.removeChild(oldScript);
        }

        // Remove the existing banner if it exists
        let selector = document.getElementById('banner');
        if (selector) {
            selector.remove();
        }

        // Create a new div for the banner
        let div = document.createElement("div");
        div.setAttribute("id", "banner");
        let bannerContainer = document.getElementById("banner-container");
        bannerContainer.appendChild(div);

        // Create a new script element
        var script = document.createElement('script');
        script.id = 'dynamicScript';
        script.src = '{HOST}/merchantpgpui/offerjs/merchants/{MID}.js';
        script.type = "application/javascript";
        script.crossOrigin = "anonymous"; // Replace with your script URL

        // Define the onload event handler
        script.onload = function() {
            console.log('Script has been loaded with price: ' + price);
            // Configuration for the script
            var config = {
                "root": "#banner",
                "data": {
                     "accessToken": "ACCESS_TOKEN_HERE",
                    "referenceId": "ACCESS_TOKEN_REFERENCE_ID",
                    "amount": price,    // total cart value
                    "offerDiscoveryInfo": {
                        "amountBasedBankOffer": false,
                        "items": [
                             {
                        "id": "item1116",             //random identifier for item 
                        "productId": "2",             // SKU code configured in the merchant's DB
                        "brandId": "1707",            // Brand identifier assigned for the brand
                        "categoryId": "124",          // Category identifier assigned for the category
                        "model": "iphone_11_24",      // Model configured in the merchant's DB
                        "price": 10000.00             // price of the product
                      }
                        ],
                        "amountBasedSubvention": true
                    },
                    "userDetail": {
                        "mobileNumber": "1111111111"
                    }
                },
                "merchant": { "mid": "YOUR_MID_HERE"}
            };

            // Initialize the Paytm OfferJS library
            window.Paytm.OfferJS.onLoad(function() {
                window.Paytm.OfferJS.initLib(config.merchant.mid).then(res => {
                    window.Paytm.OfferJS.init(config).then(res => {
                        window.Paytm.OfferJS.invoke();
                    });
                });
            });
        };

        // Append the new script element to the document body
        document.body.appendChild(script);
    }

    // 
    var customElement = document.getElementById('<Element which determines dynamic behaviour>');
    customElement.addEventListener('input', function() {
        var newPrice = customElement.value;
        onScriptLoad(newPrice);
    });

</script>

<script type="application/javascript" crossorigin="anonymous" src="{HOST}/merchantpgpui/offerjs/merchants/{MID}.js" onload="onScriptLoad(price);"> </script>