Stripe card-element not showing on injected script of chrome extension


I would like to inject a Modal popup from content.js in chrome extension that allows the user to pay from the Modal. I don’t get any errors in the catch nor any network erros, nonetheless, the card-element is not showing.

I even tried doing async, waiting for document to load & this solution & still it didn’t show.

How to reproduce?

Use this code in console. How shall I go about this?

try{
    const subscriptionPopup = `
        <div class="container">
        <div id="myPopup" class="popup hide overlay" style="height:500px !important;">
        <div class="popup-body" id="popup-body">
        <div id="card-element" style="background:#FF0000    ">
          <!-- the card element will be mounted here -->
          <p>HEREE</p>
        </div>
      </div>
      </div>     
           
        `
    
    var script = document.createElement('script');
    script.async = true;
    script.type = 'text/javascript';
    script.src = 'https://js.stripe.com/v3/';   
    
    document.body.appendChild(script);
    
    const div = document.createElement("div");
    div.classList.add("popup");
    div.innerHTML = subscriptionPopup;
    document.querySelector("body").append(div);
    
    }
    catch(err){
      console.log(err)
    }

Source: JavaSript – Stack Overflow

November 26, 2021
Category : News
Tags: DOM | google-chrome-extension | inject | javascript | stripe-payments

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.