diff --git a/src/components/pages/DonationForm.vue b/src/components/pages/DonationForm.vue
index 00c59f11..d85f457c 100644
--- a/src/components/pages/DonationForm.vue
+++ b/src/components/pages/DonationForm.vue
@@ -1,7 +1,14 @@
 <template>
 	<FeatureToggle default-template="campaigns.address_pages.legacy">
 		<template #campaigns.address_pages.legacy>
-			<StandardDonationForm v-bind="props"/>
+			<FeatureToggle default-template="campaigns.address_type_choice.default">
+				<template #campaigns.address_type_choice.default>
+					<StandardDonationForm v-bind="props"/>
+				</template>
+				<template #campaigns.address_type_choice.choice>
+					<ChoiceDonationForm v-bind="props" />
+				</template>
+			</FeatureToggle>
 		</template>
 		<template #campaigns.address_pages.test_02>
 			<ReceiptDonationForm v-bind="props"/>
@@ -17,6 +24,7 @@ import { Salutation } from '@src/view_models/Salutation';
 import { CampaignValues } from '@src/view_models/CampaignValues';
 import StandardDonationForm from '@src/components/pages/donation_form/SubPages/DonationForm.vue';
 import ReceiptDonationForm from '@src/components/pages/donation_form/SubPages/DonationFormReceipt.vue';
