@revenexx/cover 0.1.21 → 0.1.23

package/app/components/checkout/onepage/CheckoutPaymentSection.vue

@@ -70,6 +70,38 @@ const showPoNumber = computed(() => form.value.paymentMethod === "po_number");
 const showCostCenter = computed(() =>
 	form.value.paymentMethod === "cost_center"
 	&& (profile.value?.costCenters.length ?? 0) > 0);
+
+// PSP card entry (Stripe Elements, …). The provider's secure field is mounted
+// when a PSP card method is selected; the registry decides which provider needs
+// one, so this is generic (Novalnet/Mollie become drop-ins).
+const psp = usePspCheckout();
+const selectedOption = computed<PaymentOption | null>(() =>
+	paymentOptions.value.find(o => o.method === form.value.paymentMethod) ?? null);
+const needsCardField = computed(() => psp.requiresInstrument(selectedOption.value));
+const cardEl = ref<HTMLElement | null>(null);
+const cardError = ref<string | null>(null);
+
+async function syncCardField(): Promise<void> {
+	cardError.value = null;
+	await nextTick();
+	if (needsCardField.value && cardEl.value && selectedOption.value) {
+		try {
+			await psp.mount(cardEl.value, selectedOption.value);
+		}
+		catch (err) {
+			cardError.value = err instanceof Error ? err.message : String(err);
+		}
+	}
+	else {
+		psp.destroy();
+	}
+}
+
+if (import.meta.client) {
+	watch([needsCardField, () => form.value.paymentMethod], () => void syncCardField());
+	onMounted(() => void syncCardField());
+	onBeforeUnmount(() => psp.destroy());
+}
 </script>
 
 <template>
