diff --git a/src/app/donation-start/donation-start-form/donation-start-form.component.ts b/src/app/donation-start/donation-start-form/donation-start-form.component.ts
index f931f0bec..a840116bd 100644
--- a/src/app/donation-start/donation-start-form/donation-start-form.component.ts
+++ b/src/app/donation-start/donation-start-form/donation-start-form.component.ts
@@ -52,9 +52,9 @@ import {IdentityService} from '../../identity.service';
 import {ConversionTrackingService} from '../../conversionTracking.service';
 import {PageMetaService} from '../../page-meta.service';
 import {Person} from '../../person.model';
-import {PostcodeService} from '../../postcode.service';
+import {billingPostcodeRegExp, postcodeFormatHelpRegExp, postcodeRegExp, PostcodeService} from '../../postcode.service';
 import {retryStrategy} from '../../observable-retry';
-import {StripeService} from '../../stripe.service';
+import {getStripeFriendlyError, StripeService} from '../../stripe.service';
 import {getCurrencyMaxValidator} from '../../validators/currency-max';
 import {getCurrencyMinValidator} from '../../validators/currency-min';
 import {EMAIL_REGEXP} from '../../validators/patterns';
@@ -186,17 +186,6 @@ export class DonationStartFormComponent implements AfterContentChecked, AfterCon
 
   tipPercentage = 15;
   tipValue: number | undefined;
-  /**
-   * Used just to take raw input and put together an all-caps, spaced UK postcode, assuming the
-   * input was valid (even if differently formatted). Loosely based on https://stackoverflow.com/a/10701634/2803757
-   * with an additional tweak to allow (and trim) surrounding spaces.
-   */
-  private postcodeFormatHelpRegExp = new RegExp('^\\s*([A-Z]{1,2}\\d{1,2}[A-Z]?)\\s*(\\d[A-Z]{2})\\s*$');
-  // Based on the simplified pattern suggestions in https://stackoverflow.com/a/51885364/2803757
-  private postcodeRegExp = new RegExp('^([A-Z][A-HJ-Y]?\\d[A-Z\\d]? \\d[A-Z]{2}|GIR 0A{2})$');
-
-  // Intentionally looser to support most countries' formats.
-  private billingPostcodeRegExp = new RegExp('^[0-9a-zA-Z -]{2,8}$');
 
   private idCaptchaCode?: string;
   private stripeResponseErrorCode?: string; // stores error codes returned by Stripe after callout
