HTML content load from external JS

[dmitrij_rebrov]

Good day,

I'm implementing payments method and code looks like

<div id="payment-container">
</div>

<script async="true" src="https://connect2.payxpert.com/payment/{customerToken}/connect2pay-seamless-v1.2.1.js" data-mount-in="#payment-container" integrity="sha384-KoRUPIW3yZfYzkFzrA1D2/qUKXpnNoiyflE7W0V4kDhJtuQJn8BbwkqrzRPdsXx3" crossorigin="anonymous"></script>

In should insert form into "payment-container" on call

Example:

<div id="payment-container">
    <div class="payments__HHA6p">
        <div class="loader__20xEh" id="c2pSpinner"></div>
        <form class="cardForm__3-0Ac" novalidate="true" id="c2pCreditCardForm">
            <div class="" id="c2pCardHolderNameContainer"><label class="" id="c2pCardHolderNameLabel" for="c2pCardHolderName">Cardholder Name</label><input type="text" class="formInput__3Sjbj" id="c2pCardHolderName" placeholder="Name on the card"></div><div class="" id="c2pCardNumberContainer">

I've tried to insert JS file in phtml through script tag and tried insert with requireJS. In both cases js is loaded but form content is not inserted. And no errors in browser console.

What may cause it?

Should I try insert js through head tag?

[bentleyrob0415]

Eventually, I fixed the problem. In my body tag, I had bootstrap's scripts like

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>

What I did was, I removed

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>

this script entry from the body tag and added jQuery cdn link to header tag.

It works well for me.