How to Integrate Bolt.new with Sage Pay (Opayo)

1# .env — Opayo (Sage Pay) sandbox credentials
2# Found in sandbox Virtual Terminal → Settings → Merchant Auth
3OPAYO_VENDOR_NAME=your-vendor-name
4OPAYO_INTEGRATION_KEY=your-integration-key
5OPAYO_INTEGRATION_PASSWORD=your-integration-password
6
7# Sandbox base URL (change to pi.sagepay.com for production)
8OPAYO_BASE_URL=https://pi-test.sagepay.com/api/v1
9
10# Notification URL (update after deploying)
11OPAYO_NOTIFICATION_URL=https://your-app.netlify.app/api/opayo/notification
12OPAYO_SUCCESS_URL=https://your-app.netlify.app/payment/success
13OPAYO_FAILURE_URL=https://your-app.netlify.app/payment/failure
14
15# Opayo test card: 4929000000006 (Visa, success), any future expiry, CVV 123

1// app/api/opayo/register-transaction/route.ts
2import { NextResponse } from 'next/server';
3import { createClient } from '@supabase/supabase-js';
4
5function getOpayoAuth() {
6  const key = process.env.OPAYO_INTEGRATION_KEY!;
7  const password = process.env.OPAYO_INTEGRATION_PASSWORD!;
8  return `Basic ${Buffer.from(`${key}:${password}`).toString('base64')}`;
9}
10
11export async function POST(request: Request) {
12  const { amount, description, vendorTxCode, orderId } = await request.json();
13
14  const payload = {
15    transactionType: 'Payment',
16    paymentMethod: {
17      card: {
18        merchantSessionKey: '', // Not used in Server Integration
19      },
20    },
21    vendorTxCode,
22    amount,
23    currency: 'GBP',
24    description,
25    notificationURL: process.env.OPAYO_NOTIFICATION_URL,
26    customerFirstName: '',
27    customerLastName: '',
28    billingAddress: {
29      address1: '',
30      city: '',
31      postalCode: '',
32      country: 'GB',
33    },
34    apply3DSecure: 'UseMSPSetting',
35    applyAVSCVV: 'UseMSPSetting',
36  };
37
38  const response = await fetch(`${process.env.OPAYO_BASE_URL}/transactions`, {
39    method: 'POST',
40    headers: {
41      'Authorization': getOpayoAuth(),
42      'Content-Type': 'application/json',
43    },
44    body: JSON.stringify(payload),
45  });
46
47  const data = await response.json();
48
49  if (data.statusCode !== '0000') {
50    return NextResponse.json(
51      { error: data.statusDetail ?? 'Opayo registration failed', code: data.statusCode },
52      { status: 400 }
53    );
54  }
55
56  // Store transaction reference for notification verification
57  const supabase = createClient(
58    process.env.NEXT_PUBLIC_SUPABASE_URL!,
59    process.env.SUPABASE_SERVICE_ROLE_KEY!
60  );
61
62  await supabase
63    .from('orders')
64    .update({
65      opayo_vps_tx_id: data.transactionId,
66      opayo_security_key: data.merchantSessionKey ?? '',
67      payment_status: 'pending',
68    })
69    .eq('id', orderId);
70
71  return NextResponse.json({
72    nextUrl: data.nextURL,
73    vpsTxId: data.transactionId,
74  });
75}

1// components/PayWithOpayo.tsx
2'use client';
3import { useState } from 'react';
4
5interface PayWithOpayoProps {
6  amountInPence: number;
7  description: string;
8  orderId: string;
9}
10
11export function PayWithOpayo({ amountInPence, description, orderId }: PayWithOpayoProps) {
12  const [loading, setLoading] = useState(false);
13  const [error, setError] = useState<string | null>(null);
14
15  async function handlePayment() {
16    setLoading(true);
17    setError(null);
18
19    const vendorTxCode = `${orderId}-${Date.now()}`;
20
21    const response = await fetch('/api/opayo/register-transaction', {
22      method: 'POST',
23      headers: { 'Content-Type': 'application/json' },
24      body: JSON.stringify({
25        amount: amountInPence,
26        description,
27        vendorTxCode,
28        orderId,
29      }),
30    });
31
32    const data = await response.json();
33
34    if (!response.ok || !data.nextUrl) {
35      setError(data.error ?? 'Failed to initialize payment');
36      setLoading(false);
37      return;
38    }
39
40    // Redirect to Opayo's hosted payment page
41    window.location.href = data.nextUrl;
42  }
43
44  return (
45    <div>
46      {error && (
47        <p className="text-red-600 text-sm mb-3 p-3 bg-red-50 rounded-lg">{error}</p>
48      )}
49      <button
50        onClick={handlePayment}
51        disabled={loading}
52        className="w-full bg-green-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-green-700 disabled:opacity-50 flex items-center justify-center gap-2"
53      >
54        {loading ? (
55          <><span className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full" />Preparing payment...</>
56        ) : (
57          `Pay £${(amountInPence / 100).toFixed(2)} securely with Opayo`
58        )}
59      </button>
60    </div>
61  );
62}

1// app/api/opayo/notification/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { createClient } from '@supabase/supabase-js';
4
5export async function POST(request: NextRequest) {
6  const body = await request.text();
7  const params = new URLSearchParams(body);
8
9  const status = params.get('Status') ?? '';
10  const vendorTxCode = params.get('VendorTxCode') ?? '';
11  const vpsTxId = params.get('VPSTxId') ?? '';
12  const statusDetail = params.get('StatusDetail') ?? '';
13
14  const supabase = createClient(
15    process.env.NEXT_PUBLIC_SUPABASE_URL!,
16    process.env.SUPABASE_SERVICE_ROLE_KEY!
17  );
18
19  const isPaid = status === 'OK';
20  // Extract order ID from VendorTxCode (format: orderId-timestamp)
21  const orderId = vendorTxCode.split('-').slice(0, -1).join('-');
22
23  await supabase
24    .from('orders')
25    .update({
26      payment_status: isPaid ? 'paid' : 'failed',
27      opayo_status: status,
28      opayo_status_detail: statusDetail,
29      paid_at: isPaid ? new Date().toISOString() : null,
30    })
31    .eq('id', orderId);
32
33  // Opayo requires this specific response format
34  const redirectUrl = isPaid
35    ? `${process.env.OPAYO_SUCCESS_URL}?order=${orderId}`
36    : `${process.env.OPAYO_FAILURE_URL}?order=${orderId}`;
37
38  // Opayo reads this response to know where to redirect the browser
39  const notificationResponse = [
40    'Status=OK',
41    `RedirectURL=${redirectUrl}`,
42    'StatusDetail=Transaction processed',
43  ].join('\r\n');
44
45  return new Response(notificationResponse, {
46    status: 200,
47    headers: { 'Content-Type': 'text/plain' },
48  });
49}