+import ChoiceDonationForm from '@src/components/pages/donation_form/SubPages/DonationFormAnonymousChoice.vue';
 
 defineOptions( {
 	name: 'DonationForm',
diff --git a/src/components/pages/donation_form/AddressOptOut/ErrorSummary.vue b/src/components/pages/donation_form/AddressOptOut/ErrorSummary.vue
new file mode 100644
index 00000000..efc9b5c4
--- /dev/null
+++ b/src/components/pages/donation_form/AddressOptOut/ErrorSummary.vue
@@ -0,0 +1,45 @@
+<template>
+	<ErrorSummary
+		:is-visible="showErrorSummary"
+		:items="[
+			{
+				validity: store.state.payment.validity.amount,
+				message: $t( 'error_summary_amount' ),
+				focusElement: 'amount-500',
+				scrollElement: 'payment-form-amount-scroll-target',
+			},
+			{
+				validity: store.state.payment.validity.type,
+				message: $t( 'error_summary_payment_type' ),
+				focusElement: 'paymentType-0',
+				scrollElement: 'payment-form-type-scroll-target',
+			},
+			{
+				validity: store.state.bankdata.validity.iban,
+				message: $t( 'donation_form_payment_iban_error' ),
+				focusElement: 'iban',
+				scrollElement: 'iban-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.addressType,
+				message: $t( 'error_summary_address_type_opt_out' ),
+				focusElement: 'addressOptOut-1',
+				scrollElement: 'address-opt-out-scroll-target',
+			},
+		]"
+	/>
+</template>
+
+<script setup lang="ts">
+import ErrorSummary from '@src/components/shared/validation_summary/ErrorSummary.vue';
+import { useStore } from 'vuex';
+
+const store = useStore();
+
+interface Props {
+	showErrorSummary: boolean
+}
+
+defineProps<Props>();
+
+</script>
diff --git a/src/components/pages/donation_form/AddressOptOut/useAddressOptOut.ts b/src/components/pages/donation_form/AddressOptOut/useAddressOptOut.ts
new file mode 100644
index 00000000..571ffa9b
--- /dev/null
+++ b/src/components/pages/donation_form/AddressOptOut/useAddressOptOut.ts
@@ -0,0 +1,38 @@
+import { Store } from 'vuex';
+import { Ref, ref, watch } from 'vue';
+import { action } from '@src/store/util';
+import { AddressTypeModel } from '@src/view_models/AddressTypeModel';
+
+export interface AddressOptOutModel {
+	addressOptIn: Ref<boolean|null>;
+	previousAddressType: Ref<AddressTypeModel>
+}
+
+function getInitialAddressOptInValue( store: Store<any> ): boolean|null {
+	if ( store.state.address.addressType === AddressTypeModel.UNSET ) {
+		return null;
+	}
+	return store.state.address.addressType !== AddressTypeModel.ANON;
+}
+
+export function useAddressOptOutModel( store: Store<any> ): AddressOptOutModel {
+	const addressOptIn = ref<boolean|null>( getInitialAddressOptInValue( store ) );
+	const previousAddressType = ref<AddressTypeModel>( AddressTypeModel.PERSON );
+
+	watch( addressOptIn, ( newValue: boolean | null ) => {
+		if ( newValue === true ) {
+			store.dispatch( action( 'address', 'setAddressType' ), previousAddressType.value );
+		} else {
+			const currentAddressType = store.state.address.addressType;
+			if ( currentAddressType !== AddressTypeModel.ANON && currentAddressType !== AddressTypeModel.UNSET ) {
+				previousAddressType.value = currentAddressType;
+			}
+			store.dispatch( action( 'address', 'setAddressType' ), AddressTypeModel.ANON );
+		}
+	} );
+
+	return {
+		addressOptIn,
+		previousAddressType,
+	};
+}
diff --git a/src/components/pages/donation_form/AddressTypeNoAnon.vue b/src/components/pages/donation_form/AddressTypeNoAnon.vue
new file mode 100644
index 00000000..643eded7
--- /dev/null
+++ b/src/components/pages/donation_form/AddressTypeNoAnon.vue
@@ -0,0 +1,60 @@
+<template>
+
+	<RadioField
+		name="addressType"
+		:options="[
+			{
+				value: AddressTypeModel.PERSON,
+				label: $t( 'donation_form_addresstype_option_private_addresstype_basic' ),
+				id: 'addressType-0'
+			},
+			{
+				value: AddressTypeModel.COMPANY,
+				label: $t( 'donation_form_addresstype_option_company_addresstype_basic' ),
+				id: 'addressType-1'
+			},
+		]"
+		:label="$t( 'donation_form_address_choice_title_addresstype_basic' )"
+		:disabled="disabledAddressTypes"
+		:show-error="addressTypeIsInvalid"
+		:error-message="$t( 'donation_form_section_address_error' )"
+		v-model="addressType"
+		alignment="column"
+	>
+	</RadioField>
+
+</template>
+
+<script setup lang="ts">
+
+import RadioField from '@src/components/shared/form_fields/RadioField.vue';
+import { AddressTypeModel } from '@src/view_models/AddressTypeModel';
+import { ref, watch } from 'vue';
+
+interface Props {
+	disabledAddressTypes: AddressTypeModel[]
+	isDirectDebit: boolean;
+	addressTypeIsInvalid: boolean;
+	initialAddressType?: AddressTypeModel;
+}
+const props = defineProps<Props>();
+
+const emit = defineEmits( [ 'address-type' ] );
+
+const addressType = ref<AddressTypeModel>( props.initialAddressType ?? AddressTypeModel.UNSET );
+
+watch( addressType, newAddressType => {
+	emit( 'address-type', newAddressType );
+} );
+
+// When disabled address type is selected, revert to person type
+watch( () => props.disabledAddressTypes, disabledAddressTypes => {
+	// TODO This assumes that person will never be disabled.
+	//      If this assumption is wrong, we need to have a fallback.
+	if ( disabledAddressTypes !== undefined &&
+			disabledAddressTypes.includes( addressType.value ) ) {
+		addressType.value = AddressTypeModel.PERSON;
+	}
+} );
+
+</script>
diff --git a/src/components/pages/donation_form/FormSections/PersonalDataSectionAnonymousChoice.vue b/src/components/pages/donation_form/FormSections/PersonalDataSectionAnonymousChoice.vue
new file mode 100644
index 00000000..6625eac4
--- /dev/null
+++ b/src/components/pages/donation_form/FormSections/PersonalDataSectionAnonymousChoice.vue
@@ -0,0 +1,100 @@
+<template>
+	<div
+		id="donation-page-form-section-personal-data"
+		class="donation-page-form-section"
+		aria-live="assertive"
+		aria-labelledby="donation-form-subheading donation-form-tagline"
+	>
+		<h2 id="donation-form-subheading" class="form-subtitle">{{ $t( 'donation_form_address_subheading' ) }}</h2>
+		<p id="donation-form-tagline">{{ $t( 'donation_form_section_address_tagline' ) }}</p>
+
+		<form id="address-type-option" @submit="evt => evt.preventDefault()">
+			<ScrollTarget target-id="address-opt-out-scroll-target"/>
+			<RadioField
+				v-model="addressOptOut.addressOptIn"
+				name="address-opt-out"
+				:options="[
+						{ value: true, label: $t( 'yes' ), id: 'addressOptOut-0' },
+						{ value: false, label: $t( 'no' ), id: 'addressOptOut-1' },
+					]"
+				:label="$t( 'donation_form_section_address_opt_out' )"
+				:disabled="isDirectDebitPayment ? [ false ] : []"
+				alignment="row"
+				aria-describedby="donation-address-opt-out-help-text"
+			>
+				<template #intro-message>
+				</template>
+				<template #tooltip-false>
+					<RadioFieldHelpText v-if="isDirectDebitPayment">
+						{{ $t( 'donation_form_address_choice_direct_debit_disclaimer' ) }}
+					</RadioFieldHelpText>
+				</template>
+			</RadioField>
+		</form>
+
+		<form id="address-type-selection" @submit="evt => evt.preventDefault()" v-if="addressOptOut.addressOptIn === true" >
+			<ScrollTarget target-id="address-type-scroll-target"/>
+			<AddressTypeNoAnon
+				@address-type="$emit( 'set-address-type', $event )"
+				:disabledAddressTypes="[]"
+				:is-direct-debit="isDirectDebitPayment"
+				:initial-address-type="addressType"
+				:address-type-is-invalid="addressTypeIsInvalid"
+			/>
+		</form>
+
+		<AddressForms
+			v-if="addressOptOut.addressOptIn === true"
+			:countries="countries"
+			:salutations="salutations"
+			:address-validation-patterns="addressValidationPatterns"
+			:address-type="addressType"
+			:tracking-data="trackingData"
+			:campaign-values="campaignValues">
+		</AddressForms>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { toRef } from 'vue';
+import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
+import AddressTypeNoAnon from '@src/components/pages/donation_form/AddressTypeNoAnon.vue';
+import AddressForms from '@src/components/pages/donation_form/AddressForms.vue';
+import RadioField from '@src/components/shared/form_fields/RadioField.vue';
+import { CampaignValues } from '@src/view_models/CampaignValues';
+import { Country } from '@src/view_models/Country';
+import { Salutation } from '@src/view_models/Salutation';
+import { TrackingData } from '@src/view_models/TrackingData';
+import { AddressValidation } from '@src/view_models/Validation';
+import { AddressTypeModel } from '@src/view_models/AddressTypeModel';
+import { AddressOptOutModel } from '@src/components/pages/donation_form/AddressOptOut/useAddressOptOut';
+import RadioFieldHelpText from '@src/components/shared/form_elements/RadioFieldTooltip.vue';
+
+interface Props {
+	countries: Country[];
+	salutations: Salutation[];
+	trackingData: TrackingData;
+	campaignValues: CampaignValues;
+	addressValidationPatterns: AddressValidation;
+	isDirectDebitPayment: boolean;
+	disabledAddressTypes: AddressTypeModel[];
+	addressType: AddressTypeModel;
+	addressTypeIsInvalid: boolean;
+	addressOptOut: AddressOptOutModel
+}
+
+const props = defineProps<Props>();
+defineEmits( [ 'set-address-type' ] );
+
+const addressOptOut = toRef( props.addressOptOut );
+
+</script>
+
+<style lang="scss">
+@use '@src/scss/settings/units';
+@use 'sass:map';
+
+.address-type-anonymous-disclaimer {
+	margin-top: map.get( units.$spacing, 'medium' );
+}
+</style>
diff --git a/src/components/pages/donation_form/FormSections/PersonalDataSectionDonationReceipt.vue b/src/components/pages/donation_form/FormSections/PersonalDataSectionDonationReceipt.vue
index 660ca1d9..105584af 100644
--- a/src/components/pages/donation_form/FormSections/PersonalDataSectionDonationReceipt.vue
+++ b/src/components/pages/donation_form/FormSections/PersonalDataSectionDonationReceipt.vue
@@ -47,11 +47,6 @@
 					alignment="row"
 					aria-describedby="donation-receipt-help-text"
 				>
