Error 500 when trying to POST data to opayo server via Fetch API

Question

I am just trying to build a simple form that will redirect the user to the Opayo server payment page.

When using a BASIC html form, I get the correct response from https://sandbox.opayo.eu.elavon.com/gateway/service/vspserver-register.vsp (namely, the "NextURL")

Example of the basic form

<form name='OpayoForm' id='OpayoForm' method='POST' action='https://sandbox.opayo.eu.elavon.com/gateway/service/vspserver-register.vsp'>
        <input type='hidden' id='VPSProtocol' name='VPSProtocol' value='4.0' />
        <input type='hidden' id='TxType' name='TxType' value='PAYMENT' />
        <input type='hidden' id='Vendor' name='Vendor' value='VENDORCODE' />
        <input type='hidden' id='VendorTxCode' name='VendorTxCode' value='VENDORTXCODE' />

        <input type='hidden' id='Amount' name='Amount' value='250.00' />
        <input type='hidden' id='Currency' name='Currency' value='GBP' />
        <input type='hidden' id='Description' name='Description' value='Test Payment' />
        <input type='hidden' id='NotificationURL' name='NotificationURL' value='https://www.myurl.com/notify/' />

        <input type='text' id='BillingSurname' name='BillingSurname' value='Surname' />
        <input type='text' id='BillingFirstnames' name='BillingFirstnames' value='Firstname' />
        <input type='text' id='BillingAddress1' name='BillingAddress1' value='Ad1' />
        <input type='text' id='BillingCity' name='BillingCity' value='City' />
        <input type='text' id='BillingPostCode' name='BillingPostCode' value='AA000AA' />
        <input type='text' id='BillingCountry' name='BillingCountry' value='GB' />
        <input type='text' id='BillingPhone' name='BillingPhone' value='01234567890' />

        <input type='text' id='DeliverySurname' name='DeliverySurname' value='Surname' />
        <input type='text' id='DeliveryFirstnames' name='DeliveryFirstnames' value='Firstname' />
        <input type='text' id='DeliveryAddress1' name='DeliveryAddress1' value='Ad1' />
        <input type='text' id='DeliveryCity' name='DeliveryCity' value='City' />
        <input type='text' id='DeliveryPostCode' name='DeliveryPostCode' value='AA000AA' />
        <input type='text' id='DeliveryCountry' name='DeliveryCountry' value='GB' />

        <input type='email' id='CustomerEMail' name='CustomerEMail' value='[email protected]' />

        <input type='hidden' name='Website' value='https://www.myurl.com/' />

        <input type='submit' name='submit' value='Pay Now' />
    </form>

But if I try to POST this data via the Fetch API I get a Error 500 in the console (and no other information to work from that I can tell.

See JS below:

<script>
        async function FetchResponse() {
            var OpayoForm = document.getElementById('OpayoForm');
            /* //For creating post data in x-www-form-urlencoded format
            var data = [];
            for (let i = 0; i < (OpayoForm.elements.length - 1); i++) { //Loop the form, we aren't interested in the submit button. 
                data.push(encodeURIComponent(OpayoForm.elements[i].name) + "=" + encodeURIComponent(OpayoForm.elements[i].value));
            }
            data = data.join("&");
            */ 

            // For creating post data in form-data format
            var data = new FormData();
            for (let i = 0; i < (OpayoForm.elements.length - 1); i++) { //Loop the form, we aren't interested in the submit button. 
                data.append(OpayoForm.elements[i].name, OpayoForm.elements[i].value);
            }

            fetch("https://sandbox.opayo.eu.elavon.com/gateway/service/vspserver-register.vsp", {
            //fetch("https://www.myurl.com/testFetch.php", { //test page for checking Fetch is posting data
                    method: 'POST',
                    mode: "no-cors",
                    /*headers: {
                        //'Content-Type': 'application/x-www-form-urlencoded',
                        //'Content-Type': 'multipart/form-data',
                    },*/ //I have tried with and without headers to allow the browser to decide. 
                    body: data,
                })
                .then(response => response.text())
                .then((response) => {
                    var lines = response.split(/\r?\n|\r|\n/g);
                    var result = [];
                    for (let a = 0; a < lines.length; a++){
                        line = lines[a].split('=');
                        result[line[0]] = line[1];
                    }
                    console.log(result);//check result....
                    //window.location.href = result["NextURL"];//redirect to the payment page, would check this variable in production.
                })
                .catch(err => console.log(err))
        }
    </script> 

I have tried posting the data as url-encoded and as 'form-data' (comments left in the example above)

I have tested my fetch function by fetching my own page 'testFetch.php'. This page simply outputs the POST data sent to it in the same format as Opayo...and this seems to work without issue.

<?php
foreach ($_POST as $key => $value) {
    echo $key;
    echo "=";
    echo $value . PHP_EOL;
}
?>

I am not sure what I have missed? As far as I can tell, the FetchResponse() function should be making the same request as the basic HTML form...