How to Integrate Bolt.new with Worldpay

1# .env — Worldpay credentials for Bolt.new project
2# Test/Sandbox credentials (start with T_)
3WORLDPAY_SERVICE_KEY=T_S_your-test-service-key
4WORLDPAY_CLIENT_KEY=T_C_your-test-client-key
5
6# Your app's callback URLs (update after deploying)
7WORLDPAY_SUCCESS_URL=https://your-app.netlify.app/payment/success
8WORLDPAY_FAILURE_URL=https://your-app.netlify.app/payment/failure
9WORLDPAY_PENDING_URL=https://your-app.netlify.app/payment/pending
10WORLDPAY_CANCEL_URL=https://your-app.netlify.app/payment/cancel
11
12# For Next.js: process.env.WORLDPAY_SERVICE_KEY
13# For Vite: import.meta.env.VITE_WORLDPAY_CLIENT_KEY (client-side safe key only)

1// app/api/worldpay/create-payment/route.ts
2import { NextResponse } from 'next/server';
3
4const WORLDPAY_API_URL = 'https://api.worldpay.com/v1/orders';
5
6export async function POST(request: Request) {
7  const serviceKey = process.env.WORLDPAY_SERVICE_KEY;
8  if (!serviceKey) {
9    return NextResponse.json(
10      { error: 'Worldpay service key not configured' },
11      { status: 500 }
12    );
13  }
14
15  const { amount, currency = 'GBP', description, orderId } = await request.json();
16
17  const payload = {
18    token: serviceKey,
19    amount,
20    currencyCode: currency,
21    name: description,
22    orderDescription: description,
23    customerOrderCode: orderId,
24    orderType: 'ECOM',
25    is3DSOrder: true,
26    successUrl: process.env.WORLDPAY_SUCCESS_URL,
27    failureUrl: process.env.WORLDPAY_FAILURE_URL,
28    pendingUrl: process.env.WORLDPAY_PENDING_URL,
29    cancelUrl: process.env.WORLDPAY_CANCEL_URL,
30  };
31
32  const response = await fetch(WORLDPAY_API_URL, {
33    method: 'POST',
34    headers: {
35      'Content-Type': 'application/json',
36    },
37    body: JSON.stringify(payload),
38  });
39
40  if (!response.ok) {
41    const errorData = await response.json().catch(() => ({}));
42    return NextResponse.json(
43      { error: 'Worldpay API error', details: errorData },
44      { status: response.status }
45    );
46  }
47
48  const data = await response.json();
49
50  return NextResponse.json({
51    orderCode: data.orderCode,
52    redirectUrl: data.redirectURL,
53    paymentStatus: data.paymentStatus,
54  });
55}

1// components/PayWithWorldpay.tsx
2'use client';
3import { useState } from 'react';
4
5interface PayWithWorldpayProps {
6  amountInPence: number;
7  currency?: string;
8  description: string;
9  orderId: string;
10}
11
12export function PayWithWorldpay({
13  amountInPence,
14  currency = 'GBP',
15  description,
16  orderId,
17}: PayWithWorldpayProps) {
18  const [loading, setLoading] = useState(false);
19  const [error, setError] = useState<string | null>(null);
20
21  async function handlePayment() {
22    setLoading(true);
23    setError(null);
24
25    const response = await fetch('/api/worldpay/create-payment', {
26      method: 'POST',
27      headers: { 'Content-Type': 'application/json' },
28      body: JSON.stringify({
29        amount: amountInPence,
30        currency,
31        description,
32        orderId,
33      }),
34    });
35
36    if (!response.ok) {
37      const err = await response.json();
38      setError(err.error ?? 'Payment creation failed');
39      setLoading(false);
40      return;
41    }
42
43    const { redirectUrl } = await response.json();
44    // Redirect to Worldpay hosted payment page
45    window.location.href = redirectUrl;
46  }
47
48  return (
49    <div>
50      {error && (
51        <p className="text-red-600 mb-3 text-sm">{error}</p>
52      )}
53      <button
54        onClick={handlePayment}
55        disabled={loading}
56        className="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 w-full"
57      >
58        {loading ? 'Creating payment...' : `Pay £${(amountInPence / 100).toFixed(2)}`}
59      </button>
60      <p className="text-xs text-gray-500 mt-2 text-center">
61        Secured by Worldpay
62      </p>
63    </div>
64  );
65}

1// app/api/worldpay/notification/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { createClient } from '@supabase/supabase-js';
4
5export async function POST(request: NextRequest) {
6  // Worldpay sends notification as JSON or form-encoded
7  const contentType = request.headers.get('content-type') ?? '';
8  let notificationData: Record<string, string> = {};
9
10  if (contentType.includes('application/json')) {
11    notificationData = await request.json();
12  } else {
13    // Form-encoded notification
14    const body = await request.text();
15    const params = new URLSearchParams(body);
16    params.forEach((value, key) => { notificationData[key] = value; });
17  }
18
19  const { orderCode, paymentStatus, amount, currency } = notificationData;
20
21  if (!orderCode) {
22    return new Response('[OK]', { headers: { 'Content-Type': 'text/plain' } });
23  }
24
25  const supabase = createClient(
26    process.env.NEXT_PUBLIC_SUPABASE_URL!,
27    process.env.SUPABASE_SERVICE_ROLE_KEY!
28  );
29
30  const status = paymentStatus === 'SUCCESS' ? 'paid'
31    : paymentStatus === 'FAILED' ? 'failed'
32    : 'pending';
33
34  await supabase
35    .from('orders')
36    .update({
37      payment_status: status,
38      worldpay_order_code: orderCode,
39      updated_at: new Date().toISOString(),
40    })
41    .eq('id', orderCode);
42
43  // Worldpay REQUIRES '[OK]' response body to confirm receipt
44  return new Response('[OK]', {
45    status: 200,
46    headers: { 'Content-Type': 'text/plain' },
47  });
48}