This guide walks you through creating your first payment using Adyen’s Web Drop-in integration within Valpay.

The goal is to get a working end-to-end payment flow as quickly as possible.

Prerequisites

Before starting, make sure you have:

A Valpay-provisioned Adyen account
API credentials (API key, client key, merchant account)
A Store ID (provided by Valpay)
A backend capable of making HTTP requests
A frontend capable of running JavaScript

Step 1: Configure Your Application

Store your credentials securely (e.g., environment variables):

ADYEN_API_KEY=your_api_key
MERCHANT_ACCOUNT=your_merchant_account
CLIENT_KEY=your_client_key
STORE_ID=your_store_id
RETURN_URL=https://yourdomain.com/checkout/return

⚠️ Always include the Store ID in your requests—this is required for Valpay integrations.

Step 2: Create a Payment Session (Backend)

To use Drop-in, create a session via Adyen’s /sessions endpoint.

Example (pseudocode)

headers = {
  "X-API-Key": ADYEN_API_KEY
}

body = {
  "merchantAccount": MERCHANT_ACCOUNT,
  "amount": {"currency": "EUR", "value": 1000},
  "reference": "ORDER-12345",
  "returnUrl": RETURN_URL,
  "countryCode": "DE",
  "channel": "Web",
  "shopperInteraction": "Ecommerce",
  "store": STORE_ID,
  "additionalData": {
    "riskdata.skipRisk": "true"  # Test only
  }
}

response = http_post("https://checkout-test.adyen.com/v71/sessions", headers, body)

sessionId = response["id"]
sessionData = response["sessionData"]

Important

Use test endpoint in development
Always include store
In test, you may skip risk checks to avoid false declines

Step 3: Add Drop-in to Your Frontend

Include Adyen’s Web SDK:

<link rel="stylesheet" href="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/5.x.x/adyen.css" />
<script src="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/5.x.x/adyen.js"></script>

Step 4: Mount the Drop-in

const checkout = await AdyenCheckout({
  environment: 'test',
  clientKey: 'YOUR_CLIENT_KEY',
  session: {
    id: 'SESSION_ID',
    sessionData: 'SESSION_DATA'
  },
  paymentMethodsConfiguration: {
    card: {
      hasHolderName: true,
      holderNameRequired: true,
      billingAddressRequired: true
    }
  },
  onPaymentCompleted: (result) => {
    console.log('Payment completed', result);
  },
  onError: (error) => {
    console.error('Payment error', error);
  }
});

checkout.create('dropin').mount('#dropin-container');