how do i integrate authorize.net into my wix page?

I am using authorize.net's sandbox API to test their gateway in my wix (corvid/code) environment. Funny thing is that when i send JSON to the sandbox API i get a valid JSON response approving the (fake) transaction. however when i set it up thru wix i get data errors in my console. I have built on existing files that i have been able to run basic API responses, and more advanced auths with token responses. so the code works, just not with authorize.net. given my level of expertise, i think it might be something im doing wrong. i've done my due diligence, and there are no questions on this topic. here is my code:

///front end, from the corvid page's code
import {buyIt} from 'backend/authorizeNet';       

export function button1_click(event) {
        buyIt();
}

pretty basic, just calling code from my backend onClick. the filepath is correct. here is the module on the backend:

////       backend/authorizeNet.jsw
import {fetch} from 'wix-fetch';  

export function buyIt() {

  let data = {
        "createTransactionRequest": {
        "merchantAuthentication": {
        "name": "***************",
        "transactionKey": "****************"
        },
        "refId": "123456",
        "transactionRequest": {
        "transactionType": "authCaptureTransaction",
        "amount": "5",
        "payment": {
            "creditCard": {
            "cardNumber": "5424000000000015",
            "expirationDate": "2020-12",
            "cardCode": "999"
            }
        },
        "lineItems": {
            "lineItem": {
            "itemId": "1",
            "name": "vase",
            "description": "Cannes logo",
            "quantity": "18",
            "unitPrice": "45.00"
            }
        },
        "tax": {
            "amount": "4.26",
            "name": "level2 tax name",
            "description": "level2 tax"
        },
        "duty": {
            "amount": "8.55",
            "name": "duty name",
            "description": "duty description"
        },
        "shipping": {
            "amount": "4.26",
            "name": "level2 tax name",
            "description": "level2 tax"
        },
        "poNumber": "456654",
        "customer": {
            "id": "99999456654"
        },
        "billTo": {
            "firstName": "Ellen",
            "lastName": "Johnson",
            "company": "Souveniropolis",
            "address": "14 Main Street",
            "city": "Pecan Springs",
            "state": "TX",
            "zip": "44628",
            "country": "USA"
        },
        "shipTo": {
            "firstName": "China",
            "lastName": "Bayles",
            "company": "Thyme for Tea",
            "address": "12 Main Street",
            "city": "Pecan Springs",
            "state": "TX",
            "zip": "44628",
            "country": "USA"
        },
        "customerIP": "192.168.1.1",
        "transactionSettings": {
            "setting": {
            "settingName": "testRequest",
            "settingValue": "false"
            }
        },
        "userFields": {
            "userField": [
            {
                "name": "MerchantDefinedFieldName1",
                "value": "MerchantDefinedFieldValue1"
            },
            {
                "name": "favorite_color",
                "value": "blue"
            }
            ]
        }
        }
    }
  }

  return fetch("https://test.authorize.net/xml/v1/request.api", {
    "method": "post", 
    "headers": {"Content-Type": "application/json"}, 
    "body": data
  })
  .then(response => {console.log(response.json())});///if response.text is used, it gives details

}

note at the end of the backend code, calling response.json give me a json error, due to the return code contains HTML saying that i've requested invalid data. if i change it to response.text i get this in my console:

//console response with response.text
{...}
isFulfilled: 
true
isRejected: 
false
fulfillmentValue: 
"<HTML><HEAD>\n<TITLE>Bad Request</TITLE>\n</HEAD><BODY>\n<H1>Bad Request</H1>\nYour browser sent a request that this server could not understand.<P>\nReference&#32;&#35;7&#46;1d60fea5&#46;1557756725&#46;387c74\n</BODY>\n</HTML>\n"

how do i get a good response from the API? like ive done with the same code in postman?

thanks in advance

Solution

return fetch(url, {
    method: "post", 
    headers: {"Content-Type": "application/json"}, 
    body: JSON.stringify(data)
  })

  .then(response => console.log(response.text())
  )

this got me the result i was looking for

stringify() converted my object to a JSON string. i still cannot get it to read the incoming JSON, might have to use parse...but if i read as text i get the info i want and my API is showing a successful transaction.