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

Question

I would like to inject a Modal popup from content.js in chrome extension that allows the user to pay from the Modal.

I even tried doing async with strip mount function, waiting for document to load & this solution & I get:

Error: ReferenceError: Stripe is not defined

How to reproduce?

Use this code in console. What shall I do?

$(document).ready(function() {

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>     

        `
    function injectScript(src) {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = src;
            script.addEventListener('load', resolve);
            script.addEventListener('error', e => reject(e.error));
            document.head.appendChild(script);
        });
    }
    injectScript('https://js.stripe.com/v3/').then(() => {
      var stripe = Stripe('pk_test_A7jK4iCYHL045qgjjfzAfPxu');
      var elements = stripe.elements();
  
      var elements = stripe.elements();
      var style = {
        base: {
          color: "#32325d",
        }
      };
  
      var card = elements.create("card", { style: style });
      card.mount("#card-element");
    })})