Reactでscriptタグを利用したインラインフォームを利用したい

<script src="https://widget.univapay.com/client/checkout.js"></script>

<form id="payment-form" action="<任意のURL>">
    <div id="checkout">
        <span
            data-app-id="{アプリトークンID}"
            data-checkout="payment"
            data-amount="1000"
            data-currency="jpy"
            data-inline="true"
        ></span>
    </div>

    <button type="submit">Pay</button>
</form>

<script>
    (function () {
        var form = document.getElementById("payment-form");

        function getPaymentInfo() {
            event.preventDefault();

            var iFrame = document.querySelector("#checkout iframe");
            UnivapayCheckout.submit(iFrame)
                .then((data) => {
                    console.log(data);
                    // The `univapayTokenId` hidden input
                    // has been added with the token id
                    form.submit();
                })
                .catch((errors) => {
                    console.error(errors);
                });
        }

        form.addEventListener("submit", getPaymentInfo);
    })();
</script>