Using ngrok and Pipedream for Local Adyen Development

Setup is specific to Magento development but should provide good information outside of Magento-specific instructions.

ngrok Setup

1. Install ngrok: https://ngrok.com/download

2. On Windows, open a CMD or PowerShell window

   1. Navigate to your local ngrok directory (Ex: cd C:\ngrok)

3. On Ubuntu, the command should be global

4. Run command ngrok http <your local url here>

   1. You will need to add your local URL to the ‘Allowed Origins’ in the Adyen web service API configuration.

5. If everything worked correctly your CLI will look similar to this:

   

6. Copy the forwarding address (Ex: https://2e1e-76-215-176-188.ngrok.io ), paste it into a browser, and ensure that you are seeing your local site

---

Adyen configuration

1. Sign into Adyen's customer portal

   1. ask someone to help set up your credentials if you don’t have them

2. Make sure you are working in the correct merchant account in Adyen

   1. this will be specific to your Adyen setup but can be located in the top right corner next to the Adyen logo.

3. Select ‘Webhooks’ under ‘Developers’ in the left-hand sidebar

   • Click ‘+ Webhook’ in the top right-hand corner

1. Select ‘Add’ on the ‘Standard webhook’ row

   

2. Fill in the following fields:

   1. Description - any description you would like

   2. Server Config - this will be the ngrok URL we set up in the previous step:

      1. add /adyen/process/json to the end of the URL

         Ex. https://2e1e-76-215-176-188.ngrok.io/adyen/process/json

   3. Events - Default events enabled

   4. Basic Authentication - Username & Password

      1. Use the username and password setup in your Magento Adyen configuration

         

   5. HMAC Key - Generate a new HMAC key and copy it somewhere secure for use in your local configuration

      1. should be located directly below the webhook password (as shown above)

   6. Additional Settings - leave defaults

3. Click ‘Test Configuration’ in the bottom right of the browser window

   1. Select Event: ‘Authorisation’

   2. Click ‘Test’ in the bottom right

   3. You should get a ‘200 - OK’ response code

---

Pipedream setup - for queueing events

1. Sign up for a Pipedream account: https://pipedream.com/auth/signup

2. Once you’re logged in open the left-hand sidebar (it will auto-open if your browser window is large enough)

   1. Click on ‘Sources’

   2. Click on ‘New +’ in the top right corner

1. Click on the ‘HTTP/Webhook’ option

2. Select ‘New Requests’

   1. Click on ‘Response Body’ and change it to "[accepted]"

   2. Add a name to your new endpoint

   3. Click ‘Create source’

1. You will see a screen similar to this:

   1. Confirm the response body shows "[accepted]"

   2. Copy endpoint URL

   3. Click ‘Create Workflow’

1. Leave the workflow open.

   1. Open a new browser tab and go to the Adyen Customer portal

   2. Change your Webhook URL configuration in the Adyen Customer portal

1. Test configuration and make sure you get a ‘200 - OK’ response code from Pipedream

   1. see step 6 in Adyen configuration

2. Go back to your workflow in Pipedream

   1. Click ‘Select event…’ and select an event

1. You should receive a success message and an export including all of the POST contents

   1. Review this info to make sure you’re receiving the appropriate test POST

   2. Click ‘Continue’

2. This will add a step to your workflow

   1. Select ‘HTTP/Webhook’ again

1. Select ‘Send an HTTP Request for any HTTP/Webhook API’

2. Set the Request Configuration

   1. change Auth to ‘none’ in Auth tab

   2. Request: POST

   3. URL: ngrok tunnel from step 6 of ngrok Setup

1. add auth header

   1. Name: “authorization”

   2. Value: Click on the box labeled “Value…” to get a dropdown with all of the data from the event we received from the Adyen test earlier. Click on “select path” next to “authorization” to populate the field

1. add Body

   1. Key: “live”

      Value: see image below

   2. Key: “notificationItems”

      Value: see image below

1. Click Test and you should return a ‘Success’ message and return value of [accepted]

   

2. Do NOT “Deploy” because you will then be accepting all notifications posted from all environments. You’re only allowed 333 invocations a day with a free pipedream account and the # of POSTs you receive will be much higher than that.

3. When you checkout from a local environment you will see a new POST event in the trigger step of our workflow that you can select. After selecting, click ‘Test workflow’ to update your local environment with the appropriate data.

1. ensure that your local environment is updated as expected.

---

Additional Notes/Limitations

ngrok Tunnel

1. The ngrok tunnel is unstable and has to be restarted often on Windows environments.

2. When the ngrok tunnel is restarted it will generate a new URL every time. This has to be updated in Pipedream or in the Adyen configuration every time it restarts.

3. In Ubuntu the tunnel seems to be much more stable but will have to remain open in a terminal window.

4. Unsure of the reliability on Mac.

Pipedream Connection

1. Can’t be automated completely because all POSTs are sent from Adyen to each endpoint.

   1. This could use further investigation to determine if there is a way to push only the notifications for the respective environment from Adyen, or if there is a way to filter these