3

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.

Mike Waldron
  • 334
  • 2
  • 10
  • 1
    Hey there! Did you add the URL you are making requests from to the allowed origins for your API Credentials? You could also try regenerating your client key. Is there any place where I can run your code so I can have a look? In case you were not aware, we also have quite a few working samples here to help you : https://github.com/adyen-examples – jlengrand Mar 17 '22 at 09:28
  • @jlengrand, that was it, thank you so much! If you want the answer karma, copy-paste this into the answer and I'll mark it as accepted. The new "Configure API credential" page makes this much more obvious than the classic page did. For some reason I was looking at the classic page yesterday. – Mike Waldron Mar 17 '22 at 18:05
  • 1
    ha, that's great to hear! Yes, I can create an answer out of it, no problem. Happy to see the new design made it more obvious. I was rolled out just this week! – jlengrand Mar 17 '22 at 21:34

1 Answers1

9

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".

enter image description here

That should solve your CORS issues

jlengrand
  • 12,152
  • 14
  • 57
  • 87