diff --git a/packages/wallet-webui/src/screens/PaymentTemplateScreen.tsx b/packages/wallet-webui/src/screens/PaymentTemplateScreen.tsx
index 19c179665..1552330aa 100644
--- a/packages/wallet-webui/src/screens/PaymentTemplateScreen.tsx
+++ b/packages/wallet-webui/src/screens/PaymentTemplateScreen.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { Button } from "../ui/Button.js";
 import { Card } from "../ui/Card.js";
 import { ErrorCard } from "../ui/ErrorCard.js";
@@ -37,6 +37,18 @@ export function PaymentTemplateScreen(props: {
   }, [props.initialAmount, props.initialCurrency, props.initialSummary]);
   const normalizedAmount = positiveAmountValue(currency, amount);
   const valid = Boolean(normalizedAmount) && Boolean(summary.trim());
+  const amountInput = useRef<HTMLInputElement>(null);
+  const summaryInput = useRef<HTMLInputElement>(null);
+  const formShown = !props.loading && !props.error;
+  // Focus the first field the merchant left for the payer to fill in; the
+  // form only appears once the template has loaded.
+  useEffect(() => {
+    if (!formShown) return;
+    if (props.amountEditable)
+      amountInput.current?.focus({ preventScroll: true });
+    else if (props.summaryEditable)
+      summaryInput.current?.focus({ preventScroll: true });
+  }, [formShown, props.amountEditable, props.summaryEditable]);
   return (
     <div class="mx-auto w-full max-w-2xl space-y-6">
       <div class="flex items-center gap-4">
@@ -67,7 +79,7 @@ export function PaymentTemplateScreen(props: {
         </Card>
       )}
       {props.error && <ErrorCard error={props.error} />}
-      {!props.loading && !props.error && (
+      {formShown && (
         <form
           class="space-y-5"
           onSubmit={(event) => {
@@ -102,6 +114,7 @@ export function PaymentTemplateScreen(props: {
               <span class="mb-1 block text-sm font-medium">{i18n.str`Amount`}</span>
               <div class="flex rounded-xl border border-outline bg-surface focus-within:ring-2 focus-within:ring-primary">
                 <input
+                  ref={amountInput}
                   inputMode="decimal"
                   disabled={!props.amountEditable}
                   value={amount}
@@ -124,6 +137,7 @@ export function PaymentTemplateScreen(props: {
                 }
               </span>
               <input
+                ref={summaryInput}
                 disabled={!props.summaryEditable}
                 value={summary}
                 onInput={(event) => setSummary(event.currentTarget.value)}