-					<template #intro-message>
-						<div class="form-field-intro" id="donation-receipt-help-text">
-							{{ $t( 'C24_WMDE_Desktop_DE_01_help_text' ) }}
-						</div>
-					</template>
 				</RadioField>
 
 				<AddressFields
diff --git a/src/components/pages/donation_form/SubPages/DonationFormAnonymousChoice.vue b/src/components/pages/donation_form/SubPages/DonationFormAnonymousChoice.vue
new file mode 100644
index 00000000..8e8622b9
--- /dev/null
+++ b/src/components/pages/donation_form/SubPages/DonationFormAnonymousChoice.vue
@@ -0,0 +1,146 @@
+<template>
+	<div id="laika-donation">
+		<PaymentSection
+			:payment-amounts="paymentAmounts"
+			:payment-intervals="paymentIntervals"
+			:payment-types="paymentTypes"
+		/>
+		<div class="donation-page-form-section" v-if="isDirectDebitPayment">
+			<IbanFields/>
+		</div>
+		<PersonalDataSection
+			:countries="countries"
+			:salutations="salutations"
+			:tracking-data="trackingData"
+			:campaign-values="campaignValues"
+			:address-validation-patterns="addressValidationPatterns"
+			:is-direct-debit-payment="isDirectDebitPayment"
+			:disabled-address-types="disabledAddressTypes"
+			:address-type="addressType"
+			:address-type-is-invalid="addressTypeIsInvalid"
+			:address-opt-out="addressOptOut"
+			@set-address-type="setAddressType( $event )"
+		/>
+
+		<div class="donation-page-form-section">
+			<OptOutErrorSummary :show-error-summary="showErrorSummary" v-if="addressOptOut.addressOptIn.value === null" />
+			<ErrorSummary :show-error-summary="showErrorSummary" :address-type="addressType" v-else/>
+
+			<FormSummary>
+				<template #summary-content>
+					<DonationSummary
+						:payment="paymentSummary"
+						:address-type="addressTypeName"
+						:address="addressSummary"
+						:countries="countries"
+						:salutations="salutations"
+						:language-item="inlineSummaryLanguageItem"
+					/>
+				</template>
+
+				<template #summary-buttons>
+					<FormButton
+						id="previous-btn"
+						:is-outlined="true"
+						@click="scrollToPaymentSection"
+					>
+						{{ $t( 'donation_form_section_back' ) }}
+					</FormButton>
+					<PaymentTextFormButton
+						id="submit-btn"
+						:is-loading="store.getters.isValidating"
+						:payment-type="paymentSummary.paymentType"
+						@click="submit"
+					/>
+				</template>
+
+			</FormSummary>
+
+			<form :action="`/donation/add?${campaignParams}`" method="post" ref="submitValuesForm" id="submit-form">
+				<SubmitValues :tracking-data="trackingData" :campaign-values="campaignValues"/>
+			</form>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { TrackingData } from '@src/view_models/TrackingData';
+import { Country } from '@src/view_models/Country';
+import { AddressValidation } from '@src/view_models/Validation';
+import { Salutation } from '@src/view_models/Salutation';
+import { CampaignValues } from '@src/view_models/CampaignValues';
+import PaymentSection from '@src/components/pages/donation_form/FormSections/PaymentSection.vue';
+import PersonalDataSection from '@src/components/pages/donation_form/FormSections/PersonalDataSectionAnonymousChoice.vue';
+import IbanFields from '@src/components/shared/IbanFields.vue';
+import DonationSummary from '@src/components/pages/donation_form/DonationSummary.vue';
+import PaymentTextFormButton from '@src/components/shared/form_elements/PaymentTextFormButton.vue';
+import FormButton from '@src/components/shared/form_elements/FormButton.vue';
+import FormSummary from '@src/components/shared/FormSummary.vue';
+import SubmitValues from '@src/components/pages/donation_form/SubmitValues.vue';
+import ErrorSummary from '@src/components/pages/donation_form/ErrorSummary.vue';
+import { default as OptOutErrorSummary } from '@src/components/pages/donation_form/AddressOptOut/ErrorSummary.vue';
+import { useDonationFormSubmitHandler } from '@src/components/pages/donation_form/useDonationFormSubmitHandler';
+import { QUERY_STRING_INJECTION_KEY } from '@src/util/createCampaignQueryString';
+import { usePaymentFunctions } from '@src/components/pages/donation_form/usePaymentFunctions';
+import { useAddressSummary } from '@src/components/pages/donation_form/useAddressSummary';
+import { useAddressTypeFunctions } from '@src/components/shared/composables/useAddressTypeFunctions';
+import { trackDynamicForm } from '@src/util/tracking';
+import { useAddressOptOutModel } from '@src/components/pages/donation_form/AddressOptOut/useAddressOptOut';
+
+defineOptions( {
+	name: 'DonationForm',
+} );
+
+interface Props {
+	assetsPath: string;
+	validateAddressUrl: string;
+	validateEmailUrl: string;
+	validateBankDataUrl: string;
+	validateLegacyBankDataUrl: string;
+	paymentAmounts: number[];
+	paymentIntervals: number[];
+	paymentTypes: string[];
+	countries: Country[];
+	salutations: Salutation[];
+	trackingData: TrackingData;
+	campaignValues: CampaignValues;
+	addressValidationPatterns: AddressValidation;
+}
+const props = defineProps<Props>();
+
+const store = useStore();
+const { isDirectDebitPayment, paymentSummary } = usePaymentFunctions( store );
+const { addressSummary, inlineSummaryLanguageItem } = useAddressSummary( store );
+const {
+	disabledAddressTypes,
+	addressType,
+	addressTypeIsInvalid,
+	addressTypeName,
+	setAddressType,
+} = useAddressTypeFunctions( store );
+const addressOptOut = useAddressOptOutModel( store );
+
+const campaignParams = inject<string>( QUERY_STRING_INJECTION_KEY, '' );
+
+const { submit, submitValuesForm, showErrorSummary } = useDonationFormSubmitHandler(
+	store,
+	addressType,
+	isDirectDebitPayment,
+	props.validateAddressUrl,
+	props.validateEmailUrl
+);
+
+const scrollToPaymentSection = () => {
+	const scrollIntoViewElement = document.getElementById( 'payment-section-top-scroll-target' );
+	if ( scrollIntoViewElement ) {
+		scrollIntoViewElement.scrollIntoView( { behavior: 'smooth' } );
+	}
+};
+
+onMounted( () => {
+	trackDynamicForm();
+} );
+
+</script>
diff --git a/tests/unit/components/pages/donation_form/DonationFormAnonymousChoice.spec.ts b/tests/unit/components/pages/donation_form/DonationFormAnonymousChoice.spec.ts
new file mode 100644
index 00000000..02f9466e
--- /dev/null
+++ b/tests/unit/components/pages/donation_form/DonationFormAnonymousChoice.spec.ts
@@ -0,0 +1,462 @@
+import { flushPromises, mount, VueWrapper } from '@vue/test-utils';
+import DonationForm from '@src/components/pages/donation_form/SubPages/DonationFormAnonymousChoice.vue';
+import countries from '@test/data/countries';
+import { AddressValidation } from '@src/view_models/Validation';
+import { createStore } from '@src/store/donation_store';
+import { nextTick } from 'vue';
+import axios from 'axios';
+import { newSucceedingBankValidationResource } from '@test/unit/TestDoubles/SucceedingBankValidationResource';
+import { IBAN } from '@test/data/bankdata';
+
+jest.mock( 'axios' );
+const mockedAxios = axios as jest.Mocked<typeof axios>;
+
+declare global {
+	namespace NodeJS {
+		interface Global {
+			window: Window;
+		}
+	}
+}
+
+const errorSummaryItemIsFunctional = ( wrapper: VueWrapper<any>, formElement: string, scrollElement: string ): boolean => {
+	const errorItemExists = wrapper.find( `.error-summary a[href="#${formElement}"]` ).exists();
+	const formElementExists = wrapper.find( `#${formElement}` ).exists();
+	const scrollElementExists = wrapper.find( `#${scrollElement}` ).exists();
+
+	return errorItemExists && formElementExists && scrollElementExists;
+};
+
+describe( 'DonationFormAnonymousChoice.vue', () => {
+
+	beforeEach( () => {
+		global.window.scrollTo = jest.fn();
+		jest.useFakeTimers();
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+		document.getElementsByTagName( 'html' )[ 0 ].innerHTML = '';
+	} );
+
+	const getWrapper = (): VueWrapper<any> => {
+		const store = createStore();
+		return mount( DonationForm, {
+			props: {
+				assetsPath: '',
+				paymentAmounts: [ 500, 1000, 2000 ],
+				paymentIntervals: [ 0, 1, 3, 6, 12 ],
+				paymentTypes: [ 'BEZ', 'PPL', 'UEB', 'BTC' ],
+				validateAddressUrl: 'https://example.com/address-check',
+				countries: countries,
+				trackingData: { bannerImpressionCount: 0, impressionCount: 0 },
+				campaignValues: { campaign: 'nicholas', keyword: 'cage' },
+				validateEmailUrl: '',
+				validateBankDataUrl: '',
+				validateLegacyBankDataUrl: '',
+				salutations: [
+					{
+						label: 'Mr',
+						value: 'Mr',
+						display: 'Mr',
+						greetings: {
+							formal: 'Mr',
+							informal: 'Mr',
+							lastNameInformal: 'Mr',
+						},
+					},
+					{
+						label: 'Ms',
+						value: 'Ms',
+						display: 'Ms',
+						greetings: {
+							formal: 'Ms',
+							informal: 'Ms',
+							lastNameInformal: 'Ms',
+						},
+					},
+				],
+				addressValidationPatterns: { postcode: '', country: null } as AddressValidation,
+			},
+			global: {
+				plugins: [ store ],
+				provide: {
+					bankValidationResource: newSucceedingBankValidationResource(),
+				},
+			},
+			attachTo: document.body,
+		} );
+	};
+
+	it( 'sets the correct default field values', async () => {
+		const wrapper = getWrapper();
+
+		expect( wrapper.find<HTMLInputElement>( '#interval-0' ).element.checked ).toBeTruthy();
+	} );
+
+	it( 'handles the error summary when no address choice was selected before submitting', async () => {
+		const wrapper = getWrapper();
+
+		await wrapper.find( 'input[name="paymentType"][value="UEB"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="amount"][value="500"]' ).trigger( 'change' );
+		await jest.runAllTimersAsync();
+
+		await wrapper.find( '#submit-btn' ).trigger( 'click' );
+		await nextTick();
+		await nextTick();
+
+		expect( wrapper.find( '.error-summary' ).exists() ).toBeTruthy();
+
+		expect( errorSummaryItemIsFunctional( wrapper, 'addressOptOut-1', 'address-opt-out-scroll-target' ) ).toBeTruthy();
+
+		// Select "No" for address question
+		await wrapper.find( 'input[name="address-opt-out"][value="false"]' ).trigger( 'change' );
+		await nextTick();
+		await nextTick();
+
+		await jest.runAllTimersAsync();
+
+		expect( wrapper.find( '.error-summary' ).exists() ).toBeFalsy();
+	} );
+
+	it( 'handles the error summary when person address type was selected before submitting', async () => {
+		const wrapper = getWrapper();
+
+		await wrapper.find( 'input[name="address-opt-out"][value="true"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="addressType"][value="0"]' ).trigger( 'change' );
+		await wrapper.find( '#person-country' ).setValue( 'I am clearly not a country' );
+		await wrapper.find( '#person-country' ).trigger( 'blur' );
+		await jest.runAllTimersAsync();
+
+		await wrapper.find( '#submit-btn' ).trigger( 'click' );
+		await nextTick();
+		await nextTick();
+
+		expect( errorSummaryItemIsFunctional( wrapper, 'paymentType-0', 'payment-form-type-scroll-target' ) ).toBeTruthy();
+
+		// Make the IBAN field appear
+		await wrapper.find( 'input[name="paymentType"][value="BEZ"]' ).trigger( 'change' );
+		await wrapper.find( '#submit-btn' ).trigger( 'click' );
+		await nextTick();
+		await nextTick();
+
+		expect( wrapper.find( '.error-summary' ).exists() ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'amount-500', 'payment-form-amount-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'iban', 'iban-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'person-salutation-0', 'person-salutation-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'person-first-name', 'person-first-name-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'person-last-name', 'person-last-name-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'person-street', 'person-street-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'person-post-code', 'person-post-code-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'person-city', 'person-city-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'person-country', 'person-country-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'person-email', 'person-email-scroll-target' ) ).toBeTruthy();
+
+		await wrapper.find( 'input[name="amount"][value="500"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="salutation"][value="Mr"]' ).trigger( 'change' );
+
+		await wrapper.find( '#iban' ).setValue( IBAN );
+		await wrapper.find( '#iban' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-first-name' ).setValue( 'first-name' );
+		await wrapper.find( '#person-first-name' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-last-name' ).setValue( 'last-name' );
+		await wrapper.find( '#person-last-name' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-street' ).setValue( 'street' );
+		await wrapper.find( '#person-street' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-post-code' ).setValue( '12345' );
+		await wrapper.find( '#person-post-code' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-city' ).setValue( 'city' );
+		await wrapper.find( '#person-city' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-country' ).setValue( countries[ 0 ].countryFullName );
+		await wrapper.find( '#person-country' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-email' ).setValue( 'joe@dolan.com' );
+		await wrapper.find( '#person-email' ).trigger( 'blur' );
+
+		await jest.runAllTimersAsync();
+
+		expect( wrapper.find( '.error-summary' ).exists() ).toBeFalsy();
+	} );
+
+	it( 'handles the error summary when company address type was selected before submitting', async () => {
+		const wrapper = getWrapper();
+
+		await wrapper.find( 'input[name="address-opt-out"][value="true"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="addressType"][value="1"]' ).trigger( 'change' );
+		await wrapper.find( '#company-country' ).setValue( 'I am clearly not a country' );
+		await wrapper.find( '#company-country' ).trigger( 'blur' );
+		await jest.runAllTimersAsync();
+
+		await wrapper.find( '#submit-btn' ).trigger( 'click' );
+		await nextTick();
+		await nextTick();
+
+		expect( errorSummaryItemIsFunctional( wrapper, 'paymentType-0', 'payment-form-type-scroll-target' ) ).toBeTruthy();
+
+		// Make the IBAN field appear
+		await wrapper.find( 'input[name="paymentType"][value="BEZ"]' ).trigger( 'change' );
+		await wrapper.find( '#submit-btn' ).trigger( 'click' );
+		await nextTick();
+		await nextTick();
+
+		expect( wrapper.find( '.error-summary' ).exists() ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'amount-500', 'payment-form-amount-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'iban', 'iban-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'company-company-name', 'company-company-name-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'company-street', 'company-street-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'company-post-code', 'company-post-code-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'company-city', 'company-city-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'company-country', 'company-country-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'company-email', 'company-email-scroll-target' ) ).toBeTruthy();
+
+		await wrapper.find( 'input[name="amount"][value="500"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="paymentType"][value="PPL"]' ).trigger( 'change' );
+
+		await wrapper.find( 'input[name="salutation"][value="Mr"]' ).trigger( 'change' );
+
+		await wrapper.find( '#company-company-name' ).setValue( 'company-name' );
+		await wrapper.find( '#company-company-name' ).trigger( 'blur' );
+
+		await wrapper.find( '#company-street' ).setValue( 'street' );
+		await wrapper.find( '#company-street' ).trigger( 'blur' );
+
+		await wrapper.find( '#company-post-code' ).setValue( '12345' );
+		await wrapper.find( '#company-post-code' ).trigger( 'blur' );
+
+		await wrapper.find( '#company-city' ).setValue( 'city' );
+		await wrapper.find( '#company-city' ).trigger( 'blur' );
+
+		await wrapper.find( '#company-country' ).setValue( countries[ 0 ].countryFullName );
+		await wrapper.find( '#company-country' ).trigger( 'blur' );
+
+		await wrapper.find( '#company-email' ).setValue( 'joe@dolan.com' );
+		await wrapper.find( '#company-email' ).trigger( 'blur' );
+
+		await jest.runAllTimersAsync();
+
+		expect( wrapper.find( '.error-summary' ).exists() ).toBeFalsy();
+	} );
+
+	it( 'handles the error summary when without address type was selected before submitting', async () => {
+		const wrapper = getWrapper();
+
+		await wrapper.find( 'input[name="address-opt-out"][value="false"]' ).trigger( 'change' );
+
+		await wrapper.find( '#submit-btn' ).trigger( 'click' );
+		await nextTick();
+		await nextTick();
+		await flushPromises();
+
+		expect( wrapper.find( '.error-summary' ).exists() ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'amount-500', 'payment-form-amount-scroll-target' ) ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'paymentType-0', 'payment-form-type-scroll-target' ) ).toBeTruthy();
+
+		await wrapper.find( 'input[name="amount"][value="500"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="paymentType"][value="PPL"]' ).trigger( 'change' );
+
+		await jest.runAllTimersAsync();
+
+		expect( wrapper.find( '.error-summary' ).exists() ).toBeFalsy();
+	} );
+
+	it( 'submits the form for a person', async () => {
+		mockedAxios.post.mockResolvedValue( { data: { status: 'OK' } } );
+		const wrapper = getWrapper();
+
+		const submitForm = wrapper.find<HTMLFormElement>( '#submit-form' );
+		submitForm.element.submit = jest.fn();
+
+		await wrapper.find( 'input[name="amount"][value="500"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="paymentType"][value="BEZ"]' ).trigger( 'change' );
+
+		await wrapper.find( '#iban' ).setValue( IBAN );
+		await wrapper.find( '#iban' ).trigger( 'blur' );
+
+		await wrapper.find( 'input[name="address-opt-out"][value="true"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="addressType"][value="0"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="salutation"][value="Mr"]' ).trigger( 'change' );
+
+		await wrapper.find( '#person-first-name' ).setValue( 'first-name' );
+		await wrapper.find( '#person-first-name' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-last-name' ).setValue( 'last-name' );
+		await wrapper.find( '#person-last-name' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-street' ).setValue( 'street' );
+		await wrapper.find( '#person-street' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-post-code' ).setValue( '12345' );
+		await wrapper.find( '#person-post-code' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-city' ).setValue( 'city' );
+		await wrapper.find( '#person-city' ).trigger( 'blur' );
+
+		await jest.runAllTimersAsync();
+
+		await wrapper.find( '#person-country' ).setValue( countries[ 0 ].countryFullName );
+		await wrapper.find( '#person-country' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-email' ).setValue( 'joe@dolan.com' );
+		await wrapper.find( '#person-email' ).trigger( 'blur' );
+
+		await wrapper.find( '#submit-btn' ).trigger( 'click' );
+
+		await jest.runAllTimersAsync();
+		await flushPromises();
+
+		expect( submitForm.element.submit ).toHaveBeenCalled();
+	} );
+
+	it( 'submits the form for a company', async () => {
+		mockedAxios.post.mockResolvedValue( { data: { status: 'OK' } } );
+		const wrapper = getWrapper();
+
+		const submitForm = wrapper.find<HTMLFormElement>( '#submit-form' );
+		submitForm.element.submit = jest.fn();
+
+		await wrapper.find( 'input[name="amount"][value="500"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="paymentType"][value="BEZ"]' ).trigger( 'change' );
+
+		await wrapper.find( '#iban' ).setValue( IBAN );
+		await wrapper.find( '#iban' ).trigger( 'blur' );
+
+		await wrapper.find( 'input[name="address-opt-out"][value="true"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="addressType"][value="1"]' ).trigger( 'change' );
+
+		await wrapper.find( '#company-company-name' ).setValue( 'company-name' );
+		await wrapper.find( '#company-company-name' ).trigger( 'blur' );
+
+		await wrapper.find( '#company-street' ).setValue( 'street' );
+		await wrapper.find( '#company-street' ).trigger( 'blur' );
+
+		await wrapper.find( '#company-post-code' ).setValue( '12345' );
+		await wrapper.find( '#company-post-code' ).trigger( 'blur' );
+
+		await wrapper.find( '#company-city' ).setValue( 'city' );
+		await wrapper.find( '#company-city' ).trigger( 'blur' );
+
+		await jest.runAllTimersAsync();
+
+		await wrapper.find( '#company-country' ).setValue( countries[ 0 ].countryFullName );
+		await wrapper.find( '#company-country' ).trigger( 'blur' );
+
+		await wrapper.find( '#company-email' ).setValue( 'joe@dolan.com' );
+		await wrapper.find( '#company-email' ).trigger( 'blur' );
+
+		await wrapper.find( '#submit-btn' ).trigger( 'click' );
+
+		await jest.runAllTimersAsync();
+		await flushPromises();
+
+		expect( submitForm.element.submit ).toHaveBeenCalled();
+	} );
+
+	it( 'submits the form for anonymous', async () => {
+		mockedAxios.post.mockResolvedValue( { data: { status: 'OK' } } );
+		const wrapper = getWrapper();
+
+		const submitForm = wrapper.find<HTMLFormElement>( '#submit-form' );
+		submitForm.element.submit = jest.fn();
+
+		await wrapper.find( 'input[name="amount"][value="500"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="paymentType"][value="PPL"]' ).trigger( 'change' );
+
+		await wrapper.find( 'input[name="address-opt-out"][value="false"]' ).trigger( 'change' );
+
+		await wrapper.find( '#submit-btn' ).trigger( 'click' );
+
+		await jest.runAllTimersAsync();
+		await flushPromises();
+
+		expect( submitForm.element.submit ).toHaveBeenCalled();
+	} );
+
+	it( 'switching between payment types with empty iban should reset iban validity', async () => {
+		mockedAxios.post.mockResolvedValue( { data: { status: 'OK' } } );
+		const wrapper = getWrapper();
+
+		const submitForm = wrapper.find<HTMLFormElement>( '#submit-form' );
+		submitForm.element.submit = jest.fn();
+
+		await wrapper.find( 'input[name="amount"][value="500"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="paymentType"][value="UEB"]' ).trigger( 'change' );
+
+		await wrapper.find( 'input[name="address-opt-out"][value="true"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="addressType"][value="0"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="salutation"][value="Mr"]' ).trigger( 'change' );
+
+		await wrapper.find( '#person-first-name' ).setValue( 'first-name' );
+		await wrapper.find( '#person-first-name' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-last-name' ).setValue( 'last-name' );
+		await wrapper.find( '#person-last-name' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-street' ).setValue( 'street' );
+		await wrapper.find( '#person-street' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-post-code' ).setValue( '12345' );
+		await wrapper.find( '#person-post-code' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-city' ).setValue( 'city' );
+		await wrapper.find( '#person-city' ).trigger( 'blur' );
+
+		await jest.runAllTimersAsync();
+
+		await wrapper.find( '#person-country' ).setValue( countries[ 0 ].countryFullName );
+		await wrapper.find( '#person-country' ).trigger( 'blur' );
+
+		await wrapper.find( '#person-email' ).setValue( 'joe@dolan.com' );
+		await wrapper.find( '#person-email' ).trigger( 'blur' );
+
+		// change to BEZ to make the IBAN field appear
+		await wrapper.find( 'input[name="paymentType"][value="BEZ"]' ).trigger( 'change' );
+		await wrapper.find( '#submit-btn' ).trigger( 'click' );
+		await nextTick();
+
+		await jest.runAllTimersAsync();
+		await flushPromises();
+
+		expect( wrapper.find( '.error-summary' ).exists() ).toBeTruthy();
+		expect( errorSummaryItemIsFunctional( wrapper, 'iban', 'iban-scroll-target' ) ).toBeTruthy();
+
+		await wrapper.find( '#iban' ).setValue( IBAN );
+		await wrapper.find( '#iban' ).trigger( 'blur' );
+
+		expect( wrapper.find( '.error-summary' ).exists() ).toBeFalsy();
+	} );
+
+	it( 'preserves previous address type choice when deciding against an address and then for giving an address', async () => {
+		const wrapper = getWrapper();
+
+		await wrapper.find( 'input[name="address-opt-out"][value="true"]' ).trigger( 'change' );
+
+		await wrapper.find( 'input[name="addressType"][value="0"]' ).trigger( 'change' );
+		expect( wrapper.find<HTMLInputElement>( 'input[name="addressType"][value="0"]' ).element.checked ).toBeTruthy();
+
+		// Set to company, then destroy form by selecting "no" in the address choice
+		await wrapper.find( 'input[name="addressType"][value="1"]' ).trigger( 'change' );
+		await wrapper.find( 'input[name="address-opt-out"][value="false"]' ).trigger( 'change' );
+		expect( wrapper.find<HTMLInputElement>( 'input[name="addressType"][value="1"]' ).exists() ).toBeFalsy();
+
+		// Show the form again by selecting "yes" in the address choice, check for company
+		await wrapper.find( 'input[name="address-opt-out"][value="true"]' ).trigger( 'change' );
+		expect( wrapper.find<HTMLInputElement>( 'input[name="addressType"][value="1"]' ).element.checked ).toBeTruthy();
+	} );
+
+	it( 'scrolls to payment section when button for changing payment data is clicked', async () => {
+		const scrollElement = { scrollIntoView: jest.fn() };
+		Object.defineProperty( document, 'getElementById', { writable: true, configurable: true, value: () => scrollElement } );
+
+		const wrapper = getWrapper();
+
+		await wrapper.find( '#previous-btn' ).trigger( 'click' );
+
+		expect( scrollElement.scrollIntoView ).toHaveBeenCalledWith( { behavior: 'smooth' } );
+	} );
+} );