Checkout: forward only the checkout fields, show clear errors, fix the contact form (#16)

Co-authored-by: Michael Czechowski <mail@librete.ch>

pages/checkout/1.vue

@@ -29,7 +29,7 @@
 
 				<div v-if="uuid">
 					<form @submit.prevent="submit" class="flex flex-col gap-12">
-						<Input label="E-Mail-Adresse" v-model="emailAddress" :required="true" autocomplete="email" />
+						<Input label="E-Mail-Adresse" v-model="emailAddress" type="email" :required="true" autocomplete="email" />
 
 						<label class="flex gap-4 text-sm cursor-pointer">
 							<input v-model="acceptedTermsAndConditions" required type="checkbox" class="w-4 cursor-pointer" />
@@ -44,6 +44,10 @@
 
 						<hr />
 
+						<div v-if="errorMessage" class="p-4 lg:p-8 text-center mx-auto rounded-md bg-rose-100" role="alert" data-e2e="checkout-error">
+							<span class="text-rose-800">{{ errorMessage }}</span>
+						</div>
+
 						<Button type="submit" classes="w-full" :is-pending="formSubmitIsPending">Weiter zur Lieferadresse</Button>
 					</form>
 				</div>
@@ -60,6 +64,7 @@
 
 <script setup lang="ts">
 import { trackEvent } from "~/utils/trackEvent";
+import { checkoutErrorMessageFor } from "~/utils/checkoutError";
 
 const COOKIE_CONSENT_KEY = "shop:cookie-consent";
 
@@ -68,6 +73,7 @@ const cart = useCart();
 const emailAddress = ref("");
 const acceptedTermsAndConditions = ref(false);
 const formSubmitIsPending = ref(false);
+const errorMessage = ref("");
 
 const uuid = computed(() => cart.uuid.value);
 
@@ -120,6 +126,7 @@ async function submit() {
 
 	try {
 		formSubmitIsPending.value = true;
+		errorMessage.value = "";
 
 		// Use cart.update() to sync local state after API call
 		await cart.update({
@@ -138,6 +145,7 @@ async function submit() {
 		navigateTo("/checkout/2");
 	} catch (error) {
 		console.error("Error submitting email address", error);
+		errorMessage.value = checkoutErrorMessageFor(error);
 	} finally {
 		formSubmitIsPending.value = false;
 	}

pages/checkout/2.vue

@@ -97,6 +97,10 @@
 
 					<hr class="my-12" />
 
+					<div v-if="errorMessage" class="p-4 lg:p-8 text-center mx-auto rounded-md bg-rose-100" role="alert" data-e2e="checkout-error">
+						<span class="text-rose-800">{{ errorMessage }}</span>
+					</div>
+
 					<div class="mt-12">
 						<Button classes="w-full" type="submit" :is-pending="formSubmitIsPending">Weiter zur Zahlung</Button>
 					</div>
@@ -110,6 +114,7 @@
 import type { Address, StructuredAddress } from "~/types";
 import { trackEvent } from "~/utils/trackEvent";
 import { numberFormatter } from "~/utils/numberFormatter";
+import { checkoutErrorMessageFor } from "~/utils/checkoutError";
 
 const cart = useCart();
 const shopApi = useShopApi();
@@ -134,6 +139,7 @@ const displayState = computed(() => {
 });
 const showOptionalDeliveryAddress = ref(false);
 const formSubmitIsPending = ref(false);
+const errorMessage = ref("");
 const deliveryMethods = ref<any[]>([]);
 const selectedDeliveryMethod = ref<number | null>(null);
 
@@ -243,6 +249,7 @@ async function submit() {
 
 	try {
 		formSubmitIsPending.value = true;
+		errorMessage.value = "";
 
 		// Use cart.update() to sync local state after API call
 		await cart.update({
@@ -262,6 +269,7 @@ async function submit() {
 		navigateTo("/checkout/3");
 	} catch (error) {
 		console.error("Error submitting address form:", error);
+		errorMessage.value = checkoutErrorMessageFor(error);
 	} finally {
 		formSubmitIsPending.value = false;
 	}

pages/checkout/3.vue

@@ -64,7 +64,7 @@
 					<div v-else>
 						<div v-if="!hasPaymentError" id="paypal-button-container" class="payment sticky top-4" ref="paymentContainer"></div>
 						<div v-else class="p-4 lg:p-8 text-center mx-auto rounded-md bg-rose-100" data-e2e="payment-error">
-							<span class="text-rose-800">Es ist ein Fehler aufgetreten. Bitte versuche es erneut.</span>
+							<span class="text-rose-800">{{ paymentErrorMessage || "Es ist ein Fehler aufgetreten. Bitte versuche es erneut." }}</span>
 						</div>
 
 						<!-- Trust signals -->
@@ -190,6 +190,8 @@
 <script setup lang="ts">
 import { numberFormatter } from "~/utils/numberFormatter";
 import { trackEvent } from "~/utils/trackEvent";
+import { checkoutErrorMessageFor } from "~/utils/checkoutError";
+import { isAlreadyCaptured } from "~/utils/captureResponse";
 import type { Order } from "~/types";
 
 const config = useRuntimeConfig();
@@ -197,6 +199,7 @@ const shopApi = useShopApi();
 const CART_UUID_KEY = "shop:cart";
 
 const hasPaymentError = ref(false);
+const paymentErrorMessage = ref("");
 const hasOrderError = ref(false);
 const hasAuthorisedPayment = ref(false);
 const orderData = ref<Order>({} as Order);
@@ -298,6 +301,7 @@ async function initializePayPalButtons() {
 						return response.id;
 					} catch (error) {
 						console.error("Error creating PayPal order:", error);
+						paymentErrorMessage.value = checkoutErrorMessageFor(error);
 						hasPaymentError.value = true;
 						trackEvent("checkout-payment-error", {
 							stage: "create-order",
@@ -309,10 +313,14 @@ async function initializePayPalButtons() {
 				onApprove: async (data) => {
 					try {
 						// Capture payment server-side (CMS captures via PayPal server SDK and updates order)
-						const capturedOrder = await shopApi.capturePayment(orderData.value.uuid, data.orderID!);
+						const captured = await shopApi.capturePayment(orderData.value.uuid, data.orderID!);
 
-						if (capturedOrder.paymentAuthorised) {
-							orderData.value = capturedOrder;
+						if (isAlreadyCaptured(captured)) {
+							// An earlier capture of this PayPal order went through: reload the paid order, keeping the shown one if that fails.
+							orderData.value = await shopApi.getOrder(orderData.value.uuid).catch(() => orderData.value);
+							await handleSuccessfulPayment();
+						} else if (captured.paymentAuthorised) {
+							orderData.value = captured;
 							await handleSuccessfulPayment();
 						} else {
 							console.error("Payment capture did not result in authorisation");
@@ -324,6 +332,7 @@ async function initializePayPalButtons() {
 						}
 					} catch (error) {
 						console.error("Error capturing payment:", error);
+						paymentErrorMessage.value = checkoutErrorMessageFor(error);
 						hasPaymentError.value = true;
 						trackEvent("checkout-payment-error", {
 							stage: "capture-exception",