Dealing With CORS Error/Invalid Client Key For Adyen's Web Drop-In

Question

I'm trying to implement an end-to-end proof-of-concept to exercise Adyen's Web Drop-In. Roughly, this involves three steps, as shown at that URL, but repeated here for convenience:

1. Create a payment session
2. Set up Drop-in
3. Get the payment outcome

Step 1 is done on the server, and the session data is returned to the browser. That part's working fine. Step 2 has to be done in the browser because it requires the DOM, and this is (naturally) where the CORS problems arise. Here's the problematic code:

      const configuration = {
        environment: "test",
        clientKey: "test_APV***...",
        session: {
          id: uuidv4(),
          sessionData: "Ab02b4c0!BQABAgBdJVhguRV6hEN..."
        },
        onPaymentCompleted: (result, component) => {
            console.info(result, component);
        },
        onError: (error, component) => {
            console.error(error.name, error.message, error.stack, component);
        }
      };

      AdyenCheckout(configuration)
      .then(checkout => {
        const dropinComponent = checkout.create('dropin').mount('#dropin-container');
      })
      .catch(error => {
        console.error('Creating Adyen Checkout: ', error.message)
      })
    }

The line AdyenCheckout(configuration) fails, which puts the thread of execution into the onError handler. There are two errors that are visible in the browser console:

1. A standard CORS error, from deep in the bowels of Adyen's javascript library
2. NETWORK_ERROR: ERROR: Invalid ClientKey

Adyen's documentation allows embedding the JS like so

<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.10.0/adyen.js"
     integrity="sha384-LoKEanRPljHoEsT5o+grBn8hgVzoPevwGvRd+gOp/2Xgc4Jx2FQkx29092SKDdeY"
     crossorigin="anonymous"></script>

and my understanding is that the "integrity" and "crossorigin" attributes are there to allow the cross-origin request... but that doesn't seem to be working.

The "Invalid ClientKey" error is also puzzling: I'm certain the ClientKey I'm using is valid, and is the same one that's associated with the API Key I used to generate the session data.

Hopefully somebody out there has experience with Adyen's Web Drop-In, and can shed some light on what I'm doing wrong. If I manage to figure this out myself, I'll report back.

Answer 1

What is most likely to happen is that you have not added your application's URL into the "allowed origins" list of your credentials.

You can do this by going to the Developers -> API Credentials page of the customer area, selecting the right credential there and adding a new "Allowed Origin".

That should solve your CORS issues