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

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

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",