add auth/capture flow

src/app/components/form/address.tsx

@@ -156,11 +156,14 @@ export default async function Address() {
                     as="label"
                     size="2"
                 >
-                    <Flex gap="2">
+                    <Flex
+                        gap="2"
+                        direction="column"
+                    >
                         <Switch
                             defaultChecked
                             radius="full"
-                        />{' '}
+                        />
                         Shipping address is the same as my billing address
                     </Flex>
                 </Text>

src/app/components/form/methods/componentpaymentmethods.tsx

@@ -10,6 +10,7 @@ import {
     Skeleton,
     Code,
     Box,
+    Switch,
 } from '@radix-ui/themes';
 
 import React, { Suspense, useEffect, useRef, useState } from 'react';
@@ -88,6 +89,37 @@ export default function ComponentPaymentMethods() {
                                 <Code variant="ghost">2223 0000 1047 9399</Code>
                             </Callout.Text>
                         </Callout.Root>
+                        <Separator
+                            my="3"
+                            size="4"
+                        />
+                        <Flex>
+                            <Text
+                                as="label"
+                                size="2"
+                            >
+                                <Flex
+                                    gap="2"
+                                    direction="column"
+                                >
+                                    <Flex gap="2">
+                                        <Switch
+                                            radius="full"
+                                            name="captureMode"
+                                            value={'manual'}
+                                        />
+                                        Authorize payment
+                                    </Flex>
+                                    <Text
+                                        size="1"
+                                        color="gray"
+                                    >
+                                        Authorized payments need to be captured
+                                        later
+                                    </Text>
+                                </Flex>
+                            </Text>
+                        </Flex>
                     </Flex>
                 </Card>
             </RadioGroup.Root>

src/app/components/ui/paymentoverview.tsx

@@ -12,19 +12,28 @@ import {
     Dialog,
     ScrollArea,
     Text,
-    Heading,
 } from '@radix-ui/themes';
 import StateBadge from './orderstatebadge';
 
 // Routing
 import Link from 'next/link';
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
 
 // Mollie API
-import { mollieGetPayment } from '@/app/lib/mollie';
+import { mollieGetPayment, mollieCapturePayment } from '@/app/lib/mollie';
 import { Payment } from '@mollie/api-client';
 
 export default async function PaymentOverview({ id }: { id: string }) {
+    // get details for this payment
     const payment: Payment = await mollieGetPayment(id);
+    // server function for capturing this payment if authorized
+    async function capturePayment() {
+        'use server';
+        await mollieCapturePayment(id);
+        revalidatePath('/payments/' + id);
+        redirect('/payments/' + id);
+    }
     return (
         <Flex
             justify="center"
@@ -128,6 +137,18 @@ export default async function PaymentOverview({ id }: { id: string }) {
                                 </Button>
                             </Link>
                         )}
+                        {payment.status == 'authorized' && (
+                            <form action={capturePayment}>
+                                <Button
+                                    size="1"
+                                    color="green"
+                                    variant="soft"
+                                    type="submit"
+                                >
+                                    Capture
+                                </Button>
+                            </form>
+                        )}
                     </Flex>
                 </Card>
             </Flex>

src/app/lib/mollie.ts

@@ -1,10 +1,13 @@
 'use server';
 
 import createMollieClient, {
+    CaptureMethod,
     Locale,
     Payment,
+    PaymentMethod,
     SequenceType,
 } from '@mollie/api-client';
+
 const apiKey = process.env.MOLLIE_API_KEY;
 const domain = process.env.DOMAIN || 'http://localhost:3000';
 const webhookUrl = process.env.WEBHOOK_URL || 'http://not.provided';
@@ -28,6 +31,7 @@ export async function mollieCreatePayment({
     country,
     payment_method,
     cardToken,
+    captureMode,
 }: {
     firstname: string;
     lastname: string;
@@ -37,8 +41,9 @@ export async function mollieCreatePayment({
     city: string;
     zip_code: string;
     country: string;
-    payment_method: string | undefined;
+    payment_method: PaymentMethod;
     cardToken?: string;
+    captureMode?: CaptureMethod;
 }) {
     // we need to construct the billingAdress object first as long as this isn't fixed:
     // https://github.com/mollie/mollie-api-node/issues/390#issuecomment-2467604847
@@ -107,9 +112,10 @@ export async function mollieCreatePayment({
         redirectUrl: domain + '/success',
         cancelUrl: domain,
         webhookUrl: webhookUrl,
-        method: payment_method as undefined, // undefined for now
+        method: payment_method,
         ...{ billingAddress },
         cardToken: cardToken,
+        captureMode: captureMode as CaptureMethod,
     });
     const redirectUrl = payment.getCheckoutUrl();
     return redirectUrl;
@@ -142,3 +148,13 @@ export async function mollieGetMethods() {
     });
     return methods;
 }
+
+// Capture a payment in full
+
+export async function mollieCapturePayment(id: string) {
+    console.log('Capturing payment with id: ' + id);
+    const capture = await mollieClient.paymentCaptures.create({
+        paymentId: id,
+    });
+    return capture;
+}

src/app/lib/server-actions.ts

@@ -2,10 +2,12 @@
 
 // Lib
 import { validateFormData, validateUrl } from '@/app/lib/validation';
-import { mollieCreatePayment } from '@/app/lib/mollie';
+import { mollieCreatePayment, mollieCapturePayment } from '@/app/lib/mollie';
+import { PaymentMethod, CaptureMethod } from '@mollie/api-client';
 
 // Next.js
 import { redirect } from 'next/navigation';
+import { revalidatePath } from 'next/cache';
 
 export async function createPayment(formData: FormData) {
     // This Server Action takes the form data, validates it and creates a payment
@@ -19,8 +21,9 @@ export async function createPayment(formData: FormData) {
         city: string;
         zip_code: string;
         country: string;
-        payment_method: string | undefined;
+        payment_method: PaymentMethod;
         cardToken?: string;
+        captureMode?: CaptureMethod;
     } = await validateFormData(formData);
 
     // Create a payment with the validated form data and retrieve the redirect URL

src/app/lib/validation.ts

@@ -2,6 +2,8 @@
 
 import { z } from 'zod';
 
+import { CaptureMethod, PaymentMethod } from '@mollie/api-client';
+
 export async function validateFormData(formData: FormData) {
     const form = Object.fromEntries(formData.entries());
 
@@ -26,8 +28,9 @@ export async function validateFormData(formData: FormData) {
             .string()
             .min(1, { message: 'Must be at least 1 character long.' }),
         country: z.string().length(2),
-        payment_method: z.string(),
+        payment_method: z.nativeEnum(PaymentMethod),
         cardToken: z.string().startsWith('tkn_').optional(),
+        captureMode: z.nativeEnum(CaptureMethod).optional(),
     });
 
     try {