Skip to content

Commit 890a135

Browse files
authored
Merge pull request #292 from ayodejidev/add-support-for-codespaces
Add support for codespaces
2 parents 414bf75 + a144669 commit 890a135

File tree

4 files changed

+161
-79
lines changed

4 files changed

+161
-79
lines changed

.devcontainer/devcontainer.json

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "Adyen PHP Online Payments",
3+
"image": "mcr.microsoft.com/devcontainers/base:ubuntu",
4+
5+
"features": {
6+
"ghcr.io/devcontainers/features/php:1": {
7+
"version": "8.1"
8+
},
9+
"ghcr.io/devcontainers/features/node:1": {
10+
"version": "18"
11+
}
12+
},
13+
14+
"customizations": {
15+
"vscode": {
16+
"extensions": [
17+
"felixfbecker.php-debug",
18+
"bmewburn.vscode-intelephense-client",
19+
"ms-vscode.vscode-typescript-next"
20+
]
21+
}
22+
},
23+
24+
"postCreateCommand": "bash .devcontainer/setup.sh",
25+
26+
"forwardPorts": [8080],
27+
28+
"portsAttributes": {
29+
"8080": {
30+
"label": "Laravel App",
31+
"onAutoForward": "notify"
32+
}
33+
},
34+
35+
"remoteEnv": {
36+
"APP_URL": "http://localhost:8080"
37+
},
38+
39+
"remoteUser": "vscode"
40+
}
41+

.devcontainer/setup.sh

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
#!/bin/bash
2+
# Adyen PHP Online Payments - Codespaces Setup Script
3+
set -euo pipefail
4+
5+
echo "Setting up Adyen PHP Online Payments..."
6+
7+
# Install Composer if not present
8+
if ! command -v composer &> /dev/null; then
9+
echo "Installing Composer..."
10+
curl -sS https://getcomposer.org/installer | php
11+
sudo mv composer.phar /usr/local/bin/composer
12+
fi
13+
14+
# Copy environment file if it doesn't exist
15+
if [ ! -f .env ]; then
16+
echo "Creating .env file from .env.example..."
17+
cp .env.example .env
18+
fi
19+
20+
# Install PHP dependencies
21+
echo "Installing PHP dependencies..."
22+
composer install
23+
24+
# Generate application key if not already set
25+
if ! grep -q "APP_KEY=base64:" .env 2>/dev/null; then
26+
echo "Generating application key..."
27+
php artisan key:generate --ansi
28+
fi
29+
30+
echo ""
31+
echo "Setup complete!"
32+
echo ""
33+
echo "Before running the server, set the following environment variables:"
34+
echo " - ADYEN_API_KEY"
35+
echo " - ADYEN_MERCHANT_ACCOUNT"
36+
echo " - ADYEN_CLIENT_KEY"
37+
echo " - ADYEN_HMAC_KEY"
38+
echo ""
39+
echo "You can set these by:"
40+
echo " 1. Creating a .env file in the project root"
41+
echo " 2. Using Codespace secrets (Settings → Secrets and variables → Codespaces)"
42+
echo " 3. Exporting them in the terminal"
43+
echo ""
44+
echo "Then run: php artisan serve --port=8080 --host=0.0.0.0"

.gitpod.yml

Lines changed: 0 additions & 25 deletions
This file was deleted.

README.md

Lines changed: 76 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
# Adyen [online payment](https://docs.adyen.com/online-payments) integration demos
22

