Mastercard Hosted Checkout Integration always "Payment Unsuccessful" at the end with no error info

Question

I am implementing Mastercard's Hosted Checkout Integration. Detail see below. https://ap.gateway.mastercard.com/api/documentation/integrationGuidelines/hostedCheckout/integrationModelHostedCheckout.html

For checkout.js, I am using interaction.operation: "PURCHASE"

Checkout.configure({
      merchant: <xxxx>,
      order: {
        amount: xxxx,
        currency: "AUD",
        description:<xxxxx>,
        id: <my own order id, unique>,
      },
      session: {
        id: <i can successfully get the session id>,
      },
  
      interaction: {
        merchant: {
          name: <xxxx>,
          logo:logo_url_secure
        },
        operation: "PURCHASE",
        displayControl: {
          billingAddress: "HIDE",
          
        },       
      },
    });
    Checkout.showLightbox();

The checkout light box can load etc. with no problem. Filled in the test card info. The "ACS Emulator" shows up as normal. see screenshot below.

After click on "Submit" on the "ACS Emulator" page, it always gives a "Payment Unsuccessful" result with no error msg etc. See below

checked the API call to the bank, https://xxxxxxxxxx.ap.gateway.mastercard.com/checkout/api/performPayment/SESSIONxxxxxxxxxxxxxxxxxxxxx?charset=UTF-8 the response is 200, but not successful.

{
   "merchantReturnUrl":false,
   "success":false,
   "threeDsRequired":false,
   "alreadySuccessfullyProcessed":false,
   "sessionId":"SESSIONxxxxxxxxxxxxx",
   "receiptUrl":"/checkout/receipt/SESSIONxxxxxxxx",
   "receiptData":{
      "paymentMethod":null,
      "paymentDetail1":null,
      "orderDate":"4/09/21 7:34 PM"
   },
   "transactionId":"2"
}

Anything I did wrong here?

I suspect my test account might not been setup properly?

Any hints are very much appreciated?