I am currently implementing Adyen Web Drop-in integration but ran into a problem testing it on staging.
From the Adyen developer console I can see the API request and response for the session endpoint which returns the sessionData payload as expected.
We then pass sessionData into a page which renders the form correctly.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.10.0/adyen.js"
integrity="sha384-LoKEanRPljHoEsT5o+grBn8hgVzoPevwGvRd+gOp/2Xgc4Jx2FQkx29092SKDdeY"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.10.0/adyen.css"
integrity="sha384-DB96UxMFf+ytuAxtum6/9TOoG/y+vUDFbqolCb7OcQvBA+qSrGaRrl81nMADo/+9"
crossorigin="anonymous">
</head>
<body>
<div id="dropin-container"></div>
<script type="text/javascript">
(async () => {
let checkout = await AdyenCheckout(${partnerJsonParameters?string});
checkout.create('dropin').mount('#dropin-container');
})();
</script>
</body>
</html>
Upon filling in the form with a test credit card number and clicking Pay I see two requests in the browser network pane, CORS pre-flight which is fine, and then the second request fails with
{"status":403,"errorCode":"010","message":"Not allowed [This error message is only provided on TEST, this error will be a 500 Internal Error on LIVE.]","errorType":"security"}
I have found two articles on this error, https://www.adyen.help/hc/en-us/articles/360014216000-Why-do-I-receive-a-403-or-010-Not-Allowed-error- and https://docs.adyen.com/development-resources/error-codes#010-not-allowed but the roles seem fine.
I have verified that both the session from server side and checkout config are configured with "test" environment.. any pointers on what else I can try?
After a bit of back and forward with Matthew here's the solution.