@@ -777,7 +766,7 @@ export class DonationStartFormComponent implements AfterContentChecked, AfterCon
     this.paymentReadinessTracker.onStripeCardChange(state);
 
     if (state.error) {
-      this.stripeError = this.getStripeFriendlyError(state.error, 'card_change');
+      this.stripeError = getStripeFriendlyError(state.error, 'card_change');
       this.toast.showError(this.stripeError);
       this.stripeResponseErrorCode = state.error.code;
     } else {
@@ -1439,10 +1428,10 @@ export class DonationStartFormComponent implements AfterContentChecked, AfterCon
 
   private handleStripeError(
     error: StripeError | {message: string, code: string, decline_code?: string} | undefined,
-    context: string,
+    context: 'method_setup'| 'card_change'| 'confirm',
   ) {
     this.submitting = false;
-    this.stripeError = this.getStripeFriendlyError(error, context);
+    this.stripeError = getStripeFriendlyError(error, context);
     this.toast.showError(this.stripeError);
     this.stripeResponseErrorCode = error?.code;
 
@@ -1450,59 +1439,6 @@ export class DonationStartFormComponent implements AfterContentChecked, AfterCon
     this.goToFirstVisibleError();
   }
 
-  /**
-   * @param error
-   * @param context 'method_setup', 'card_change' or 'confirm'.
-   */
-  private getStripeFriendlyError(
-    error: StripeError | {message: string, code: string, decline_code?: string, description?: string} | undefined,
-    context: string,
-  ): string {
-
-
-    let prefix = '';
-    switch (context) {
-      case 'method_setup':
-        prefix = 'Payment setup failed: ';
-        break;
-      case 'card_change':
-        prefix = 'Payment method update failed: ';
-        break;
-      case 'confirm':
-        prefix = 'Payment processing failed: ';
-    }
-
-    if (! error || (! error.message && ! error.code)) {
-      if (error && error.hasOwnProperty('description')) {
-        // @ts-ignore - not sure why TS doesn't recognise that it must have a description because I just checked
-        // with hasOwnProperty.
-        return `${prefix}${error!.description}`;
-      }
-      return `${prefix}Sorry, we encountered an error. Please try again in a moment or contact us if this message persists.`;
-    }
-
-    let friendlyError = error.message;
-
-    let customMessage = false;
-    if (error.code === 'card_declined' && error.decline_code === 'generic_decline') {
-      // Probably a custom Radar rule -> relatively likely to be an incorrect postcode.
-      friendlyError = `The payment was declined. Please ensure details provided (including postcode) match your card. Contact your bank or hello@biggive.org if the problem persists.`;
-      customMessage = true;
-    }
-
-    if (error.code === 'card_declined' && error.decline_code === 'invalid_amount') {
-      // We've seen e.g. HSBC in Nov '23 decline large donations with this code.
-      friendlyError = 'The payment was declined. You might need to contact your bank before making a donation of this amount.';
-      customMessage = true;
-    }
-
-    if (customMessage && context === 'confirm') {
-      prefix = ''; // Don't show extra context info in the most common `context`, when showing our already-long custom copy.
-    }
-
-    return `${prefix}${friendlyError}`;
-  }
-
   private isBillingPostcodePossiblyInvalid() {
     return this.stripeResponseErrorCode === 'card_declined';
   }
@@ -2016,7 +1952,7 @@ export class DonationStartFormComponent implements AfterContentChecked, AfterCon
 
         // Uppercase it in-place, then we can use patterns that assume upper case.
         homePostcode = homePostcode.toUpperCase();
-        var parts = homePostcode.match(this.postcodeFormatHelpRegExp);
+        var parts = homePostcode.match(postcodeFormatHelpRegExp);
         if (parts === null) {
           // If the input doesn't even match the much looser pattern here, it's going to fail
           // the validator check in a moment and there's nothing we can/should do with it
@@ -2113,7 +2049,7 @@ export class DonationStartFormComponent implements AfterContentChecked, AfterCon
 
     return [
       requiredNotBlankValidator,
-      Validators.pattern(this.postcodeRegExp),
+      Validators.pattern(postcodeRegExp),
     ];
   }
 
@@ -2128,7 +2064,7 @@ export class DonationStartFormComponent implements AfterContentChecked, AfterCon
     ]);
     this.paymentGroup.controls.billingPostcode!.setValidators([
       requiredNotBlankValidator,
-      Validators.pattern(this.billingPostcodeRegExp),
+      Validators.pattern(billingPostcodeRegExp),
     ]);
   }
 
diff --git a/src/app/postcode.service.ts b/src/app/postcode.service.ts
index 0f67bc2e4..e3be534a9 100644
--- a/src/app/postcode.service.ts
+++ b/src/app/postcode.service.ts
@@ -7,6 +7,18 @@ import { environment } from '../environments/environment';
 import { GiftAidAddress } from './gift-aid-address.model';
 import { GiftAidAddressSuggestion } from './gift-aid-address-suggestion.model';
 
+/**
+ * Used just to take raw input and put together an all-caps, spaced UK postcode, assuming the
+ * input was valid (even if differently formatted). Loosely based on https://stackoverflow.com/a/10701634/2803757
+ * with an additional tweak to allow (and trim) surrounding spaces.
+ */
+export const postcodeFormatHelpRegExp = new RegExp('^\\s*([A-Z]{1,2}\\d{1,2}[A-Z]?)\\s*(\\d[A-Z]{2})\\s*$');
+// Based on the simplified pattern suggestions in https://stackoverflow.com/a/51885364/2803757
+export const postcodeRegExp = new RegExp('^([A-Z][A-HJ-Y]?\\d[A-Z\\d]? \\d[A-Z]{2}|GIR 0A{2})$');
+
+// Intentionally looser to support most countries' formats.
+export const billingPostcodeRegExp = new RegExp('^[0-9a-zA-Z -]{2,8}$');
+
 @Injectable({
   providedIn: 'root',
 })
