How to Integrate Worldpay with V0

1// app/api/worldpay/orders/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const WP_CLIENT_ID = process.env.WORLDPAY_CLIENT_ID;
5const WP_CLIENT_SECRET = process.env.WORLDPAY_CLIENT_SECRET;
6const WP_ENTITY_ID = process.env.WORLDPAY_ENTITY_ID;
7const WP_API_BASE = process.env.WORLDPAY_SANDBOX === 'true'
8  ? 'https://try.access.worldpay.com'
9  : 'https://access.worldpay.com';
10
11let tokenCache: { token: string; expiresAt: number } | null = null;
12
13async function getAccessToken(): Promise<string> {
14  const now = Date.now();
15  if (tokenCache && tokenCache.expiresAt > now + 30000) {
16    return tokenCache.token;
17  }
18
19  const response = await fetch(`${WP_API_BASE}/token`, {
20    method: 'POST',
21    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
22    body: new URLSearchParams({
23      grant_type: 'client_credentials',
24      client_id: WP_CLIENT_ID!,
25      client_secret: WP_CLIENT_SECRET!,
26    }).toString(),
27  });
28
29  if (!response.ok) {
30    throw new Error(`Worldpay auth failed: ${response.status}`);
31  }
32
33  const data = await response.json();
34  tokenCache = {
35    token: data.access_token,
36    expiresAt: now + data.expires_in * 1000,
37  };
38
39  return tokenCache.token;
40}
41
42export async function POST(request: NextRequest) {
43  if (!WP_CLIENT_ID || !WP_CLIENT_SECRET || !WP_ENTITY_ID) {
44    return NextResponse.json({ error: 'Worldpay not configured' }, { status: 500 });
45  }
46
47  let body: {
48    paymentToken: string;
49    amount: number;
50    currency: string;
51    orderDescription: string;
52    customerEmail?: string;
53  };
54
55  try {
56    body = await request.json();
57  } catch {
58    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
59  }
60
61  if (!body.paymentToken || !body.amount) {
62    return NextResponse.json(
63      { error: 'paymentToken and amount are required' },
64      { status: 400 }
65    );
66  }
67
68  try {
69    const token = await getAccessToken();
70
71    const response = await fetch(`${WP_API_BASE}/api/payments/v6/orders`, {
72      method: 'POST',
73      headers: {
74        Authorization: `Bearer ${token}`,
75        'Content-Type': 'application/vnd.worldpay.payments-v6+json',
76        Accept: 'application/vnd.worldpay.payments-v6+json',
77      },
78      body: JSON.stringify({
79        transactionReference: `order-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
80        merchant: { entity: WP_ENTITY_ID },
81        instruction: {
82          method: 'card',
83          paymentInstrument: {
84            type: 'plain',
85            cardHolderName: body.customerEmail,
86            // Note: paymentToken from Worldpay.js replaces card details
87            // For tokenized payments, use 'paymentInstrument.type: "checkout"'
88          },
89          value: {
90            currency: body.currency || 'GBP',
91            amount: Math.round(body.amount * 100), // Convert to minor currency units
92          },
93        },
94        narrative: { line1: body.orderDescription || 'Order payment' },
95        customer: body.customerEmail ? { homePhone: '', email: body.customerEmail } : undefined,
96      }),
97    });
98
99    const orderData = await response.json();
100
101    if (orderData.outcome === 'AUTHORIZED') {
102      return NextResponse.json({
103        success: true,
104        orderCode: orderData.orderCode || orderData.transactionReference,
105        outcome: orderData.outcome,
106      });
107    } else {
108      return NextResponse.json(
109        { error: `Payment ${orderData.outcome}`, outcome: orderData.outcome },
110        { status: 402 }
111      );
112    }
113  } catch (error) {
114    const message = error instanceof Error ? error.message : 'Unknown error';
115    console.error('Worldpay payment failed:', message);
116    return NextResponse.json(
117      { error: 'Payment processing failed', details: message },
118      { status: 500 }
119    );
120  }
121}

1// components/WorldpayCheckout.tsx ('use client')
2'use client';
3import { useEffect, useRef, useState } from 'react';
4import Script from 'next/script';
5
6declare global {
7  interface Window {
8    Worldpay: {
9      setup: (options: Record<string, unknown>) => { tokenize: () => Promise<string> };
10    };
11  }
12}
13
14interface WorldpayCheckoutProps {
15  amount: number;
16  currency: string;
17  onSuccess: (orderCode: string) => void;
18}
19
20export function WorldpayCheckout({ amount, currency, onSuccess }: WorldpayCheckoutProps) {
21  const worldpayRef = useRef<ReturnType<typeof window.Worldpay.setup> | null>(null);
22  const [error, setError] = useState('');
23  const [loading, setLoading] = useState(false);
24
25  const initWorldpay = () => {
26    if (!window.Worldpay) return;
27
28    worldpayRef.current = window.Worldpay.setup({
29      entityId: process.env.NEXT_PUBLIC_WORLDPAY_ENTITY_ID,
30      container: '#worldpay-card-element',
31      form: '#checkout-form',
32      paymentMethod: 'card',
33      styles: {
34        // Custom styles for the card input
35        base: 'font-family: system-ui; font-size: 14px; color: #1f2937;',
36        invalid: 'color: #dc2626;',
37      },
38    });
39  };
40
41  const handleSubmit = async (e: React.FormEvent) => {
42    e.preventDefault();
43    setError('');
44    setLoading(true);
45
46    try {
47      if (!worldpayRef.current) throw new Error('Payment form not initialized');
48
49      const token = await worldpayRef.current.tokenize();
50
51      const response = await fetch('/api/worldpay/orders', {
52        method: 'POST',
53        headers: { 'Content-Type': 'application/json' },
54        body: JSON.stringify({ paymentToken: token, amount, currency }),
55      });
56
57      const data = await response.json();
58
59      if (data.success) {
60        onSuccess(data.orderCode);
61      } else {
62        setError(data.error || 'Payment was declined. Please try a different card.');
63      }
64    } catch (err) {
65      setError('An error occurred. Please try again.');
66    } finally {
67      setLoading(false);
68    }
69  };
70
71  return (
72    <>
73      <Script
74        src="https://access.worldpay.com/access-sdk/js/latest/access-sdk.min.js"
75        onLoad={initWorldpay}
76        strategy="lazyOnload"
77      />
78      <form id="checkout-form" onSubmit={handleSubmit}>
79        <div id="worldpay-card-element" className="border rounded-md p-3 min-h-[120px]" />
80        {error && <p className="text-red-600 text-sm mt-2">{error}</p>}
81        <button
82          type="submit"
83          disabled={loading}
84          className="w-full mt-4 bg-emerald-600 text-white py-3 rounded-md font-medium disabled:opacity-50"
85        >
86          {loading ? 'Processing...' : `Pay ${new Intl.NumberFormat('en-GB', { style: 'currency', currency }).format(amount)}`}
87        </button>
88      </form>
89    </>
90  );
91}