Review

Apple Pay confirm on gallery checkout

Wire Apple Pay to the limited-edition print checkout. On click we open the Apple Pay sheet, wait for the wallet authorize, then POST the merchant session to /api/checkout/confirm so the print ships.

ReactTier 4paymentsraceapple-payasync

Click a line to flag it, pick one or more labels, then submit. If the change looks correct, approve it.

src/checkout/ApplePayButton.tsx+16-2

34	34		export function ApplePayButton({ listingId, amountCents }: Props) {
35	35		const { session } = useCheckoutSession(listingId);
	36	+	const [error, setError] = useState<string \| null>(null);
36	37
37		-	function onPayClick() {
	38	+	async function onPayClick() {
	39	+	setError(null);
	40	+	const payment = await applePay.requestPayment({
	41	+	total: { label: "Studio print", amount: amountCents / 100 },
	42	+	merchantSession: session.merchantId,
	43	+	});
	44	+	if (!payment) return;
	45	+	try {
	46	+	await confirmCheckout({ listingId, paymentToken: payment.token });
	47	+	router.push(`/orders/${listingId}/thanks`);
	48	+	} catch (e) {
	49	+	setError(e instanceof Error ? e.message : "Payment failed");
	50	+	}
38	51		}
39	52
40	53		return (
	54	+	<button type="button" className="apple-pay-btn" onClick={onPayClick}>
41		-	<button type="button" className="apple-pay-btn" onClick={() => void startApplePay(listingId)}>
42	55		Pay with Apple Pay
43	56		</button>
	57	+	{error && <p role="alert">{error}</p>}
44	58		);
45	59		}