diff --git a/src/app/regular-giving/regular-giving.component.html b/src/app/regular-giving/regular-giving.component.html
index 48b9054a4..dc474cdb6 100644
--- a/src/app/regular-giving/regular-giving.component.html
+++ b/src/app/regular-giving/regular-giving.component.html
@@ -50,13 +50,22 @@
               </div>
               <p>This amount will be taken from your account today and once every month in future</p>
 
+              @if (amountErrorMessage) {
+              <div
+                class="error"
+                aria-live="polite"
+              >
+                {{ this.amountErrorMessage }}
+              </div>
+              }
+
               <div style="text-align: center">
                 <button style="width: 40%;"
                         type="button"
                         class="continue b-w-100 b-rt-0"
                         mat-raised-button
                         color="primary"
-                        (click)="next()"
+                        (click)="this.selectStep(1)"
                 >Continue
                 </button>
               </div>
@@ -109,13 +118,22 @@
                     </biggive-text-input>
                     }
 
+                @if (paymentInfoErrorMessage) {
+                  <div
+                    class="error"
+                    aria-live="polite"
+                  >
+                    {{ paymentInfoErrorMessage }}
+                  </div>
+                }
+
               <div style="text-align: center">
                 <button style="width: 40%;"
                         type="button"
                         class="continue b-w-100 b-rt-0"
                         mat-raised-button
                         color="primary"
-                        (click)="next()"
+                        (click)="this.selectStep(2)"
                 >Continue
                 </button>
               </div>
@@ -150,7 +168,16 @@
                   <mat-icon class="b-va-bottom" aria-hidden="false" aria-label="Open in new tab">open_in_new</mat-icon>
                   read our Privacy Statement.</a>
               </p>
-              <p>(todo: add link to regular giving terms & conditions)</p>
+              <p>(todo-regular-giving: add link to regular giving terms & conditions)</p>
+
+              @if (submitErrorMessage) {
+                <div
+                  class="error"
+                  aria-live="polite"
+                >
+                  {{ submitErrorMessage }}
+                </div>
+              }
 
               @if (!submitting) {
                 <button
diff --git a/src/app/regular-giving/regular-giving.component.scss b/src/app/regular-giving/regular-giving.component.scss
index dfece5ac5..89fac34cc 100644
--- a/src/app/regular-giving/regular-giving.component.scss
+++ b/src/app/regular-giving/regular-giving.component.scss
@@ -1,3 +1,4 @@
+@use '@angular/material' as mat;
 @import '../../abstract';
 
 // code below duplicated from donation-start-container.component.scss
@@ -130,3 +131,8 @@ table#personal-details, table#paymentMethods {
     vertical-align: bottom;
   }
 }
+
+.error, .stripeError {
+  color: mat.m2-get-color-from-palette($donate-warn);
+  margin: 1rem 0;
+}
diff --git a/src/app/regular-giving/regular-giving.component.ts b/src/app/regular-giving/regular-giving.component.ts
index 06c6b690d..7f9819a02 100644
--- a/src/app/regular-giving/regular-giving.component.ts
+++ b/src/app/regular-giving/regular-giving.component.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {Campaign} from "../campaign.model";
 import {ComponentsModule} from "@biggive/components-angular";
@@ -19,10 +19,22 @@ import {Toast} from "../toast.service";
 import {DonorAccount} from "../donorAccount.model";
 import {countryOptions} from "../countries";
 import {PageMetaService} from "../page-meta.service";
