How to Integrate Bolt.new with Adyen

1# .env — add to project root
2ADYEN_API_KEY=AQEyhmfxKIHdKL2bxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
3ADYEN_MERCHANT_ACCOUNT=YourCompanyECOM
4ADYEN_ENVIRONMENT=test
5ADYEN_CLIENT_KEY=test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

1// app/api/adyen/sessions/route.ts
2import { NextResponse } from 'next/server';
3
4interface AdyenSessionRequest {
5  amount: { value: number; currency: string };
6  merchantAccount: string;
7  countryCode: string;
8  returnUrl: string;
9  reference: string;
10  channel: string;
11}
12
13interface AdyenSessionResponse {
14  id: string;
15  sessionData: string;
16  amount: { value: number; currency: string };
17  expiresAt: string;
18}
19
20export async function POST(request: Request) {
21  const apiKey = process.env.ADYEN_API_KEY;
22  const merchantAccount = process.env.ADYEN_MERCHANT_ACCOUNT;
23  const environment = process.env.ADYEN_ENVIRONMENT || 'test';
24
25  if (!apiKey || !merchantAccount) {
26    return NextResponse.json(
27      { error: 'Adyen credentials not configured' },
28      { status: 500 }
29    );
30  }
31
32  const { amount, currency, countryCode, returnUrl } = await request.json();
33
34  const baseUrl =
35    environment === 'test'
36      ? 'https://checkout-test.adyen.com'
37      : 'https://checkout-live.adyen.com';
38
39  const payload: AdyenSessionRequest = {
40    amount: { value: amount, currency },
41    merchantAccount,
42    countryCode: countryCode || 'US',
43    returnUrl: returnUrl || `${process.env.NEXT_PUBLIC_BASE_URL}/checkout/result`,
44    reference: `order-${Date.now()}`,
45    channel: 'Web',
46  };
47
48  try {
49    const response = await fetch(`${baseUrl}/checkout/v71/sessions`, {
50      method: 'POST',
51      headers: {
52        'X-API-key': apiKey,
53        'Content-Type': 'application/json',
54      },
55      body: JSON.stringify(payload),
56    });
57
58    if (!response.ok) {
59      const error = await response.json();
60      return NextResponse.json(
61        { error: error.message || 'Adyen API error', adyenError: error },
62        { status: response.status }
63      );
64    }
65
66    const session: AdyenSessionResponse = await response.json();
67    return NextResponse.json({
68      sessionId: session.id,
69      sessionData: session.sessionData,
70    });
71  } catch (error) {
72    const message = error instanceof Error ? error.message : 'Unknown error';
73    return NextResponse.json({ error: message }, { status: 500 });
74  }
75}