@@ -177,5 +209,12 @@ const showCostCenter = computed(() =>
 				:items="costCenterOptions"
 			/>
 		</div>
+
+		<!-- PSP secure card field (mounted client-side by the provider) -->
+		<div v-if="needsCardField" class="space-y-1.5">
+			<label class="block text-sm font-medium text-muted">{{ t('onepage.payment.cardDetails') }}</label>
+			<div ref="cardEl" class="w-full sm:max-w-sm p-3 rounded-lg border border-(--ui-border) bg-(--ui-bg)" />
+			<p v-if="cardError" class="text-sm text-error-500">{{ cardError }}</p>
+		</div>
 	</div>
 </template>

package/app/composables/useCheckoutOnePage.ts

@@ -55,6 +55,7 @@ export function useCheckoutOnePage() {
 	const { t } = useI18n();
 	const cart = useCartStore();
 	const { settings } = useB2BContext();
+	const psp = usePspCheckout();
 	const { data: profile, refresh: refreshProfile } = useCheckoutProfileSource();
 	const profileLoading = computed(() => profile.value === null);
 
@@ -315,12 +316,32 @@ export function useCheckoutOnePage() {
 		try {
 			await fetchSessionToken();
 
+			const payload = buildOrderPayload() as Record<string, unknown>;
+			// PSP card methods (Stripe Elements, …) tokenize client-side; only
+			// the single-use token reaches the BFF (PCI-safe). Self-managed and
+			// redirect methods carry no instrument here.
+			if (psp.hasActive()) {
+				const instrument = await psp.tokenize();
+				if (instrument) {
+					payload.paymentInstrument = instrument;
+				}
+			}
+
 			const order = await $fetch(checkoutApi.orders(), {
 				method: "POST",
-				body: buildOrderPayload(),
-			}) as { orderId: string; approvalRequired?: boolean; approvers?: string[] };
+				body: payload,
+			}) as { orderId: string; approvalRequired?: boolean; approvers?: string[]; requiresAction?: boolean; redirectUrl?: string };
+
+			// Redirect-based PSPs (3DS step-up, wallets, …) — one generic
+			// handler for every provider: hand the buyer to the PSP, return later.
+			if (order.requiresAction && order.redirectUrl) {
+				cart.clearCart();
+				window.location.href = order.redirectUrl;
+				return null;
+			}
 
 			cart.clearCart();
+			psp.destroy();
 			return {
 				orderId: order.orderId,
 				approvalRequired: order.approvalRequired ?? false,

package/app/composables/usePspCheckout.ts

@@ -0,0 +1,71 @@
+import { pspTokenizerFor } from "../payments/psp/registry";
+import type { PspTokenizer } from "../payments/psp/types";
+import type { PaymentOption } from "../interfaces/payment";
+
+/**
+ * Drives the per-PSP client-side tokenization in the checkout. The active
+ * tokenizer is a module-level singleton so the payment section (which mounts
+ * the secure card field) and the submit flow (which tokenizes on place-order)
+ * share one instance. Provider-agnostic: which PSP needs a field comes from
+ * the registry + /api/payment/psp-config.
+ */
+
+interface PspConfig {
+	providers: Record<string, { publishableKey: string; testMode: boolean }>;
+}
+
+// Client-only imperative handle; never used during SSR.
+let active: PspTokenizer | null = null;
+
+export function usePspCheckout() {
+	const { locale } = useI18n();
+	const { data: config } = useFetch<PspConfig>("/api/payment/psp-config", {
+		key: "psp-config",
+		default: () => ({ providers: {} }),
+	});
+
+	/** True when this method needs inline tokenization (PSP + registered + has a public key). */
+	function requiresInstrument(option?: PaymentOption | null): boolean {
+		if (!option || option.kind !== "psp" || !option.provider) {
+			return false;
+		}
+		if (!pspTokenizerFor(option.provider)) {
+			return false;
+		}
+		return Boolean(config.value?.providers[option.provider]?.publishableKey);
+	}
+
+	/** Mount the PSP's secure field into `el` for the chosen method. */
+	async function mount(el: HTMLElement, option: PaymentOption): Promise<void> {
+		destroy();
+		const factory = pspTokenizerFor(option.provider);
+		const pcfg = option.provider ? config.value?.providers[option.provider] : undefined;
+		if (!factory || !pcfg) {
+			return;
+		}
+		active = factory();
+		await active.mount({
+			publishableKey: pcfg.publishableKey,
+			testMode: pcfg.testMode,
+			el,
+			locale: locale.value,
+		});
+	}
+
+	/** True when a secure field is mounted and a token must be produced on submit. */
+	function hasActive(): boolean {
+		return active !== null;
+	}
+
+	/** Produce the single-use token from the mounted field (or null if none). */
+	async function tokenize(): Promise<{ token: string } | null> {
+		return active ? active.tokenize() : null;
+	}
+
+	function destroy(): void {
+		active?.destroy();
+		active = null;
+	}
+
+	return { config, requiresInstrument, mount, hasActive, tokenize, destroy };
+}

package/app/interfaces/payment.ts

@@ -16,4 +16,6 @@ export interface PaymentOption {
 	feeType?: "none" | "fixed" | "percent";
 	/** self_managed | psp — informational. */
 	kind?: string;
+	/** PSP provider code (e.g. "stripe") for psp methods — drives the FE tokenizer. */
+	provider?: string;
 }

package/app/payments/psp/registry.ts

@@ -0,0 +1,19 @@
+import { createStripeTokenizer } from "./stripe";
+import type { PspTokenizerFactory } from "./types";
+
+/**
+ * PSP tokenizer registry — the single extension point. A PSP that needs inline
+ * card collection gets a factory here; everything else (BFF token threading,
+ * the generic redirect/next_action handler, the order flow) is provider-
+ * agnostic. To add Novalnet/Mollie later: implement its tokenizer and add one
+ * line here.
+ */
+export const pspTokenizers: Record<string, PspTokenizerFactory> = {
+	stripe: createStripeTokenizer,
+	// novalnet: createNovalnetTokenizer,
+	// mollie: createMollieTokenizer,
+};
+
+export function pspTokenizerFor(provider: string | undefined): PspTokenizerFactory | undefined {
+	return provider ? pspTokenizers[provider] : undefined;
+}

package/app/payments/psp/stripe.ts

@@ -0,0 +1,69 @@
+import type { PspMountContext, PspTokenizer } from "./types";
+
+/**
+ * Stripe tokenizer — loads Stripe.js (no npm dep; the CDN script is the
+ * supported integration) and mounts a Card Element. `tokenize()` creates a
+ * PaymentMethod (`pm_…`) client-side; only that id is sent to the BFF.
+ */
+
+interface StripeCardElement { mount: (el: HTMLElement) => void; unmount: () => void }
+interface StripeElements { create: (type: string, options?: unknown) => StripeCardElement }
+interface StripeInstance {
+	elements: (options?: unknown) => StripeElements;
+	createPaymentMethod: (params: unknown) => Promise<{ paymentMethod?: { id: string }; error?: { message: string } }>;
+}
+type StripeCtor = (key: string) => StripeInstance;
+
+const STRIPE_JS = "https://js.stripe.com/v3";
+
+function loadStripeJs(): Promise<StripeCtor> {
+	const w = window as unknown as { Stripe?: StripeCtor };
+	if (w.Stripe) {
+		return Promise.resolve(w.Stripe);
+	}
+	return new Promise((resolve, reject) => {
+		const existing = document.querySelector<HTMLScriptElement>(`script[src="${STRIPE_JS}"]`);
+		const onload = () => w.Stripe ? resolve(w.Stripe) : reject(new Error("Stripe.js loaded but window.Stripe missing"));
+		if (existing) {
+			existing.addEventListener("load", onload, { once: true });
+			existing.addEventListener("error", () => reject(new Error("failed to load Stripe.js")), { once: true });
+			return;
+		}
+		const script = document.createElement("script");
+		script.src = STRIPE_JS;
+		script.async = true;
+		script.addEventListener("load", onload, { once: true });
+		script.addEventListener("error", () => reject(new Error("failed to load Stripe.js")), { once: true });
+		document.head.appendChild(script);
+	});
+}
+
+export function createStripeTokenizer(): PspTokenizer {
+	let stripe: StripeInstance | null = null;
+	let card: StripeCardElement | null = null;
+
+	return {
+		async mount(ctx: PspMountContext) {
+			const Stripe = await loadStripeJs();
+			stripe = Stripe(ctx.publishableKey);
+			const elements = stripe.elements({ locale: ctx.locale });
+			card = elements.create("card", { hidePostalCode: true });
+			card.mount(ctx.el);
+		},
+		async tokenize() {
+			if (!stripe || !card) {
+				throw new Error("card field is not ready");
+			}
+			const { paymentMethod, error } = await stripe.createPaymentMethod({ type: "card", card });
+			if (error || !paymentMethod) {
+				throw new Error(error?.message ?? "could not tokenize card");
+			}
+			return { token: paymentMethod.id };
+		},
+		destroy() {
+			card?.unmount();
+			card = null;
+			stripe = null;
+		},
+	};
+}

package/app/payments/psp/types.ts

@@ -0,0 +1,29 @@
+/**
+ * Per-PSP client-side tokenizer contract. The checkout collects card (or other
+ * sensitive instrument) data through the PSP's own secure field and turns it
+ * into a single-use token — the raw data never touches our servers (PCI-safe).
+ *
+ * One implementation per PSP that needs inline collection (Stripe → Elements).
+ * PSPs that only redirect need NO tokenizer — the generic next_action/redirect
+ * handler covers them. Add Novalnet/Mollie by adding a factory to the registry.
+ */
+export interface PspMountContext {
+	/** Public/publishable key for the PSP (from /api/payment/psp-config). */
+	publishableKey: string;
+	testMode: boolean;
+	/** Element the PSP mounts its secure card field into. */
+	el: HTMLElement;
+	/** UI locale, e.g. "de" / "en". */
+	locale?: string;
+}
+
+export interface PspTokenizer {
+	/** Mount the secure field into `ctx.el`; resolves once it is ready. */
+	mount: (ctx: PspMountContext) => Promise<void>;
+	/** Produce a single-use token (e.g. Stripe `pm_…`) from the mounted field. */
+	tokenize: () => Promise<{ token: string }>;
+	/** Tear the field down (on unmount / method change). */
+	destroy: () => void;
+}
+
+export type PspTokenizerFactory = () => PspTokenizer;

package/i18n/locales/de/checkout.json

@@ -126,6 +126,7 @@
 			"poNumber": "Bestellnummer",
 			"poNumberPlaceholder": "Bestellnummer eingeben...",
 			"costCenter": "Kostenstelle",
+			"cardDetails": "Kartendaten",
 			"change": "Ändern",
 			"noMethod": "Keine Zahlungsmethode ausgewählt",
 			"confirm": "Bestätigen",

package/i18n/locales/en/checkout.json

@@ -126,6 +126,7 @@
 			"poNumber": "PO Number",
 			"poNumberPlaceholder": "Enter PO number...",
 			"costCenter": "Cost Center",
+			"cardDetails": "Card details",
 			"change": "Change",
 			"noMethod": "No payment method selected",
 			"confirm": "Confirm",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revenexx/cover",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "Cover \u2014 revenexx design system for Nuxt. Distributed as a Nuxt layer: generic UI components, theming tokens and stores shared by the demo shop, custom storefronts and the Blokkli theme.",
   "type": "module",
   "main": "./nuxt.config.ts",

package/server/api/orders/index.post.ts

@@ -32,6 +32,10 @@ interface OrderPayload {
 	partialDelivery?: boolean;
 	orderNote?: string;
 	promoCode?: string;
+	/** PSP single-use token from the checkout's client-side tokenizer (e.g. Stripe pm_…). */
+	paymentInstrument?: { token?: string };
+	/** Where the PSP returns the buyer after a redirect/3DS step-up. */
+	returnUrl?: string;
 }
 
 function isNonEmptyString(v: unknown): v is string {
@@ -310,6 +314,9 @@ export default defineEventHandler(async (event) => {
 		// again; a declined payment fails the order with 402 (and cancels
 		// the already placed live order).
 		let livePaymentStatus: string | null = null;
+		// Set when the PSP needs buyer action (3DS step-up / redirect PSPs) —
+		// the checkout hands the buyer to redirectUrl and confirms on return.
+		let pendingAction: { paymentId: string; redirectUrl: string } | null = null;
 		if (livePayments) {
 			const totalRow = calculation.totals.find(row => row.key === "total");
 			const address = body.address as Record<string, unknown> | undefined;
@@ -317,23 +324,39 @@ export default defineEventHandler(async (event) => {
 				? address?.billing as Record<string, unknown> | undefined
 				: address;
 			const country = toIsoCountry(body.billingCountry ?? billing?.country ?? "");
+			// The instrument (PSP token from the checkout's client-side tokenizer)
+			// is forwarded as-is; paymentsCreate's typed params drop unknown
+			// fields, so the create goes through the low-level transport.
+			const instrument = body.paymentInstrument as { token?: string } | undefined;
 			try {
-				const created = await useRevenexxSdk().payments.paymentsCreate({
-					methodCode: payment.method,
-					// Charge exactly what the orders app computed (incl. shipping tax).
-					amount: Math.max(0, Math.round((liveOrderTotal ?? totalRow?.amount ?? 0) * 100) / 100),
-					currency: selectedCurrency ?? calculation.currency,
-					country,
-					orderRef: orderId,
-					idempotencyKey: body.checkoutSessionToken,
-					metadata: {
-						...(payment.poNumber ? { po_number: payment.poNumber } : {}),
-						...(payment.costCenter ? { cost_center: payment.costCenter } : {}),
+				const created = await useRevenexxSdk().call<{ id: string; status: string; error_message?: string | null; next_action?: { type?: string; url?: string } | null }>(
+					"POST",
+					"/v1/payments",
+					{
+						body: {
+							method_code: payment.method,
+							// Charge exactly what the orders app computed (incl. shipping tax).
+							amount: Math.max(0, Math.round((liveOrderTotal ?? totalRow?.amount ?? 0) * 100) / 100),
+							currency: selectedCurrency ?? calculation.currency,
+							country,
+							order_ref: orderId,
+							idempotency_key: body.checkoutSessionToken,
+							...(instrument?.token ? { token: instrument.token } : {}),
+							...(body.returnUrl ? { return_url: body.returnUrl } : {}),
+							metadata: {
+								...(payment.poNumber ? { po_number: payment.poNumber } : {}),
+								...(payment.costCenter ? { cost_center: payment.costCenter } : {}),
+							},
+						},
 					},
-				}) as unknown as { id: string; status: string; error_message?: string | null };
+				);
 				if (created.status === "failed") {
 					throw createError({ status: 402, message: created.error_message ?? "Payment was declined" });
 				}
+				if (created.status === "requires_action" && created.next_action?.url) {
+					// Order stays placed (payment pending); buyer completes at the PSP.
+					pendingAction = { paymentId: created.id, redirectUrl: created.next_action.url };
+				}
 				livePaymentStatus = created.status;
 			}
 			catch (err) {
@@ -359,8 +382,10 @@ export default defineEventHandler(async (event) => {
 		}
 
 		// The payment dimension of the live order follows the payment outcome.
+		// The payments app's terminal "paid" state is `captured` (PSP auto/
+		// manual capture); `succeeded`/`paid` are accepted as synonyms.
 		if (liveOrderUuid && livePaymentStatus) {
-			const mapped = livePaymentStatus === "succeeded" || livePaymentStatus === "paid"
+			const mapped = ["captured", "succeeded", "paid"].includes(livePaymentStatus)
 				? OrderPaymentStatus.Paid
 				: livePaymentStatus === "authorized" ? OrderPaymentStatus.Authorized : OrderPaymentStatus.Pending;
 			try {
@@ -437,6 +462,20 @@ export default defineEventHandler(async (event) => {
 			}
 		}
 
+		// PSP needs buyer action (3DS / redirect PSPs): hand the redirect to the
+		// checkout. The order is placed; the payment finalizes on return.
+		if (pendingAction) {
+			return {
+				orderId,
+				status: "requires-action",
+				requiresAction: true,
+				redirectUrl: pendingAction.redirectUrl,
+				paymentId: pendingAction.paymentId,
+				createdAt: new Date().toISOString(),
+				payment,
+			};
+		}
+
 		return {
 			orderId,
 			status: blockingApprovals.length ? "approval-pending" : "confirmed",

package/server/api/payment/methods.post.ts

@@ -51,6 +51,7 @@ export default defineEventHandler(async (event) => {
 			fee: m.fee,
 			feeType: m.fee_type,
 			kind: m.kind,
+			...(m.provider ? { provider: m.provider } : {}),
 		}));
 
 		return {

package/server/api/payment/psp-config.get.ts

@@ -0,0 +1,40 @@
+/**
+ * Public PSP config for the checkout's client-side tokenizers — ONLY the
+ * publishable/public keys of enabled PSP providers, never the secret keys.
+ * The per-PSP frontend registry (see app/payments/psp) reads this to know
+ * which provider needs client-side tokenization and with which public key.
+ *
+ * Shape: { providers: { stripe: { publishableKey, testMode }, … } }
+ * Adding Novalnet/Mollie later = they appear here automatically once enabled
+ * with a publishable key on the provider; the FE registry gets a new entry.
+ */
+interface ApiProviderRow {
+	provider: string;
+	enabled: boolean;
+	test_mode: boolean;
+	credentials: Record<string, unknown> | null;
+}
+
+export default defineEventHandler(async (event) => {
+	if (resolvePaymentServiceKey(event) !== "api") {
+		return { providers: {} as Record<string, { publishableKey: string; testMode: boolean }> };
+	}
+	try {
+		const { items } = await useRevenexxSdk().call<{ items: ApiProviderRow[] }>("GET", "/v1/payments/providers");
+		const providers: Record<string, { publishableKey: string; testMode: boolean }> = {};
+		for (const row of items) {
+			if (!row.enabled) {
+				continue;
+			}
+			const pk = row.credentials?.publishable_key;
+			if (typeof pk === "string" && pk.length > 0) {
+				providers[row.provider] = { publishableKey: pk, testMode: row.test_mode !== false };
+			}
+		}
+		return { providers };
+	}
+	catch (err) {
+		getLogService().error("Service error: payment/psp-config", apiErrorContext(err));
+		return { providers: {} as Record<string, { publishableKey: string; testMode: boolean }> };
+	}
+});