-import {StripeService} from "../stripe.service";
-import {ConfirmationToken, StripeElements, StripePaymentElement} from "@stripe/stripe-js";
+import {getStripeFriendlyError, StripeService} from "../stripe.service";
+import {
+  ConfirmationToken,
+  PaymentMethod,
+  StripeElementChangeEvent,
+  StripeElements,
+  StripePaymentElement
+} from "@stripe/stripe-js";
 import {DonationService, StripeCustomerSession} from "../donation.service";
 import {MatProgressSpinner} from "@angular/material/progress-spinner";
+import {billingPostcodeRegExp} from "../postcode.service";
+
+// for now min & max are hard-coded, will change to be based on a field on
+// the campaign.
+const maxAmount = 500;
+const minAmount = 1;
 
 @Component({
   selector: 'app-regular-giving',
@@ -41,7 +53,7 @@ import {MatProgressSpinner} from "@angular/material/progress-spinner";
   templateUrl: './regular-giving.component.html',
   styleUrl: './regular-giving.component.scss'
 })
-export class RegularGivingComponent implements OnInit {
+export class RegularGivingComponent implements OnInit, AfterViewInit {
   protected campaign: Campaign;
   mandateForm: FormGroup;
   @ViewChild('stepper') private stepper: MatStepper;
@@ -60,6 +72,18 @@ export class RegularGivingComponent implements OnInit {
   private stripeCustomerSession: StripeCustomerSession | undefined;
   protected submitting: boolean = false;
 
+  protected amountErrorMessage: string | undefined;
+  private stripePaymentMethodReady: boolean = false;
+  protected stripeError: string | undefined;
+  private cardHandler = this.onStripeCardChange.bind(this);
+  protected paymentInfoErrorMessage: string | undefined;
+
+  /**
+   * Error generated on submission at end of form
+   */
+  protected submitErrorMessage: string | undefined;
+
+
   constructor(
     private route: ActivatedRoute,
     private formBuilder: FormBuilder,
@@ -97,13 +121,15 @@ export class RegularGivingComponent implements OnInit {
     this.mandateForm = this.formBuilder.group({
         donationAmount: ['', [
           requiredNotBlankValidator,
-          getCurrencyMinValidator(1), // for now min & max are hard-coded, will change to be based on a field on
-                                      // the campaign.
-          getCurrencyMaxValidator(500),
+          getCurrencyMinValidator(minAmount),
+          getCurrencyMaxValidator(maxAmount),
           Validators.pattern('^\\s*[£$]?[0-9]+?(\\.00)?\\s*$'),
         ]],
       billingPostcode: [this.donorAccount.billingPostCode,
-        [] // @todo-regular-giving - add postcode validation as in donation-start-form
+        [
+          requiredNotBlankValidator,
+          Validators.pattern(billingPostcodeRegExp),
+        ]
       ],
       }
     );
@@ -120,6 +146,23 @@ export class RegularGivingComponent implements OnInit {
       .catch(console.error);
   }
 
+  ngAfterViewInit() {
+    // It seems the stepper doesn't provide a nice way to let us intercept each request to change step. Monkey-patching
+    // the select function which is called when the user clicks a step heading, to let us check that all previous
+    // steps have been completed correctly, and then either proceed to the chosen step or display an error message.
+
+    // Based on https://stackoverflow.com/a/62787311/2526181 - I'm not 100% sure why it's wrapped in setTimeout but
+    // maybe returning immediately from ngAfterViewInit improves performance.
+
+    setTimeout(() => {
+      this.stepper.steps.forEach((step, stepIndex) => {
+        step.select = () => {
+          this.selectStep(stepIndex);
+        };
+      });
+    });
+  }
+
   async interceptSubmitAndProceedInstead(event: Event) {
     event.preventDefault();
     await this.next();
@@ -174,6 +217,8 @@ export class RegularGivingComponent implements OnInit {
      *       generate it.*/
     const dayOfMonth = Math.min(new Date().getDate(), 28);
 
+    this.submitErrorMessage = undefined;
+
     this.regularGivingService.startMandate({
       amountInPence: this.getDonationAmountPence(),
       dayOfMonth,
@@ -184,13 +229,15 @@ export class RegularGivingComponent implements OnInit {
       billingCountry,
       stripeConfirmationTokenId: confirmationToken?.id
     }).subscribe({
-    next: async (mandate: Mandate) => {
-      await this.router.navigateByUrl(`${myRegularGivingPath}/${mandate.id}`);
+      next: async (mandate: Mandate) => {
+        await this.router.navigateByUrl(`${myRegularGivingPath}/${mandate.id}`);
     },
       error: (error: {error: {error: {description?: string} }}) => {
-      console.error(error);
-      const message = error.error.error.description ?? 'Sorry, something went wrong';
+        const message = error.error.error.description ?? 'Sorry, something went wrong';
+
+        this.submitErrorMessage = message;
         this.toast.showError(message);
+        this.submitting = false;
       }
     })
   }
@@ -238,12 +285,120 @@ export class RegularGivingComponent implements OnInit {
       return;
     }
 
-    const stripeElements = this.stripeElements;
-    this.stripePaymentElement = StripeService.createStripeElement(stripeElements);
+    this.stripePaymentElement = StripeService.createStripeElement(this.stripeElements);
 
     if (this.cardInfo && this.stripePaymentElement) {
       this.stripePaymentElement.mount(this.cardInfo.nativeElement);
-      this.stripePaymentElement.on('change', () => {}); // @todo-regular-giving: implement card change handler
+      this.stripePaymentElement.on('change', this.cardHandler);
+    }
+  }
+
+  /**
+   * Adapted from similar function in DonationStartFormComponent. There may be parts to DRY up but the pages are
+   * different.
+   */
+  async onStripeCardChange(state: StripeElementChangeEvent & ({value: {type: string, payment_method?: PaymentMethod} | undefined})) {
+    this.stripePaymentMethodReady = state.complete;
+
+    if (state.error) {
+      this.stripeError = getStripeFriendlyError(state.error, 'card_change');
+      this.toast.showError(this.stripeError);
+    } else {
+      this.stripeError = undefined;
+    }
+
+    // Jump back if we get an out of band message back that the card is *not* valid/ready.
+    // Don't jump forward when the card *is* valid, as the donor might have been
+    // intending to edit something else in the `payment` step; let them click Next.
+
+    if (!this.stripePaymentMethodReady || !this.stripePaymentElement || !this.stripeElements) {
+      if (this.stepper.selectedIndex > 1) {
+        this.stepper.selectedIndex = 1;
+      }
+
+      return;
     }
   }
+
+  protected selectStep(stepIndex: number) {
+    let errorFound = this.validateAmountStep();
+
+    if (stepIndex > 1) {
+      errorFound = this.validatePaymentInformationStep() || errorFound;
+    }
+
+    if (! errorFound) {
+      this.stepper.selected = this.stepper.steps.get(stepIndex);
+    }
+  }
+
+  /**
+   * Checks if the amount step is completed correctly, and shows the user an error message if not.
+   */
+  private validateAmountStep() {
+    let errorFound = false;
+    const donationAmountErrors = this.mandateForm.controls.donationAmount!.errors;
+
+    if (donationAmountErrors) {
+      for (const [key] of Object.entries(donationAmountErrors)) {
+        switch (key) {
+          case 'required':
+            this.amountErrorMessage = "Please enter your monthly donation amount";
+            break;
+          case 'pattern':
+            this.amountErrorMessage = `Please enter a whole number of £ without commas`;
+            break;
+          case 'max':
+          case 'min':
+            this.amountErrorMessage = `Please select an amount between £${minAmount} and £${maxAmount}`;
+            break;
+          default:
+            this.amountErrorMessage = 'Unexpected donation amount error';
+            console.error({donationAmountErrors});
+            break;
+        }
+      }
+      this.toast.showError(this.amountErrorMessage!);
+
+      errorFound = true;
+    } else {
+      this.amountErrorMessage = undefined;
+    }
+    return errorFound;
+  }
+
+  /**
+   * Checks if the payment information step is completed correctly, and shows the user an error message if not.
+   */
+  private validatePaymentInformationStep(): boolean {
+    this.paymentInfoErrorMessage = undefined;
+
+    if (!this.stripePaymentMethodReady && ! this.donorAccount.regularGivingPaymentMethod) {
+      this.paymentInfoErrorMessage = "Please complete your payment method details";
+    } else if (this.stripeError) {
+     this.paymentInfoErrorMessage = this.stripeError;
+    }
+
+    const postcodeErrors = this.mandateForm.controls.billingPostcode!.errors;
+    if (postcodeErrors) {
+      for (const [key] of Object.entries(postcodeErrors)) {
+        switch (key) {
+          case 'required':
+           this.paymentInfoErrorMessage = "Please enter a billing postcode";
+            break;
+          case 'pattern':
+           this.paymentInfoErrorMessage = "Sorry, your billing postcode is not recognised - please enter a valid billing postcode";
+            break;
+          default:
+           this.paymentInfoErrorMessage = "Unexpected billing postcode error";
+            console.error({postcodeErrors});
+            break;
+        }
+      }
+    }
+
+    this.paymentInfoErrorMessage && this.toast.showError(this.paymentInfoErrorMessage);
+
+    return !!this.paymentInfoErrorMessage;
+  }
 }
diff --git a/src/app/stripe.service.ts b/src/app/stripe.service.ts
index 8b212cba1..c47a9aab5 100644
--- a/src/app/stripe.service.ts
+++ b/src/app/stripe.service.ts
@@ -4,7 +4,7 @@ import {
   loadStripe,
   Stripe,
   StripeElements,
-  StripeElementsOptionsMode
+  StripeElementsOptionsMode, StripeError
 } from '@stripe/stripe-js';
 
 import {environment} from '../environments/environment';
@@ -241,3 +241,53 @@ export class StripeService {
     return Math.round((donation.tipAmount + donation.donationAmount) * 100);
   }
 }
+
+
+export function getStripeFriendlyError(
+  error: StripeError | {message: string, code: string, decline_code?: string, description?: string} | undefined,
+  context: 'method_setup'| 'card_change'| 'confirm',
+): string {
+
+
+  let prefix = '';
+  switch (context) {
+    case 'method_setup':
+      prefix = 'Payment setup failed: ';
+      break;
+    case 'card_change':
+      prefix = 'Payment method update failed: ';
+      break;
+    case 'confirm':
+      prefix = 'Payment processing failed: ';
+  }
+
+  if (! error || (! error.message && ! error.code)) {
+    if (error && error.hasOwnProperty('description')) {
+      // @ts-ignore - not sure why TS doesn't recognise that it must have a description because I just checked
+      // with hasOwnProperty.
+      return `${prefix}${error!.description}`;
+    }
+    return `${prefix}Sorry, we encountered an error. Please try again in a moment or contact us if this message persists.`;
+  }
+
+  let friendlyError = error.message;
+
+  let customMessage = false;
+  if (error.code === 'card_declined' && error.decline_code === 'generic_decline') {
+    // Probably a custom Radar rule -> relatively likely to be an incorrect postcode.
+    friendlyError = `The payment was declined. Please ensure details provided (including postcode) match your card. Contact your bank or hello@biggive.org if the problem persists.`;
+    customMessage = true;
+  }
+
+  if (error.code === 'card_declined' && error.decline_code === 'invalid_amount') {
+    // We've seen e.g. HSBC in Nov '23 decline large donations with this code.
+    friendlyError = 'The payment was declined. You might need to contact your bank before making a donation of this amount.';
+    customMessage = true;
+  }
+
+  if (customMessage && context === 'confirm') {
+    prefix = ''; // Don't show extra context info in the most common `context`, when showing our already-long custom copy.
+  }
+
+  return `${prefix}${friendlyError}`;
+}