1// app/checkout/page.tsx
2'use client';
3
4import { useEffect, useRef, useState } from 'react';
5import AdyenCheckout from '@adyen/adyen-web';
6import '@adyen/adyen-web/dist/adyen.css';
7import type { CoreOptions } from '@adyen/adyen-web/dist/types/core/types';
8
9type PaymentStatus = 'idle' | 'loading' | 'ready' | 'success' | 'failed' | 'error';
10
11export default function CheckoutPage() {
12  const dropinRef = useRef<HTMLDivElement>(null);
13  const [status, setStatus] = useState<PaymentStatus>('loading');
14  const [resultCode, setResultCode] = useState<string>('');
15
16  useEffect(() => {
17    let dropin: { unmount?: () => void } | null = null;
18
19    async function initCheckout() {
20      try {
21        // Step 1: Create payment session
22        const res = await fetch('/api/adyen/sessions', {
23          method: 'POST',
24          headers: { 'Content-Type': 'application/json' },
25          body: JSON.stringify({
26            amount: 2999,
27            currency: 'USD',
28            countryCode: 'US',
29            returnUrl: `${window.location.origin}/checkout/result`,
30          }),
31        });
32
33        if (!res.ok) throw new Error('Failed to create payment session');
34        const { sessionId, sessionData } = await res.json();
35
36        // Step 2: Initialize Adyen Checkout
37        const options: CoreOptions = {
38          environment: 'test',
39          clientKey: process.env.NEXT_PUBLIC_ADYEN_CLIENT_KEY!,
40          session: { id: sessionId, sessionData },
41          onPaymentCompleted: (result: { resultCode: string }) => {
42            setResultCode(result.resultCode);
43            setStatus(result.resultCode === 'Authorised' ? 'success' : 'failed');
44          },
45          onError: (error: Error) => {
46            console.error('Adyen error:', error);
47            setStatus('error');
48          },
49        };
50
51        const checkout = await AdyenCheckout(options);
52
53        if (dropinRef.current) {
54          dropin = checkout.create('dropin').mount(dropinRef.current);
55          setStatus('ready');
56        }
57      } catch (err) {
58        console.error(err);
59        setStatus('error');
60      }
61    }
62
63    initCheckout();
64    return () => { dropin?.unmount?.(); };
65  }, []);
66
67  if (status === 'success') {
68    return (
69      <div className="max-w-md mx-auto p-8 text-center">
70        <div className="text-5xl mb-4">✅</div>
71        <h2 className="text-2xl font-bold text-green-700">Payment Successful</h2>
72        <p className="text-gray-500 mt-2">Result: {resultCode}</p>
73      </div>
74    );
75  }
76
77  return (
78    <div className="max-w-md mx-auto p-8">
79      <h1 className="text-2xl font-bold mb-6">Checkout</h1>
80      <div className="bg-gray-50 rounded-lg p-4 mb-6">
81        <div className="flex justify-between">
82          <span>Order total</span>
83          <span className="font-semibold">$29.99</span>
84        </div>
85      </div>
86      {status === 'loading' && <p className="text-center text-gray-500">Loading payment methods...</p>}
87      {status === 'error' && <p className="text-red-600">Payment initialization failed. Please try again.</p>}
88      <div ref={dropinRef} />
89    </div>
90  );
91}

1// app/api/adyen/webhook/route.ts
2import { NextResponse } from 'next/server';
3
4interface AdyenNotificationItem {
5  NotificationRequestItem: {
6    eventCode: string;
7    success: string;
8    merchantReference: string;
9    pspReference: string;
10    amount: { value: number; currency: string };
11    additionalData?: { hmacSignature?: string };
12  };
13}
14
15// Simple HMAC verification — install @adyen/api-library for full verification
16function verifyHmac(item: AdyenNotificationItem['NotificationRequestItem'], hmacKey: string): boolean {
17  // In production, use @adyen/api-library HmacValidator
18  // This is a placeholder — implement proper HMAC validation
19  const signature = item.additionalData?.hmacSignature;
20  return !!signature && !!hmacKey; // Replace with real validation
21}
22
23export async function POST(request: Request) {
24  const hmacKey = process.env.ADYEN_HMAC_KEY;
25
26  try {
27    const body = await request.json();
28    const notifications: AdyenNotificationItem[] = body.notificationItems || [];
29
30    for (const notification of notifications) {
31      const item = notification.NotificationRequestItem;
32
33      if (hmacKey && !verifyHmac(item, hmacKey)) {
34        console.warn('Invalid HMAC signature for notification:', item.pspReference);
35        continue;
36      }
37
38      const isSuccess = item.success === 'true';
39      console.log(`Adyen webhook: ${item.eventCode}`, {
40        reference: item.merchantReference,
41        pspReference: item.pspReference,
42        success: isSuccess,
43        amount: item.amount,
44      });
45
46      switch (item.eventCode) {
47        case 'AUTHORISATION':
48          // Payment authorized — update order status to 'paid'
49          if (isSuccess) console.log(`Order ${item.merchantReference} paid`);
50          break;
51        case 'CAPTURE':
52          console.log(`Capture ${isSuccess ? 'succeeded' : 'failed'}: ${item.pspReference}`);
53          break;
54        case 'REFUND':
55          console.log(`Refund ${isSuccess ? 'processed' : 'failed'}: ${item.pspReference}`);
56          break;
57        case 'CHARGEBACK':
58          console.log(`Chargeback received for: ${item.merchantReference}`);
59          break;
60      }
61    }
62
63    // Adyen expects this exact response to stop retrying
64    return new Response('[accepted]', {
65      status: 200,
66      headers: { 'Content-Type': 'text/plain' },
67    });
68  } catch (error) {
69    console.error('Webhook processing error:', error);
70    return NextResponse.json({ error: 'Webhook processing failed' }, { status: 500 });
71  }
72}