3+
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new/adyen-examples/adyen-php-online-payments?ref=main&devcontainer_path=.devcontainer%2Fdevcontainer.json)
4+
35
[![PHP Composer](https://github.com/adyen-examples/adyen-php-online-payments/actions/workflows/build.yml/badge.svg)](https://github.com/adyen-examples/adyen-php-online-payments/actions/workflows/build.yml)
46
[![E2E (Playwright)](https://github.com/adyen-examples/adyen-php-online-payments/actions/workflows/e2e.yml/badge.svg)](https://github.com/adyen-examples/adyen-php-online-payments/actions/workflows/e2e.yml)
57

68
## Details
79

810
This repository includes examples of PCI-compliant UI integrations for online payments with Adyen. Within this demo app, you'll find a simplified version of an e-commerce website, complete with commented code to highlight key features and concepts of Adyen's API. Check out the underlying code to see how you can integrate Adyen to give your shoppers the option to pay with their preferred payment methods, all in a seamless checkout experience.
9-
10-
![Card checkout demo](public/img/cardcheckout.gif)
1111

12-
## Supported Integrations
12+
![Card checkout demo](public/img/cardcheckout.gif)
1313

1414
[Online payments](https://docs.adyen.com/online-payments) **Laravel 9** demos of the following client-side integrations are currently available in this repository:
1515

@@ -26,14 +26,57 @@ This repository includes examples of PCI-compliant UI integrations for online pa
2626
- SEPA Direct Debit
2727
- SOFORT
2828

29-
3029
Each demo leverages Adyen's API Library for PHP ([GitHub](https://github.com/Adyen/adyen-php-api-library) | [Docs](https://docs.adyen.com/development-resources/libraries#php)).
3130

3231
## Requirements
3332

3433
PHP 8.0.0+
3534

36-
## Installation
35+
## Quick Start with GitHub Codespaces
36+
37+
This repository is configured to work with [GitHub Codespaces](https://github.com/features/codespaces). Click the badge above to launch a Codespace with all dependencies pre-installed.
38+
39+
For detailed setup instructions, see the [GitHub Codespaces Instructions](https://github.com/adyen-examples/.github/blob/main/pages/codespaces-instructions.md).
40+
41+
### Prerequisites
42+
43+
Before running any example, you'll need to set up the following environment variables in your Codespace:
44+
45+
- `ADYEN_API_KEY` - Your Adyen API key
46+
- `ADYEN_CLIENT_KEY` - Your Adyen client key
47+
- `ADYEN_MERCHANT_ACCOUNT` - Your Adyen merchant account
48+
- `ADYEN_HMAC_KEY` - Your Adyen HMAC key for webhook validation
49+
50+
### Setting Environment Variables
51+
52+
You can set environment variables using one of the following methods:
53+
54+
**Option 1: Create a `.env` file in the project root**
55+
56+
```bash
57+
ADYEN_API_KEY="your_api_key"
58+
ADYEN_CLIENT_KEY="your_client_key"
59+
ADYEN_MERCHANT_ACCOUNT="your_merchant_account"
60+
ADYEN_HMAC_KEY="your_hmac_key"
61+
```
62+
63+
**Option 2: Use Codespace secrets**
64+
65+
1. Open your Codespace
66+
2. Go to Settings → Secrets and variables → Codespaces
67+
3. Add each required environment variable
68+
4. Restart your Codespace for changes to take effect
69+
70+
**Option 3: Set them in the terminal**
71+
72+
```bash
73+
export ADYEN_API_KEY="your_api_key"
74+
export ADYEN_CLIENT_KEY="your_client_key"
75+
export ADYEN_MERCHANT_ACCOUNT="your_merchant_account"
76+
export ADYEN_HMAC_KEY="your_hmac_key"
77+
```
78+
79+
## Local Installation
3780

3881
1. Clone this repo:
3982

@@ -49,78 +92,57 @@ composer install
4992

5093
## Usage
5194

52-
1. Rename **.env.example** to **.env**
95+
1. Create a `./.env` file with your [API key](https://docs.adyen.com/user-management/how-to-get-the-api-key), [Client Key](https://docs.adyen.com/user-management/client-side-authentication) - Remember to add `http://localhost:8080` as an origin for client key, and merchant account name (all credentials are in string format):
5396

54-
2. Set environment variables for the required configuration ([API key](https://docs.adyen.com/user-management/how-to-get-the-api-key), [Client Key](https://docs.adyen.com/user-management/client-side-authentication), and merchant account name)
55-
56-
On linux that looks like this :
97+
```bash
98+
# server-side env variables
99+
ADYEN_API_KEY="your_API_key_here"
100+
ADYEN_MERCHANT_ACCOUNT="your_merchant_account_here"
101+
ADYEN_HMAC_KEY="yourNotificationSetupHMACkey"
57102

58-
```
59-
export ADYEN_API_KEY=yourAdyenApiKey
60-
export ADYEN_MERCHANT_ACCOUNT=yourAdyenMerchantAccount
61-
export ADYEN_CLIENT_KEY=yourAdyenClientKey
62-
export ADYEN_HMAC_KEY=yourHmacKey
103+
# client-side env variables
104+
ADYEN_CLIENT_KEY="your_client_key_here"
63105
```
64106

65-
3. Start the server:
107+
2. Generate application key and start the server:
66108

67-
```
68-
php artisan key:generate && php artisan serve
109+
```bash
110+
php artisan key:generate && php artisan serve --port=8080
69111
```
70112

71-
4. Visit [http://localhost:8080/](http://localhost:8080/) (**./resources/views/pages/index.blade.php**) to select an integration type.
113+
3. Visit [http://localhost:8080/](http://localhost:8080/) to select an integration type.
72114

73115
To try out integrations with test card numbers and payment method details, see [Test card numbers](https://docs.adyen.com/development-resources/test-cards/test-card-numbers).
74116

75-
## Testing webhooks
117+
**Note**
76118

77-
Webhooks deliver asynchronous notifications and it is important to test them during the setup of your integration. You can find more information about webhooks in [this detailed blog post](https://www.adyen.com/blog/Integrating-webhooks-notifications-with-Adyen-Checkout).
119+
The demo supports cancellation and refunds, processing the incoming [Adyen webhook notifications](https://docs.adyen.com/development-resources/webhooks). Make sure webhooks are enabled and processed (see below).
78120

79-
This sample application provides a simple webhook integration exposed at `/api/webhooks/notifications`. For it to work, you need to:
121+
# Webhooks
80122

81-
1. Provide a way for the Adyen platform to reach your running application
82-
2. Add a Standard webhook in your Customer Area
123+
Webhooks deliver asynchronous notifications about the payment status and other events that are important to receive and process.
83124

84-
### Making your server reachable
125+
You can find more information about webhooks in [this blog post](https://www.adyen.com/blog/Integrating-webhooks-notifications-with-Adyen-Checkout).
85126

86-
Your endpoint that will consume the incoming webhook must be publicly accessible.
127+
### Webhook setup
87128

88-
There are typically 2 options:
89-
* deploy on your own cloud provider
90-
* expose your localhost with tunneling software (i.e. ngrok)
129+
In the Customer Area under the `Developers → Webhooks` section, [create](https://docs.adyen.com/development-resources/webhooks/#set-up-webhooks-in-your-customer-area) a new `Standard webhook`.
91130

92-
#### Option 1: cloud deployment
93-
If you deploy on your cloud provider (or your own public server) the webhook URL will be the URL of the server
94-
```
95-
https://{cloud-provider}/api/webhooks/notifications
96-
```
131+
A good practice is to set up basic authentication, copy the generated HMAC Key and set it as an environment variable. The application will use this to verify the [HMAC signatures](https://docs.adyen.com/development-resources/webhooks/verify-hmac-signatures/).
97132

98-
#### Option 2: localhost via tunneling software
99-
If you use a tunneling service like [ngrok](ngrok) the webhook URL will be the generated URL (ie `https://c991-80-113-16-28.ngrok.io`)
133+
Make sure the webhook is **enabled**, so it can receive notifications.
100134

101-
```bash
102-
$ ngrok http 8080
103-
104-
Session Status online
105-
Account ############
106-
Version #########
107-
Region United States (us)
108-
Forwarding http://c991-80-113-16-28.ngrok.io -> http://localhost:8080
109-
Forwarding https://c991-80-113-16-28.ngrok.io -> http://localhost:8080
110-
```
135+
### Expose an endpoint
136+
137+
This demo provides a simple webhook implementation exposed at `/api/webhooks/notifications` that shows you how to receive, validate and consume the webhook payload.
111138

112-
**Note:** when restarting ngrok a new URL is generated, make sure to **update the Webhook URL** in the Customer Area
139+
### Test your webhook
113140

114-
### Set up a webhook
141+
The following webhooks `events` should be enabled:
115142

116-
* In the Customer Area go to Developers -> Webhooks and create a new 'Standard notification' webhook.
117-
* Enter the URL of your application/endpoint (see options [above](#making-your-server-reachable))
118-
* Define username and password for Basic Authentication
119-
* Generate the HMAC Key
120-
* Optionally, in Additional Settings, add the data you want to receive. A good example is 'Payment Account Reference'.
121-
* Make sure the webhook is **Enabled** (therefore it can receive the notifications)
143+
* **AUTHORISATION**
122144

123-
That's it! Every time you perform a new payment, your application will receive a notification from the Adyen platform.
145+
To make sure that the Adyen platform can reach your application, we have written a [Webhooks Testing Guide](https://github.com/adyen-examples/.github/blob/main/pages/webhooks-testing.md) that explores several options on how you can easily achieve this (e.g. running on localhost or cloud).
124146

125147
## Contributing
126148

0 commit comments

Comments
 (0)