From df83f043d2879ed5a144fc37f08176fae1d41800 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ant=C3=B3nio=20Ferreira?= <m1aw@users.noreply.github.com>
Date: Fri, 10 Jan 2025 18:24:13 +0100
Subject: [PATCH 01/20] Partial Feature: PayID into PayTo component branch
 (#3069)

* adds PayTo component shell

* payto segmented controller

* add support to second description

* adds email and refactor identifier to enum

* adds pay input fields, starts validation

* fix validator

* splits PhoneInput and passes state to PayTo

* tests and PR comments

* fix tests
---
 .../Ach/components/AchInput/AchInput.tsx      |   2 +
 .../components/MBWayInput/MBWayInput.tsx      |   4 +-
 .../lib/src/components/PayTo/PayTo.test.ts    |  72 +++++++
 packages/lib/src/components/PayTo/PayTo.tsx   | 135 +++++++++++++
 .../components/PayTo/components/BSBInput.tsx  |  17 ++
 .../PayTo/components/IdentifierSelector.tsx   |  81 ++++++++
 .../PayTo/components/PayIDInput.scss          |  10 +
 .../PayTo/components/PayIDInput.tsx           | 190 ++++++++++++++++++
 .../PayTo/components/PayToInput.tsx           |  62 ++++++
 .../PayTo/components/PayToPhone.tsx           |  41 ++++
 .../PayTo/components/validate.test.ts         |  64 ++++++
 .../components/PayTo/components/validate.ts   |  76 +++++++
 packages/lib/src/components/PayTo/index.ts    |   1 +
 packages/lib/src/components/components-map.ts |   2 +
 .../lib/src/components/components-name-map.ts |   1 +
 .../CompanyDetails/CompanyDetails.tsx         |   5 +-
 .../FormFields/Fieldset/Fieldset.scss         |  15 +-
 .../internal/FormFields/Fieldset/Fieldset.tsx |  13 +-
 .../internal/FormFields/FormFields.scss       |  29 ++-
 .../PersonalDetails/PersonalDetails.tsx       |   3 +-
 .../{PhoneInput.tsx => PhoneInputFields.tsx}  |  81 +++-----
 ...Input.test.tsx => PhoneInputForm.test.tsx} |  10 +-
 .../internal/PhoneInput/PhoneInputForm.tsx    |  71 +++++++
 .../components/internal/PhoneInput/index.ts   |   2 +-
 .../components/internal/PhoneInput/types.ts   |   2 +-
 .../SegmentedControl/SegmentedControl.tsx     |  31 ++-
 packages/lib/src/components/tx-variants.ts    |   1 +
 packages/lib/src/core/utils.ts                |  11 +
 .../utils/Validator/ValidationRuleResult.ts   |   4 +-
 packages/lib/src/utils/Validator/Validator.ts |   4 +
 packages/lib/src/utils/Validator/types.ts     |   6 +-
 packages/lib/src/utils/useForm/types.ts       |   4 +-
 .../stories/components/PayTo.stories.tsx      |  24 +++
 .../stories/internals/PhoneInput.stories.tsx  |   6 +-
 packages/server/translations/en-US.json       |  11 +-
 35 files changed, 1015 insertions(+), 76 deletions(-)
 create mode 100644 packages/lib/src/components/PayTo/PayTo.test.ts
 create mode 100644 packages/lib/src/components/PayTo/PayTo.tsx
 create mode 100644 packages/lib/src/components/PayTo/components/BSBInput.tsx
 create mode 100644 packages/lib/src/components/PayTo/components/IdentifierSelector.tsx
 create mode 100644 packages/lib/src/components/PayTo/components/PayIDInput.scss
 create mode 100644 packages/lib/src/components/PayTo/components/PayIDInput.tsx
 create mode 100644 packages/lib/src/components/PayTo/components/PayToInput.tsx
 create mode 100644 packages/lib/src/components/PayTo/components/PayToPhone.tsx
 create mode 100644 packages/lib/src/components/PayTo/components/validate.test.ts
 create mode 100644 packages/lib/src/components/PayTo/components/validate.ts
 create mode 100644 packages/lib/src/components/PayTo/index.ts
 rename packages/lib/src/components/internal/PhoneInput/{PhoneInput.tsx => PhoneInputFields.tsx} (58%)
 rename packages/lib/src/components/internal/PhoneInput/{PhoneInput.test.tsx => PhoneInputForm.test.tsx} (90%)
 create mode 100644 packages/lib/src/components/internal/PhoneInput/PhoneInputForm.tsx
 create mode 100644 packages/lib/storybook/stories/components/PayTo.stories.tsx

diff --git a/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx b/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx
index 8454915d85..cdf6cfaeb3 100644
--- a/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx
+++ b/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx
@@ -128,6 +128,8 @@ function AchInput(props: ACHInputProps) {
         props.onChange({ data, isValid, storePaymentMethod });
     }, [data, valid, errors, storePaymentMethod]);
 
+    console.log('ach props 2', props);
+
     return (
         <div className="adyen-checkout__ach">
             <FormInstruction />
diff --git a/packages/lib/src/components/MBWay/components/MBWayInput/MBWayInput.tsx b/packages/lib/src/components/MBWay/components/MBWayInput/MBWayInput.tsx
index a609ec195a..7df30783fa 100644
--- a/packages/lib/src/components/MBWay/components/MBWayInput/MBWayInput.tsx
+++ b/packages/lib/src/components/MBWay/components/MBWayInput/MBWayInput.tsx
@@ -3,7 +3,7 @@ import { useState, useRef } from 'preact/hooks';
 import { useCoreContext } from '../../../../core/Context/CoreProvider';
 import { MBWayInputProps } from './types';
 import './MBWayInput.scss';
-import PhoneInput from '../../../internal/PhoneInput';
+import PhoneInputForm from '../../../internal/PhoneInput';
 import LoadingWrapper from '../../../internal/LoadingWrapper';
 import usePhonePrefixes from '../../../internal/PhoneInput/usePhonePrefixes';
 
@@ -28,7 +28,7 @@ function MBWayInput(props: MBWayInputProps) {
     return (
         <LoadingWrapper status={prefixLoadingStatus}>
             <div className="adyen-checkout__mb-way">
-                <PhoneInput {...props} items={phonePrefixes} ref={phoneInputRef} onChange={onChange} data={props.data} />
+                <PhoneInputForm {...props} items={phonePrefixes} ref={phoneInputRef} onChange={onChange} data={props.data} />
 
                 {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}
             </div>
diff --git a/packages/lib/src/components/PayTo/PayTo.test.ts b/packages/lib/src/components/PayTo/PayTo.test.ts
new file mode 100644
index 0000000000..4ab8abdc16
--- /dev/null
+++ b/packages/lib/src/components/PayTo/PayTo.test.ts
@@ -0,0 +1,72 @@
+import { render, screen } from '@testing-library/preact';
+import PayTo from './PayTo';
+import userEvent from '@testing-library/user-event';
+import getDataset from '../../core/Services/get-dataset';
+
+jest.mock('../../core/Services/get-dataset');
+(getDataset as jest.Mock).mockImplementation(
+    jest.fn(() => {
+        return Promise.resolve([{ id: 'AUS', prefix: '+61' }]);
+    })
+);
+
+describe('PayTo', () => {
+    let onSubmitMock;
+    let user;
+
+    beforeEach(() => {
+        onSubmitMock = jest.fn();
+        user = userEvent.setup();
+    });
+
+    test('should render payment and show PayID page', async () => {
+        const payTo = new PayTo(global.core, {
+            i18n: global.i18n,
+            loadingContext: 'test',
+            modules: { resources: global.resources }
+        });
+
+        render(payTo.render());
+        expect(await screen.findByText(/Enter the PayID and account details that are connected to your Payto account./i)).toBeTruthy();
+        expect(await screen.findByLabelText(/Prefix/i)).toBeTruthy();
+        expect(await screen.findByLabelText(/Mobile number/i)).toBeTruthy();
+        expect(await screen.findByLabelText(/First name/i)).toBeTruthy();
+        expect(await screen.findByLabelText(/Last name/i)).toBeTruthy();
+    });
+
+    test('should render continue button', async () => {
+        const payTo = new PayTo(global.core, {
+            onSubmit: onSubmitMock,
+            i18n: global.i18n,
+            loadingContext: 'test',
+            modules: { resources: global.resources }
+        });
+
+        render(payTo.render());
+        const button = await screen.findByRole('button', { name: 'Confirm purchase' });
+
+        // check if button actually triggers submit
+        await user.click(button);
+        expect(onSubmitMock).toHaveBeenCalledTimes(0);
+
+        //TODO check validation fails
+    });
+
+    test('should change to different identifier when selected', async () => {
+        const payTo = new PayTo(global.core, {
+            onSubmit: onSubmitMock,
+            i18n: global.i18n,
+            loadingContext: 'test',
+            modules: { resources: global.resources },
+            showPayButton: false
+        });
+
+        render(payTo.render());
+
+        await user.click(screen.queryByRole('button', { name: 'Mobile' }));
+        await user.click(screen.queryByRole('option', { name: /Email/i }));
+
+        expect(screen.queryByLabelText(/Prefix/i)).toBeFalsy();
+        expect(screen.getByLabelText(/Email/i)).toBeTruthy();
+    });
+});
diff --git a/packages/lib/src/components/PayTo/PayTo.tsx b/packages/lib/src/components/PayTo/PayTo.tsx
new file mode 100644
index 0000000000..abcb11e237
--- /dev/null
+++ b/packages/lib/src/components/PayTo/PayTo.tsx
@@ -0,0 +1,135 @@
+import { h } from 'preact';
+import UIElement from '../internal/UIElement/UIElement';
+import { CoreProvider } from '../../core/Context/CoreProvider';
+import Await from '../../components/internal/Await';
+import SRPanelProvider from '../../core/Errors/SRPanelProvider';
+
+/*
+Types (previously in their own file)
+ */
+import { UIElementProps } from '../internal/UIElement/types';
+import { TxVariants } from '../tx-variants';
+import PayToInput from './components/PayToInput';
+import { PayIdFormData } from './components/PayIDInput';
+import { PayToIdentifierEnum } from './components/IdentifierSelector';
+
+export interface PayToConfiguration extends UIElementProps {
+    paymentData?: any;
+    data?: PayToData;
+    placeholders?: any; //TODO
+}
+
+export interface PayToData extends PayIdFormData {
+    shopperAccountIdentifier: string;
+}
+
+/*
+Await Config (previously in its own file)
+ */
+const COUNTDOWN_MINUTES = 15; // min
+const THROTTLE_TIME = 60000; // ms
+const THROTTLE_INTERVAL = 10000; // ms
+
+const config = {
+    COUNTDOWN_MINUTES,
+    THROTTLE_TIME,
+    THROTTLE_INTERVAL,
+    showCountdownTimer: false
+};
+
+const getAccountIdentifier = (state: PayToData) => {
+    switch (state.selectedIdentifier) {
+        case PayToIdentifierEnum.email:
+            return state.email;
+        case PayToIdentifierEnum.abn:
+            return state.abn;
+        case PayToIdentifierEnum.orgid:
+            return state.orgid;
+        case PayToIdentifierEnum.phone:
+            return `${state.phonePrefix}-${state.phoneNumber}`;
+    }
+};
+/**
+ *
+ */
+export class PayToElement extends UIElement<PayToConfiguration> {
+    public static type = TxVariants.payto;
+
+    protected static defaultProps = {
+        placeholders: {}
+    };
+
+    formatProps(props) {
+        return {
+            ...props,
+            data: {
+                ...props.data,
+                phonePrefix: props.data?.phonePrefix || '+61' // use AUS as default value
+            }
+        };
+    }
+
+    /**
+     * Formats the component data output
+     */
+    formatData() {
+        return {
+            paymentMethod: {
+                type: PayToElement.type,
+                shopperAccountIdentifier: getAccountIdentifier(this.state.data)
+            }
+        };
+    }
+
+    get isValid(): boolean {
+        return !!this.state.isValid;
+    }
+
+    get displayName(): string {
+        return this.props.name;
+    }
+
+    render() {
+        if (this.props.paymentData) {
+            return (
+                <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>
+                    <SRPanelProvider srPanel={this.props.modules.srPanel}>
+                        <Await
+                            ref={ref => {
+                                this.componentRef = ref;
+                            }}
+                            clientKey={this.props.clientKey}
+                            paymentData={this.props.paymentData}
+                            onError={this.props.onError}
+                            onComplete={this.onComplete}
+                            brandLogo={this.icon}
+                            type={this.constructor['type']}
+                            messageText={this.props.i18n.get('ancv.confirmPayment')}
+                            awaitText={this.props.i18n.get('await.waitForConfirmation')}
+                            showCountdownTimer={config.showCountdownTimer}
+                            throttleTime={config.THROTTLE_TIME}
+                            throttleInterval={config.THROTTLE_INTERVAL}
+                            onActionHandled={this.onActionHandled}
+                        />
+                    </SRPanelProvider>
+                </CoreProvider>
+            );
+        }
+
+        return (
+            <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>
+                <PayToInput
+                    data={this.props.data}
+                    placeholders={this.props.placeholders}
+                    setComponentRef={this.setComponentRef}
+                    onSubmit={this.submit}
+                    onChange={this.setState}
+                    payButton={this.payButton}
+                    showPayButton={this.props.showPayButton}
+                />
+            </CoreProvider>
+        );
+    }
+}
+
+export default PayToElement;
diff --git a/packages/lib/src/components/PayTo/components/BSBInput.tsx b/packages/lib/src/components/PayTo/components/BSBInput.tsx
new file mode 100644
index 0000000000..e8257a09b8
--- /dev/null
+++ b/packages/lib/src/components/PayTo/components/BSBInput.tsx
@@ -0,0 +1,17 @@
+import { h } from 'preact';
+
+export default function BSBInput() {
+    // const { i18n } = useCoreContext();
+
+    // TODO type this
+    // const { handleChangeFor, triggerValidation, data, valid, errors } = useForm<any>({
+    //     schema: ['beneficiaryId']
+    // });
+    //
+    // const [status, setStatus] = useState<string>('ready');
+
+    // this.setStatus = setStatus;
+    // this.showValidation = triggerValidation;
+
+    return <p>BSBInput.tsx</p>;
+}
diff --git a/packages/lib/src/components/PayTo/components/IdentifierSelector.tsx b/packages/lib/src/components/PayTo/components/IdentifierSelector.tsx
new file mode 100644
index 0000000000..5f6e5dbde2
--- /dev/null
+++ b/packages/lib/src/components/PayTo/components/IdentifierSelector.tsx
@@ -0,0 +1,81 @@
+import { h } from 'preact';
+import Select from '../../internal/FormFields/Select';
+import { SelectTargetObject } from '../../internal/FormFields/Select/types';
+import Field from '../../internal/FormFields/Field';
+import { useCoreContext } from '../../../core/Context/CoreProvider';
+import Language from '../../../language';
+import { createEnumChecker } from '../../../core/utils';
+
+export enum PayToIdentifierEnum {
+    phone = 'phone',
+    email = 'email',
+    abn = 'abn',
+    orgid = 'orgid'
+}
+
+const payToIdentifierEnumCheck = createEnumChecker(PayToIdentifierEnum);
+
+export type PayToPayIDInputIdentifierValues = keyof typeof PayToIdentifierEnum;
+
+type PayIdOptionsType = { id: PayToPayIDInputIdentifierValues; nameKey: string }[];
+
+export const PAYID_IDENTIFIER_OPTIONS: PayIdOptionsType = [
+    {
+        id: PayToIdentifierEnum.phone,
+        nameKey: 'payto.payid.option.phone'
+    },
+    {
+        id: PayToIdentifierEnum.email,
+        nameKey: 'payto.payid.option.email'
+    },
+    {
+        id: PayToIdentifierEnum.abn,
+        nameKey: 'payto.payid.option.abn'
+    },
+    {
+        id: PayToIdentifierEnum.orgid,
+        nameKey: 'payto.payid.option.orgid'
+    }
+];
+
+interface IdentifierSelectorProps {
+    classNameModifiers?: string[];
+    selectedIdentifier: PayToPayIDInputIdentifierValues;
+    onSelectedIdentifier: (value: PayToPayIDInputIdentifierValues) => void;
+}
+
+const loadI18nForOptions = (i18n: Language, options: PayIdOptionsType) =>
+    options.map(option => ({
+        id: option.id,
+        name: i18n.get(option.nameKey)
+    }));
+
+export default function IdentifierSelector({ selectedIdentifier, onSelectedIdentifier, classNameModifiers }: IdentifierSelectorProps) {
+    const { i18n } = useCoreContext();
+
+    const hydratedOptions = loadI18nForOptions(i18n, PAYID_IDENTIFIER_OPTIONS);
+
+    // TODO this probably can by a bit tidier, clean up some of these types
+    //   maybe make Select type generic
+    const onChange = (e: { target: SelectTargetObject }) => {
+        // TODO clean this
+        const valueStr = e.target.value + '';
+
+        if (payToIdentifierEnumCheck(valueStr)) {
+            onSelectedIdentifier(valueStr);
+        }
+    };
+
+    return (
+        <Field
+            className={''}
+            name={'payid-identifier'}
+            useLabelElement={true}
+            label={i18n.get('payto.payid.label.identifier')}
+            showContextualElement={false}
+            classNameModifiers={classNameModifiers}
+        >
+            <Select filterable={false} items={hydratedOptions} selectedValue={selectedIdentifier} onChange={onChange} name={'payid-identifier'} />
+        </Field>
+    );
+}
diff --git a/packages/lib/src/components/PayTo/components/PayIDInput.scss b/packages/lib/src/components/PayTo/components/PayIDInput.scss
new file mode 100644
index 0000000000..5c2cada5d3
--- /dev/null
+++ b/packages/lib/src/components/PayTo/components/PayIDInput.scss
@@ -0,0 +1,10 @@
+@import 'styles/variable-generator';
+
+.adyen-checkout__fieldset--payto__payid_input {
+  margin-top: token(spacer-070);
+
+  .adyen-checkout__fieldset__fields {
+    margin-top: token(spacer-070);
+    gap: 0 token(spacer-060);
+  }
+}
diff --git a/packages/lib/src/components/PayTo/components/PayIDInput.tsx b/packages/lib/src/components/PayTo/components/PayIDInput.tsx
new file mode 100644
index 0000000000..61fb7898cc
--- /dev/null
+++ b/packages/lib/src/components/PayTo/components/PayIDInput.tsx
@@ -0,0 +1,190 @@
+import { h } from 'preact';
+import Fieldset from '../../internal/FormFields/Fieldset';
+import IdentifierSelector, { PayToIdentifierEnum } from './IdentifierSelector';
+import { useEffect, useRef } from 'preact/hooks';
+import useForm from '../../../utils/useForm';
+import PayToPhone from './PayToPhone';
+import InputEmail from '../../internal/FormFields/InputEmail';
+import { getErrorMessage } from '../../../utils/getErrorMessage';
+import Field from '../../internal/FormFields/Field';
+import { useCoreContext } from '../../../core/Context/CoreProvider';
+import InputText from '../../internal/FormFields/InputText';
+import { payIdValidationRules } from './validate';
+import './PayIDInput.scss';
+import { phoneFormatters } from '../../internal/PhoneInput/validate';
+import { ComponentMethodsRef } from '../../internal/UIElement/types';
+
+export interface PayIdFormData {
+    email: string;
+    phone: string;
+    abn: string;
+    orgid: string;
+    firstName: string;
+    lastName: string;
+    phoneNumber?: string;
+    phonePrefix?: string;
+    selectedIdentifier: PayToIdentifierEnum;
+}
+
+export interface PayIDInputProps {
+    defaultData: PayIdFormData;
+    placeholders: any; //TODO
+    onError: () => {};
+    onChange: (e) => void;
+    setComponentRef: (ref: ComponentMethodsRef) => void;
+}
+
+const BASE_SCHEMA = ['selectedIdentifier', 'firstName', 'lastName'];
+
+const IDENTIFIER_SCHEMA = {
+    [PayToIdentifierEnum.email]: ['email'],
+    [PayToIdentifierEnum.phone]: ['phoneNumber', 'phonePrefix'],
+    [PayToIdentifierEnum.abn]: ['abn'],
+    [PayToIdentifierEnum.orgid]: ['orgid']
+};
+
+export interface KlarnaComponentRef extends ComponentMethodsRef {}
+
+export default function PayIDInput({ setComponentRef, defaultData, placeholders, onError, onChange }: PayIDInputProps) {
+    const { i18n } = useCoreContext();
+
+    const form = useForm<PayIdFormData>({
+        schema: BASE_SCHEMA,
+        defaultData: { selectedIdentifier: PayToIdentifierEnum.phone, ...defaultData },
+        rules: payIdValidationRules,
+        formatters: phoneFormatters
+    });
+    const { handleChangeFor, triggerValidation, data, errors, valid, isValid, setSchema } = form;
+
+    //this.setStatus = setStatus;
+    this.triggerValidation = triggerValidation;
+
+    // handle the changes of identifier, each identifier gets its own schema
+    useEffect(() => {
+        // get the correct schema for each identifier and merge it with the base
+        setSchema([...IDENTIFIER_SCHEMA[data.selectedIdentifier], ...BASE_SCHEMA]);
+    }, [data.selectedIdentifier]);
+
+    // standard onChange propagate to parent state
+    useEffect(() => {
+        onChange({ data, valid, errors, isValid });
+    }, [data, valid, errors, isValid]);
+
+    const payToRef = useRef<ComponentMethodsRef>({
+        showValidation: triggerValidation
+    });
+
+    useEffect(() => {
+        setComponentRef(payToRef.current);
+    }, [setComponentRef]);
+
+    return (
+        <Fieldset classNameModifiers={['payto__payid_input']} label={'payto.payid.header'} description={'payto.payid.description'}>
+            <IdentifierSelector
+                classNameModifiers={['col-30']}
+                onSelectedIdentifier={handleChangeFor('selectedIdentifier')}
+                selectedIdentifier={data.selectedIdentifier}
+            />
+            {data.selectedIdentifier === PayToIdentifierEnum.phone && (
+                <PayToPhone onChange={handleChangeFor('phone', 'blur')} onError={onError} data={data} form={form} />
+            )}
+
+            {/* TODO probably worth refactoring this into  either re-usable components or builder */}
+            {data.selectedIdentifier === PayToIdentifierEnum.email && (
+                <Field
+                    label={i18n.get('shopperEmail')}
+                    classNameModifiers={['col-70', 'email']}
+                    errorMessage={getErrorMessage(i18n, errors.email, i18n.get('shopperEmail'))}
+                    dir={'ltr'}
+                    name={'email'}
+                    i18n={i18n}
+                >
+                    <InputEmail
+                        name={'email'}
+                        value={data.email}
+                        onInput={handleChangeFor('email', 'input')}
+                        onBlur={handleChangeFor('email', 'blur')}
+                        placeholder={placeholders?.shopperEmail}
+                        required={true}
+                    />
+                </Field>
+            )}
+
+            {data.selectedIdentifier === PayToIdentifierEnum.abn && (
+                <Field
+                    label={i18n.get('payto.payid.label.abn')}
+                    classNameModifiers={['col-70', 'abn']}
+                    errorMessage={getErrorMessage(i18n, errors.abn, i18n.get('payto.payid.label.abn'))}
+                    name={'ABN'}
+                    i18n={i18n}
+                >
+                    <InputText
+                        name={'abn'}
+                        value={data.abn}
+                        onInput={handleChangeFor('abn', 'input')}
+                        onBlur={handleChangeFor('abn', 'blur')}
+                        placeholder={placeholders?.abn}
+                        required={true}
+                    />
+                </Field>
+            )}
+
+            {data.selectedIdentifier === PayToIdentifierEnum.orgid && (
+                <Field
+                    label={i18n.get('payto.payid.label.orgid')}
+                    classNameModifiers={['col-70', 'orgid']}
+                    errorMessage={getErrorMessage(i18n, errors.orgid, i18n.get('payto.payid.label.orgid'))}
+                    name={'orgid'}
+                    i18n={i18n}
+                >
+                    <InputText
+                        name={'orgid'}
+                        value={data.orgid}
+                        onInput={handleChangeFor('orgid', 'input')}
+                        onBlur={handleChangeFor('orgid', 'blur')}
+                        placeholder={placeholders?.orgid}
+                        required={true}
+                    />
+                </Field>
+            )}
+
+            <Field
+                label={i18n.get('firstName')}
+                classNameModifiers={['col-50', 'firstName']}
+                errorMessage={getErrorMessage(i18n, errors.firstName, i18n.get('firstName'))}
+                name={'firstName'}
+                i18n={i18n}
+            >
+                <InputText
+                    name={'firstName'}
+                    value={data.firstName}
+                    classNameModifiers={['firstName']}
+                    onInput={handleChangeFor('firstName', 'input')}
+                    onBlur={handleChangeFor('firstName', 'input')}
+                    placeholder={placeholders?.firstName}
+                    spellCheck={false}
+                    required={true}
+                />
+            </Field>
+
+            <Field
+                label={i18n.get('lastName')}
+                classNameModifiers={['col-50', 'lastName']}
+                errorMessage={getErrorMessage(i18n, errors.lastName, i18n.get('lastName'))}
+                name={'lastName'}
+                i18n={i18n}
+            >
+                <InputText
+                    name={'lastName'}
+                    value={data.lastName}
+                    classNameModifiers={['lastName']}
+                    onInput={handleChangeFor('lastName', 'input')}
+                    onBlur={handleChangeFor('lastName', 'blur')}
+                    placeholder={placeholders?.lastName}
+                    spellCheck={false}
+                    required={true}
+                />
+            </Field>
+        </Fieldset>
+    );
+}
diff --git a/packages/lib/src/components/PayTo/components/PayToInput.tsx b/packages/lib/src/components/PayTo/components/PayToInput.tsx
new file mode 100644
index 0000000000..7a0c2839f7
--- /dev/null
+++ b/packages/lib/src/components/PayTo/components/PayToInput.tsx
@@ -0,0 +1,62 @@
+import { h } from 'preact';
+import LoadingWrapper from '../../internal/LoadingWrapper';
+import SegmentedControl from '../../internal/SegmentedControl';
+import { useState } from 'preact/hooks';
+import { SegmentedControlOptions } from '../../internal/SegmentedControl/SegmentedControl';
+import PayIDInput from './PayIDInput';
+import BSBInput from './BSBInput';
+import { useCoreContext } from '../../../core/Context/CoreProvider';
+
+const inputOptions: SegmentedControlOptions<any> = [
+    {
+        value: 'payid-option',
+        label: 'PayID',
+        htmlProps: {
+            id: 'payid-option', // TODO move this to i18n
+            'aria-controls': 'payid-input',
+            'aria-expanded': true // TODO move this logic to segmented controller
+        }
+    },
+    {
+        value: 'bsb-option',
+        label: 'BSB and account number', // TODO move this to i18n
+        htmlProps: {
+            id: 'bsb-option',
+            'aria-controls': 'bsb-input',
+            'aria-expanded': false // TODO move this logic to segmented controller
+        }
+    }
+];
+
+export default function PayToInput(props) {
+    const { i18n } = useCoreContext();
+
+    const [status, setStatus] = useState<string>('ready');
+
+    this.setStatus = setStatus;
+
+    const defaultOption = inputOptions[0].value;
+    const [selectedInput, setSelectedInput] = useState<string>(defaultOption);
+
+    const onChange = ({ data, valid, errors, isValid }) => {
+        props.onChange({ data, valid, errors, isValid });
+    };
+
+    return (
+        <LoadingWrapper>
+            <SegmentedControl selectedValue={selectedInput} options={inputOptions} onChange={setSelectedInput} />
+            {selectedInput === 'payid-option' && (
+                <PayIDInput
+                    setComponentRef={props.setComponentRef}
+                    onChange={onChange}
+                    defaultData={props.data}
+                    onError={props.onError}
+                    placeholders={props.placeholders}
+                />
+            )}
+            {selectedInput === 'bsb-option' && <BSBInput />}
+
+            {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}
+        </LoadingWrapper>
+    );
+}
diff --git a/packages/lib/src/components/PayTo/components/PayToPhone.tsx b/packages/lib/src/components/PayTo/components/PayToPhone.tsx
new file mode 100644
index 0000000000..fa1de5a070
--- /dev/null
+++ b/packages/lib/src/components/PayTo/components/PayToPhone.tsx
@@ -0,0 +1,41 @@
+import { h } from 'preact';
+import usePhonePrefixes from '../../internal/PhoneInput/usePhonePrefixes';
+import { useCoreContext } from '../../../core/Context/CoreProvider';
+import PhoneInputFields from '../../internal/PhoneInput/PhoneInputFields';
+import { Form } from '../../../utils/useForm/types';
+import { PayIdFormData } from './PayIDInput';
+import { getErrorMessage } from '../../../utils/getErrorMessage';
+import { useCallback } from 'preact/hooks';
+
+interface PayToPhoneProps {
+    form: Form<PayIdFormData>;
+    onChange: (value: string) => void;
+    onError: (error: Error) => void;
+    data: any; // Data
+}
+
+export default function PayToPhone({ form, onChange, onError, data }: PayToPhoneProps) {
+    const { loadingContext, i18n } = useCoreContext();
+
+    const allowedCountries = [];
+
+    const { loadingStatus: prefixLoadingStatus, phonePrefixes } = usePhonePrefixes({ allowedCountries, loadingContext, handleError: onError });
+
+    // TODO handle the loading status
+    console.log('TODO', prefixLoadingStatus);
+
+    const getError = useCallback((field: string) => getErrorMessage(i18n, form.errors[field]), [i18n, form]);
+
+    return (
+        <PhoneInputFields
+            phoneNumberKey={'mobileNumber'}
+            getError={getError}
+            items={phonePrefixes}
+            data={data}
+            onChange={onChange}
+            showNumber={true}
+            showPrefix={true}
+            form={form}
+        />
+    );
+}
diff --git a/packages/lib/src/components/PayTo/components/validate.test.ts b/packages/lib/src/components/PayTo/components/validate.test.ts
new file mode 100644
index 0000000000..56bdad08ae
--- /dev/null
+++ b/packages/lib/src/components/PayTo/components/validate.test.ts
@@ -0,0 +1,64 @@
+import Validator from '../../../utils/Validator';
+import { payIdValidationRules } from './validate';
+
+describe('Test payIdValidationRules', () => {
+    const validator = new Validator(payIdValidationRules);
+
+    // Email tests
+    test('Test success email', () => {
+        expect(validator.validate({ key: 'email', value: 'example@example.com' }).hasError()).toBe(false);
+    });
+
+    test('Test sucesss email (empty)', () => {
+        // Empty validation only should occur on useForm level and not on the field
+        expect(validator.validate({ key: 'email', value: '' }).hasError()).toBe(false);
+    });
+
+    test('Test failure email (invalid format)', () => {
+        expect(validator.validate({ key: 'email', value: 'invalid-email' }).hasError()).toBe(true);
+    });
+
+    test('Test failure email (missing domain)', () => {
+        expect(validator.validate({ key: 'email', value: 'user@.com' }).hasError()).toBe(true);
+    });
+
+    // ABN tests
+    test('Test success abn (9 digits)', () => {
+        expect(validator.validate({ key: 'abn', value: '123456789' }).hasError()).toBe(false);
+    });
+
+    test('Test success abn (11 digits)', () => {
+        expect(validator.validate({ key: 'abn', value: '12345678901' }).hasError()).toBe(false);
+    });
+
+    test('Test failure abn (empty)', () => {
+        // Empty validation only should occur on useForm level and not on the field
+        expect(validator.validate({ key: 'abn', value: '' }).hasError()).toBe(false);
+    });
+
+    test('Test failure abn (non-numeric characters)', () => {
+        expect(validator.validate({ key: 'abn', value: '123abc789' }).hasError()).toBe(true);
+    });
+
+    test('Test failure abn (too short)', () => {
+        expect(validator.validate({ key: 'abn', value: '12345678' }).hasError()).toBe(true);
+    });
+
+    test('Test failure abn (too long)', () => {
+        expect(validator.validate({ key: 'abn', value: '123456789012' }).hasError()).toBe(true);
+    });
+
+    test('Test failure orgid (empty)', () => {
+        // Empty validation only should occur on useForm level and not on the field
+        expect(validator.validate({ key: 'orgid', value: '' }).hasError()).toBe(false);
+    });
+
+    test('Test failure orgid (too long)', () => {
+        const longOrgID = 'A'.repeat(256); // 256 characters
+        expect(validator.validate({ key: 'orgid', value: longOrgID }).hasError()).toBe(true);
+    });
+
+    test('Test failure orgid (invalid characters)', () => {
+        expect(validator.validate({ key: 'orgid', value: 'InvalidOrgID<>?' }).hasError()).toBe(true);
+    });
+});
diff --git a/packages/lib/src/components/PayTo/components/validate.ts b/packages/lib/src/components/PayTo/components/validate.ts
new file mode 100644
index 0000000000..6666f96afd
--- /dev/null
+++ b/packages/lib/src/components/PayTo/components/validate.ts
@@ -0,0 +1,76 @@
+import { ValidatorRule, ValidatorRules } from '../../../utils/Validator/types';
+import { isEmpty } from '../../../utils/validator-utils';
+import { ERROR_FIELD_INVALID, ERROR_FIELD_REQUIRED } from '../../../core/Errors/constants';
+
+const abnRegex = /^((\d{9})|(\d{11}))$/;
+
+const orgidRegex = /`^[!-@[-~][ -@[-~]{0,254}[!-@[-~]$`/;
+
+const emailRegex =
+    /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)$/;
+
+// full phone regex Phone: ^\+[0-9]{1,3}-[1-9]{1,1}[0-9]{1,29}$
+const phoneNumberRegex = /^[1-9]{1,1}[0-9]{1,29}$/;
+
+export const validationFromRegex = (value: string, regex: RegExp, validationRule: ValidatorRule): boolean | null => {
+    // TODO investigate why null is the return value for 'empty' validation
+    if (isEmpty(value)) {
+        validationRule.errorMessage = ERROR_FIELD_REQUIRED;
+        return null;
+    }
+    validationRule.errorMessage = ERROR_FIELD_INVALID;
+    return regex.test(value);
+};
+
+const emailValidatorRule: ValidatorRule = {
+    validate: value => validationFromRegex(value, emailRegex, emailValidatorRule),
+    errorMessage: 'abn.invalid',
+    modes: ['blur']
+};
+
+const abnValidatorRule: ValidatorRule = {
+    validate: value => validationFromRegex(value, abnRegex, abnValidatorRule),
+    errorMessage: 'abn.invalid',
+    modes: ['blur']
+};
+
+const orgidValidatorRule: ValidatorRule = {
+    validate: value => validationFromRegex(value, orgidRegex, orgidValidatorRule),
+    errorMessage: 'orgid.invalid',
+    modes: ['blur']
+};
+
+export const payIdValidationRules: ValidatorRules = {
+    default: {
+        validate: value => {
+            return value && value.length > 0;
+        },
+        errorMessage: ERROR_FIELD_REQUIRED,
+        modes: ['blur']
+    },
+    email: emailValidatorRule,
+    abn: abnValidatorRule,
+    orgid: orgidValidatorRule,
+    firstName: {
+        validate: value => (isEmpty(value) ? null : true), // valid, if there are chars other than spaces,
+        errorMessage: 'firstName.invalid',
+        modes: ['blur']
+    },
+    lastName: {
+        validate: value => (isEmpty(value) ? null : true),
+        errorMessage: 'lastName.invalid',
+        modes: ['blur']
+    },
+    phoneNumber: {
+        modes: ['blur'],
+        validate: value => {
+            return isEmpty(value) ? null : phoneNumberRegex.test(value);
+        },
+        errorMessage: 'mobileNumber.invalid'
+    },
+    phonePrefix: {
+        modes: ['blur'],
+        validate: phonePrefix => !!phonePrefix,
+        errorMessage: 'mobileNumber.invalid'
+    }
+};
diff --git a/packages/lib/src/components/PayTo/index.ts b/packages/lib/src/components/PayTo/index.ts
new file mode 100644
index 0000000000..9286060703
--- /dev/null
+++ b/packages/lib/src/components/PayTo/index.ts
@@ -0,0 +1 @@
+export { default } from './PayTo';
diff --git a/packages/lib/src/components/components-map.ts b/packages/lib/src/components/components-map.ts
index 74ff1adf00..25f216b089 100644
--- a/packages/lib/src/components/components-map.ts
+++ b/packages/lib/src/components/components-map.ts
@@ -61,6 +61,7 @@ import Trustly from './Trustly';
 import Riverty from './Riverty';
 import PayByBankUS from './PayByBankUS';
 import { TxVariants } from './tx-variants';
+import PayTo from './PayTo/PayTo';
 
 /**
  * Maps each tx variant to a Component element.
@@ -203,6 +204,7 @@ export const ComponentsMap = {
     [TxVariants.blik]: Blik,
     [TxVariants.mbway]: MBWay,
     [TxVariants.ancv]: ANCV,
+    [TxVariants.payto]: PayTo,
     [TxVariants.upi]: UPI, // also QR
     [TxVariants.upi_qr]: UPI, // also QR
     [TxVariants.upi_collect]: UPI, // also QR
diff --git a/packages/lib/src/components/components-name-map.ts b/packages/lib/src/components/components-name-map.ts
index 7473e245d5..12fe90de4b 100644
--- a/packages/lib/src/components/components-name-map.ts
+++ b/packages/lib/src/components/components-name-map.ts
@@ -140,6 +140,7 @@ const ComponentsNameMap = {
     [TxVariants.blik]: 'Blik',
     [TxVariants.mbway]: 'MBWay',
     [TxVariants.ancv]: 'ANCV',
+    [TxVariants.payto]: 'PayTo',
     [TxVariants.upi]: 'UPI', // also QR
     [TxVariants.upi_qr]: 'UPI', // also QR
     [TxVariants.upi_collect]: 'UPI', // also QR
diff --git a/packages/lib/src/components/internal/CompanyDetails/CompanyDetails.tsx b/packages/lib/src/components/internal/CompanyDetails/CompanyDetails.tsx
index 7a09c232c1..52a27a8fe0 100644
--- a/packages/lib/src/components/internal/CompanyDetails/CompanyDetails.tsx
+++ b/packages/lib/src/components/internal/CompanyDetails/CompanyDetails.tsx
@@ -10,6 +10,7 @@ import { CompanyDetailsSchema, CompanyDetailsProps } from './types';
 import useForm from '../../../utils/useForm';
 import InputText from '../FormFields/InputText';
 import { ComponentMethodsRef } from '../UIElement/types';
+import { HandleChangeForModeType } from '../../../utils/useForm/types';
 
 export const COMPANY_DETAILS_SCHEMA = ['name', 'registrationNumber'];
 
@@ -37,7 +38,7 @@ export default function CompanyDetails(props: CompanyDetailsProps) {
     const generateFieldName = (name: string): string => `${namePrefix ? `${namePrefix}.` : ''}${name}`;
 
     const eventHandler =
-        (mode: string): h.JSX.FocusEventHandler<HTMLInputElement> =>
+        (mode: HandleChangeForModeType): h.JSX.FocusEventHandler<HTMLInputElement> =>
         (e): void => {
             const { name } = e.target as HTMLInputElement;
             const key = name.split(`${namePrefix}.`).pop();
@@ -46,7 +47,7 @@ export default function CompanyDetails(props: CompanyDetailsProps) {
         };
 
     const inputEventHandler =
-        (mode: string): h.JSX.InputEventHandler<HTMLInputElement> =>
+        (mode: HandleChangeForModeType): h.JSX.InputEventHandler<HTMLInputElement> =>
         (e): void => {
             const { name } = e.target as HTMLInputElement;
             const key = name.split(`${namePrefix}.`).pop();
diff --git a/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.scss b/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.scss
index a38162985d..60935c080c 100644
--- a/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.scss
+++ b/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.scss
@@ -13,6 +13,15 @@
     padding-block-end: 0;
     padding-inline-start: 0;
     padding-inline-end: 0;
+
+    &__description {
+        font-weight: token(text-body-font-weight);
+        list-style-type: disc;
+        color: token(color-label-secondary);
+        margin: 0;
+        font-size: token(text-body-font-size);
+        line-height: 1.5;
+    }
 }
 
 .adyen-checkout__fieldset:last-of-type {
@@ -31,6 +40,10 @@
     display: block;
     margin: 0;
     padding: 0 0 token(spacer-060);
+
+    &:has(+ .adyen-checkout__fieldset__description) {
+        padding: 0;
+    }
 }
 
 .adyen-checkout__fieldset__fields,
@@ -60,4 +73,4 @@
     font-size: token(text-body-font-size);
     line-height: token(text-caption-line-height);
     margin: 0;
-}
+}
\ No newline at end of file
diff --git a/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx b/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx
index b2b8c6a90d..913fb6fec7 100644
--- a/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx
+++ b/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx
@@ -2,17 +2,21 @@ import { h, ComponentChildren } from 'preact';
 import cx from 'classnames';
 import { useCoreContext } from '../../../../core/Context/CoreProvider';
 import './Fieldset.scss';
+import { getUniqueId } from '../../../../utils/idGenerator';
 
 interface FieldsetProps {
     children: ComponentChildren;
     classNameModifiers: string[];
     label?: string;
+    description?: string;
     readonly?: boolean;
 }
 
-export default function Fieldset({ children, classNameModifiers = [], label, readonly = false }: FieldsetProps) {
+export default function Fieldset({ children, classNameModifiers = [], label, readonly = false, description }: FieldsetProps) {
     const { i18n } = useCoreContext();
 
+    const describedById = getUniqueId('payid-input-description');
+
     return (
         <fieldset
             className={cx([
@@ -20,9 +24,14 @@ export default function Fieldset({ children, classNameModifiers = [], label, rea
                 ...classNameModifiers.map(m => `adyen-checkout__fieldset--${m}`),
                 { 'adyen-checkout__fieldset--readonly': readonly }
             ])}
+            aria-describedby={description ? describedById : null}
         >
             {label && <legend className="adyen-checkout__fieldset__title">{i18n.get(label)}</legend>}
-
+            {description && (
+                <p id={describedById} className="adyen-checkout__fieldset__description">
+                    {i18n.get(description)}
+                </p>
+            )}
             <div className="adyen-checkout__fieldset__fields">{children}</div>
         </fieldset>
     );
diff --git a/packages/lib/src/components/internal/FormFields/FormFields.scss b/packages/lib/src/components/internal/FormFields/FormFields.scss
index 4c880c6d90..34d424f6be 100644
--- a/packages/lib/src/components/internal/FormFields/FormFields.scss
+++ b/packages/lib/src/components/internal/FormFields/FormFields.scss
@@ -76,9 +76,9 @@
 
 $deduct-width: token(spacer-040);
 
-.adyen-checkout__field--col-70 {
+.adyen-checkout__field--col-20 {
     @include index.screen-s-and-up {
-        width: calc(70% - $deduct-width);
+        width: calc(20% - $deduct-width);
     }
 }
 
@@ -88,12 +88,37 @@ $deduct-width: token(spacer-040);
     }
 }
 
+.adyen-checkout__field--col-40 {
+    @include index.screen-s-and-up {
+        width: calc(40% - $deduct-width);
+    }
+}
+
 .adyen-checkout__field--col-50 {
     @include index.screen-s-and-up {
         width: calc(50% - $deduct-width);
     }
 }
 
+.adyen-checkout__field--col-60 {
+    @include index.screen-s-and-up {
+        width: calc(60% - $deduct-width);
+    }
+}
+
+.adyen-checkout__field--col-70 {
+    @include index.screen-s-and-up {
+        width: calc(70% - $deduct-width);
+    }
+}
+
+.adyen-checkout__field--col-80 {
+    @include index.screen-s-and-up {
+        width: calc(80% - $deduct-width);
+    }
+}
+
+
 .adyen-checkout__field-wrapper > .adyen-checkout__field:first-child {
     margin-right: token(spacer-040);
 
diff --git a/packages/lib/src/components/internal/PersonalDetails/PersonalDetails.tsx b/packages/lib/src/components/internal/PersonalDetails/PersonalDetails.tsx
index eef4fa08d4..f91e04e57b 100644
--- a/packages/lib/src/components/internal/PersonalDetails/PersonalDetails.tsx
+++ b/packages/lib/src/components/internal/PersonalDetails/PersonalDetails.tsx
@@ -18,6 +18,7 @@ import InputEmail from '../FormFields/InputEmail';
 import InputTelephone from '../FormFields/InputTelephone';
 import { getErrorMessage } from '../../../utils/getErrorMessage';
 import { ComponentMethodsRef } from '../UIElement/types';
+import { HandleChangeForModeType } from '../../../utils/useForm/types';
 
 export const PERSONAL_DETAILS_SCHEMA = ['firstName', 'lastName', 'gender', 'dateOfBirth', 'shopperEmail', 'telephoneNumber'];
 
@@ -47,7 +48,7 @@ export default function PersonalDetails(props: PersonalDetailsProps) {
     };
 
     const eventHandler =
-        (mode: string): h.JSX.GenericEventHandler<EventTarget> =>
+        (mode: HandleChangeForModeType): h.JSX.GenericEventHandler<EventTarget> =>
         (e: Event): void => {
             const { name } = e.target as HTMLInputElement;
             const key = name.split(`${namePrefix}.`).pop();
diff --git a/packages/lib/src/components/internal/PhoneInput/PhoneInput.tsx b/packages/lib/src/components/internal/PhoneInput/PhoneInputFields.tsx
similarity index 58%
rename from packages/lib/src/components/internal/PhoneInput/PhoneInput.tsx
rename to packages/lib/src/components/internal/PhoneInput/PhoneInputFields.tsx
index ca3a9f98c0..e3b89933fe 100644
--- a/packages/lib/src/components/internal/PhoneInput/PhoneInput.tsx
+++ b/packages/lib/src/components/internal/PhoneInput/PhoneInputFields.tsx
@@ -1,34 +1,38 @@
-import { h } from 'preact';
-import { useCallback, useEffect } from 'preact/hooks';
+import { Fragment, h } from 'preact';
+import { useEffect } from 'preact/hooks';
 import Field from '../FormFields/Field';
-import useForm from '../../../utils/useForm';
 import { useCoreContext } from '../../../core/Context/CoreProvider';
 import './PhoneInput.scss';
 import Select from '../FormFields/Select';
-import { phoneFormatters, phoneValidationRules } from './validate';
-import { PhoneInputProps, PhoneInputSchema } from './types';
+import { PhoneInputSchema } from './types';
 import InputText from '../FormFields/InputText';
-import Fieldset from '../FormFields/Fieldset';
+import { DataSet } from '../../../core/Services/data-set';
+import { Form } from '../../../utils/useForm/types';
 
-function PhoneInput(props: PhoneInputProps) {
+export interface PhoneInputFieldProps {
+    items: DataSet;
+    requiredFields?: string[];
+    data: PhoneInputSchema;
+    onChange: (obj) => void;
+    form: Form<PhoneInputSchema>;
+    getError: (string) => string | boolean;
+    phoneNumberKey?: string;
+    phonePrefixErrorKey?: string;
+    phoneNumberErrorKey?: string;
+    placeholders?: PhoneInputSchema;
+    ref?;
+    showPrefix?: boolean;
+    showNumber?: boolean;
+}
+/**
+ *
+ * @param PhoneInputFormProps
+ * @constructor
+ */
+export default function PhoneInputFields({ getError, showNumber, showPrefix, form, ...props }: PhoneInputFieldProps) {
     const { i18n } = useCoreContext();
 
-    const schema = props.requiredFields || [...(props?.items?.length ? ['phonePrefix'] : []), 'phoneNumber'];
-    const showPrefix = schema.includes('phonePrefix') && !!props?.items?.length;
-    const showNumber = schema.includes('phoneNumber');
-
-    const { handleChangeFor, data, valid, errors, isValid, triggerValidation, setSchema } = useForm<PhoneInputSchema>({
-        i18n,
-        ...props,
-        schema,
-        defaultData: props.data,
-        rules: phoneValidationRules,
-        formatters: phoneFormatters
-    });
-
-    useEffect(() => {
-        setSchema(schema);
-    }, [schema.toString()]);
+    const { handleChangeFor, data, valid, triggerValidation } = form;
 
     // Force re-validation of the phoneNumber when data.phonePrefix changes (since the validation rules will also change)
     useEffect((): void => {
@@ -37,31 +41,16 @@ function PhoneInput(props: PhoneInputProps) {
         }
     }, [data.phonePrefix]);
 
-    useEffect(() => {
-        props.onChange({ data, valid, errors, isValid });
-    }, [data, valid, errors, isValid]);
-
+    // TODO why do we need this?
     this.triggerValidation = triggerValidation;
 
-    const getPhoneFieldError = useCallback(
-        (field: string) => {
-            if (errors[field]) {
-                const propsField = field === 'phoneNumber' ? 'phoneNumberErrorKey' : 'phonePrefixErrorKey';
-                const key = props[propsField] ? props[propsField] : errors[field].errorMessage;
-                return i18n.get(key) ?? null;
-            }
-            return null;
-        },
-        [errors]
-    );
-
     return (
-        <Fieldset classNameModifiers={['phone-input']}>
+        <Fragment>
             {showPrefix && (
                 <Field
                     className={'adyen-checkout-field--phone-prefix'}
                     label={i18n.get('telephonePrefix')}
-                    errorMessage={getPhoneFieldError('phonePrefix')}
+                    errorMessage={getError('phonePrefix')}
                     showValidIcon={false}
                     isValid={valid.phonePrefix}
                     dir={'ltr'}
@@ -83,7 +72,7 @@ function PhoneInput(props: PhoneInputProps) {
                 <Field
                     className={'adyen-checkout-field--phone-number'}
                     label={props.phoneNumberKey ? i18n.get(props.phoneNumberKey) : i18n.get('telephoneNumber')}
-                    errorMessage={getPhoneFieldError('phoneNumber')}
+                    errorMessage={getError('phoneNumber')}
                     isValid={valid.phoneNumber}
                     filled={data?.phoneNumber?.length > 0}
                     dir={'ltr'}
@@ -103,12 +92,6 @@ function PhoneInput(props: PhoneInputProps) {
                     />
                 </Field>
             )}
-        </Fieldset>
+        </Fragment>
     );
 }
-
-PhoneInput.defaultProps = {
-    phoneLabel: 'telephoneNumber'
-};
-
-export default PhoneInput;
diff --git a/packages/lib/src/components/internal/PhoneInput/PhoneInput.test.tsx b/packages/lib/src/components/internal/PhoneInput/PhoneInputForm.test.tsx
similarity index 90%
rename from packages/lib/src/components/internal/PhoneInput/PhoneInput.test.tsx
rename to packages/lib/src/components/internal/PhoneInput/PhoneInputForm.test.tsx
index be3d6df5f9..e1a695ea26 100644
--- a/packages/lib/src/components/internal/PhoneInput/PhoneInput.test.tsx
+++ b/packages/lib/src/components/internal/PhoneInput/PhoneInputForm.test.tsx
@@ -2,13 +2,13 @@ import { h } from 'preact';
 import { fireEvent, render, screen } from '@testing-library/preact';
 import { CoreProvider } from '../../../core/Context/CoreProvider';
 import userEvent from '@testing-library/user-event';
-import PhoneInput from './PhoneInput';
-import { PhoneInputProps } from './types';
+import PhoneInputForm from './PhoneInputForm';
+import { PhoneInputFormProps } from './types';
 
 const items = [{ id: '+44', name: 'United Kingdom', code: 'GB', selectedOptionName: 'United Kingdom' }];
 
 describe('PhoneInput', () => {
-    const defaultProps: PhoneInputProps = {
+    const defaultProps: PhoneInputFormProps = {
         items,
         data: { phonePrefix: items[0].id },
         onChange: jest.fn(),
@@ -16,11 +16,11 @@ describe('PhoneInput', () => {
         placeholders: {}
     };
 
-    const renderPhoneInput = (props: PhoneInputProps = defaultProps) => {
+    const renderPhoneInput = (props: PhoneInputFormProps = defaultProps) => {
         return render(
             // @ts-ignore ignore
             <CoreProvider i18n={global.i18n} loadingContext="test" resources={global.resources}>
-                <PhoneInput {...props} />
+                <PhoneInputForm {...props} />
             </CoreProvider>
         );
     };
diff --git a/packages/lib/src/components/internal/PhoneInput/PhoneInputForm.tsx b/packages/lib/src/components/internal/PhoneInput/PhoneInputForm.tsx
new file mode 100644
index 0000000000..9e95dda7cc
--- /dev/null
+++ b/packages/lib/src/components/internal/PhoneInput/PhoneInputForm.tsx
@@ -0,0 +1,71 @@
+import { h } from 'preact';
+import { useEffect, useCallback } from 'preact/hooks';
+import useForm from '../../../utils/useForm';
+import { useCoreContext } from '../../../core/Context/CoreProvider';
+import './PhoneInput.scss';
+import { phoneFormatters, phoneValidationRules } from './validate';
+import { PhoneInputFormProps, PhoneInputSchema } from './types';
+import Fieldset from '../FormFields/Fieldset';
+import PhoneInputFields from './PhoneInputFields';
+
+/**
+ *
+ * @param PhoneInputFormProps
+ * @constructor
+ */
+function PhoneInputForm(props: PhoneInputFormProps) {
+    const { i18n } = useCoreContext();
+
+    const schema = props.requiredFields || [...(props?.items?.length ? ['phonePrefix'] : []), 'phoneNumber'];
+    const showPrefix = schema.includes('phonePrefix') && !!props?.items?.length;
+    const showNumber = schema.includes('phoneNumber');
+
+    const form = useForm<PhoneInputSchema>({
+        i18n,
+        ...props,
+        schema,
+        defaultData: props.data,
+        rules: phoneValidationRules,
+        formatters: phoneFormatters
+    });
+
+    useEffect(() => {
+        form.setSchema(schema);
+    }, [schema.toString()]);
+
+    const { data, valid, errors, isValid, triggerValidation } = form;
+
+    useEffect(() => {
+        props.onChange({ data, valid, errors, isValid });
+    }, [data, valid, errors, isValid]);
+
+    this.showValidation = triggerValidation;
+
+    // This is here for MBWay, prob should be moved up
+    // MBWay has a weird way of loading its error messages
+    // They come form the prop phoneNumberErrorKey: 'mobileNumber.invalid'
+    // Strangely it's defined as invalidPhoneNumber in the validation rules
+    const getPhoneFieldError = useCallback(
+        (field: string) => {
+            if (errors[field]) {
+                const propsField = field === 'phoneNumber' ? 'phoneNumberErrorKey' : 'phonePrefixErrorKey';
+                const key = props[propsField] ? props[propsField] : errors[field].errorMessage;
+                return i18n.get(key) ?? null;
+            }
+            return null;
+        },
+        [errors]
+    );
+
+    return (
+        <Fieldset classNameModifiers={['phone-input']}>
+            <PhoneInputFields getError={getPhoneFieldError} showNumber={showNumber} showPrefix={showPrefix} form={form} {...props} />
+        </Fieldset>
+    );
+}
+
+PhoneInputForm.defaultProps = {
+    phoneLabel: 'telephoneNumber'
+};
+
+export default PhoneInputForm;
diff --git a/packages/lib/src/components/internal/PhoneInput/index.ts b/packages/lib/src/components/internal/PhoneInput/index.ts
index 341afad36b..2e5ec13567 100644
--- a/packages/lib/src/components/internal/PhoneInput/index.ts
+++ b/packages/lib/src/components/internal/PhoneInput/index.ts
@@ -1 +1 @@
-export { default } from './PhoneInput';
+export { default } from './PhoneInputForm';
diff --git a/packages/lib/src/components/internal/PhoneInput/types.ts b/packages/lib/src/components/internal/PhoneInput/types.ts
index 707d5b5a5f..57ed4ff2cd 100644
--- a/packages/lib/src/components/internal/PhoneInput/types.ts
+++ b/packages/lib/src/components/internal/PhoneInput/types.ts
@@ -5,7 +5,7 @@ export interface PhoneInputSchema {
     phonePrefix?: string;
 }
 
-export interface PhoneInputProps {
+export interface PhoneInputFormProps {
     items: DataSet;
     requiredFields?: string[];
     data: PhoneInputSchema;
diff --git a/packages/lib/src/components/internal/SegmentedControl/SegmentedControl.tsx b/packages/lib/src/components/internal/SegmentedControl/SegmentedControl.tsx
index 61a509a845..da3213622a 100644
--- a/packages/lib/src/components/internal/SegmentedControl/SegmentedControl.tsx
+++ b/packages/lib/src/components/internal/SegmentedControl/SegmentedControl.tsx
@@ -2,14 +2,43 @@ import { h } from 'preact';
 import cx from 'classnames';
 import './SegmentedControl.scss';
 
+export interface SegmentedControlOption<T> {
+    label: string;
+    value: T;
+    htmlProps: {
+        id: string;
+        'aria-expanded': boolean;
+        'aria-controls': string;
+    };
+}
+export type SegmentedControlOptions<T> = Array<SegmentedControlOption<T>>;
+
 export interface SegmentedControlProps<T> {
     classNameModifiers?: string[];
     selectedValue: T;
     disabled?: boolean;
-    options: Array<{ label: string; value: T; htmlProps?: any }>;
+    options: SegmentedControlOptions<T>;
     onChange(value: T, event: MouseEvent): void;
 }
 
+/**
+ *
+ * example:
+ * <SegmentedControl
+ *   onChange={(value) = setMode(value)}
+ *   selectedValue={mode}
+ *   disabled={status === 'loading'}
+ *   classNameModifiers={['css-class']}
+ *   options={segmentedControlOptions}
+ * />
+ *
+ * @param classNameModifiers
+ * @param selectedValue
+ * @param disabled
+ * @param options
+ * @param onChange
+ * @constructor
+ */
 function SegmentedControl<T>({ classNameModifiers = [], selectedValue, disabled = false, options, onChange }: SegmentedControlProps<T>) {
     if (!options || options.length === 0) {
         return null;
diff --git a/packages/lib/src/components/tx-variants.ts b/packages/lib/src/components/tx-variants.ts
index 549a9cb81e..501028b810 100644
--- a/packages/lib/src/components/tx-variants.ts
+++ b/packages/lib/src/components/tx-variants.ts
@@ -141,6 +141,7 @@ export enum TxVariants {
     blik = 'blik',
     mbway = 'mbway',
     ancv = 'ancv',
+    payto = 'payto',
     upi = 'upi', // also QR
     upi_qr = 'upi_qr', // also QR
     upi_collect = 'upi_collect', // also QR
diff --git a/packages/lib/src/core/utils.ts b/packages/lib/src/core/utils.ts
index 3e7bc075db..68dbd16502 100644
--- a/packages/lib/src/core/utils.ts
+++ b/packages/lib/src/core/utils.ts
@@ -76,3 +76,14 @@ export function assertConfigurationPropertiesAreValid(propsSetByMerchant: CoreCo
         }
     });
 }
+
+/**
+ * TODO: Check if this is correct place
+ * Type guard for enums, helpful to make sure strings keep enum value
+ * Comes from this: https://github.com/microsoft/TypeScript/issues/30611#issuecomment-570773496
+ * @param enumVariable
+ */
+export function createEnumChecker<T extends string, TEnumValue extends string>(enumVariable: { [key in T]: TEnumValue }) {
+    const enumValues = Object.values(enumVariable);
+    return (value: string): value is TEnumValue => enumValues.includes(value);
+}
diff --git a/packages/lib/src/utils/Validator/ValidationRuleResult.ts b/packages/lib/src/utils/Validator/ValidationRuleResult.ts
index 5ed858ed2e..72f72e8f1b 100644
--- a/packages/lib/src/utils/Validator/ValidationRuleResult.ts
+++ b/packages/lib/src/utils/Validator/ValidationRuleResult.ts
@@ -1,4 +1,4 @@
-import { ErrorMessageObject } from './types';
+import { ErrorMessageObject, ValidatorRule, ValidatorMode } from './types';
 
 /**
  * Holds the result of a validation
@@ -8,7 +8,7 @@ export class ValidationRuleResult {
     public isValid: boolean;
     public errorMessage: string | ErrorMessageObject;
 
-    constructor(rule, value, mode, context) {
+    constructor(rule: ValidatorRule, value: string, mode: ValidatorMode, context) {
         this.shouldValidate = rule.modes.includes(mode);
         this.isValid = rule.validate(value, context);
         this.errorMessage = rule.errorMessage;
diff --git a/packages/lib/src/utils/Validator/Validator.ts b/packages/lib/src/utils/Validator/Validator.ts
index 6b5cac5b9c..314f98819e 100644
--- a/packages/lib/src/utils/Validator/Validator.ts
+++ b/packages/lib/src/utils/Validator/Validator.ts
@@ -66,6 +66,10 @@ class Validator {
      */
     validate({ key, value, mode = 'blur' }: FieldData, context?: FieldContext) {
         const fieldRules = this.getRulesFor(key);
+        // create an ValidationRuleResult, we run the actual validation inside of it
+        // validate is called in the constructor of ValidationRuleResult
+        // line rule.validate(value, context);
+        //
         const validationRulesResult = fieldRules.map(rule => new ValidationRuleResult(rule, value, mode, context));
 
         return new ValidationResult(validationRulesResult);
diff --git a/packages/lib/src/utils/Validator/types.ts b/packages/lib/src/utils/Validator/types.ts
index cf9807a653..80152ff8e7 100644
--- a/packages/lib/src/utils/Validator/types.ts
+++ b/packages/lib/src/utils/Validator/types.ts
@@ -1,7 +1,7 @@
 import { ValidationRuleResult } from './ValidationRuleResult';
 import { Formatter } from '../useForm/types';
 
-type ValidatorMode = 'blur' | 'input';
+export type ValidatorMode = 'blur' | 'input';
 
 export type ErrorMessageObject = {
     translationKey: string;
@@ -20,8 +20,10 @@ export type FormatRules = { [field: string]: Formatter };
 
 export type CountryFormatRules = { [country: string]: FormatRules };
 
+export type ValidateFunction = (value: string, context) => boolean;
+
 export interface ValidatorRule {
-    validate: (value, context?) => boolean;
+    validate: ValidateFunction;
     errorMessage?: string | ErrorMessageObject;
     modes: ValidatorMode[];
 }
diff --git a/packages/lib/src/utils/useForm/types.ts b/packages/lib/src/utils/useForm/types.ts
index 69c879146b..a368a3c033 100644
--- a/packages/lib/src/utils/useForm/types.ts
+++ b/packages/lib/src/utils/useForm/types.ts
@@ -30,8 +30,10 @@ export type FormProps = {
     [key: string]: any;
 };
 
+export type HandleChangeForModeType = 'input' | 'blur';
+
 export interface Form<FormSchema> extends FormState<FormSchema> {
-    handleChangeFor: (key: string, mode?: string) => (e: any) => void;
+    handleChangeFor: (key: string, mode?: HandleChangeForModeType) => (e: any) => void;
     triggerValidation: (schema?: any) => void;
     setSchema: (schema: any) => void;
     setData: (key: string, value: any) => void;
diff --git a/packages/lib/storybook/stories/components/PayTo.stories.tsx b/packages/lib/storybook/stories/components/PayTo.stories.tsx
new file mode 100644
index 0000000000..c5806e779a
--- /dev/null
+++ b/packages/lib/storybook/stories/components/PayTo.stories.tsx
@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/preact';
+import { PaymentMethodStoryProps } from '../types';
+import { ComponentContainer } from '../ComponentContainer';
+import { Checkout } from '../Checkout';
+import PayTo, { PayToConfiguration } from '../../../src/components/PayTo/PayTo';
+
+type PayToStory = StoryObj<PaymentMethodStoryProps<PayToConfiguration>>;
+
+const meta: Meta<PaymentMethodStoryProps<PayToStory>> = {
+    title: 'Components/PayTo'
+};
+
+export const Default: PayToStory = {
+    render: ({ componentConfiguration, ...checkoutConfig }) => (
+        <Checkout checkoutConfig={checkoutConfig}>
+            {checkout => <ComponentContainer element={new PayTo(checkout, componentConfiguration)} />}
+        </Checkout>
+    ),
+    args: {
+        countryCode: 'AU',
+        useSessions: false
+    }
+};
+export default meta;
diff --git a/packages/lib/storybook/stories/internals/PhoneInput.stories.tsx b/packages/lib/storybook/stories/internals/PhoneInput.stories.tsx
index 04a2ac6518..85ad8d5eac 100644
--- a/packages/lib/storybook/stories/internals/PhoneInput.stories.tsx
+++ b/packages/lib/storybook/stories/internals/PhoneInput.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/preact';
-import PhoneInput from '../../../src/components/internal/PhoneInput';
+import PhoneInputForm from '../../../src/components/internal/PhoneInput';
 import { CoreProvider } from '../../../src/core/Context/CoreProvider';
 import Language from '../../../src/language';
 
@@ -55,14 +55,14 @@ const formatPrefixName = item => {
 
 const meta: Meta = {
     title: 'Internals/PhoneInput',
-    component: PhoneInput
+    component: PhoneInputForm
 };
 
 export const Default: StoryObj = {
     render: args => {
         return (
             <CoreProvider loadingContext={'test'} i18n={new Language({ locale: 'en-US', translations: {} })} resources={global.resources}>
-                <PhoneInput
+                <PhoneInputForm
                     items={COUNTRIES.map(formatPrefixName).filter(Boolean)}
                     data={{ phonePrefix: COUNTRIES[0].id }}
                     onChange={item => console.log({ item })}
diff --git a/packages/server/translations/en-US.json b/packages/server/translations/en-US.json
index d61909117a..0daa27cb21 100644
--- a/packages/server/translations/en-US.json
+++ b/packages/server/translations/en-US.json
@@ -324,5 +324,14 @@
     "paynow.mobileViewInstruction.step2": "Open the PayNow bank or payment app.",
     "paynow.mobileViewInstruction.step3": "Select the option to scan a QR code.",
     "paynow.mobileViewInstruction.step4": "Choose the option to upload a QR and select the screenshot.",
-    "paynow.mobileViewInstruction.step5": "Complete the transaction."
+    "paynow.mobileViewInstruction.step5": "Complete the transaction.",
+    "payto.payid.header": "PayID",
+    "payto.payid.description": "Enter the PayID and account details that are connected to your Payto account.",
+    "payto.payid.label.identifier": "Identifier",
+    "payto.payid.label.abn": "ABN",
+    "payto.payid.label.orgid": "Organization ID",
+    "payto.payid.option.phone": "Mobile",
+    "payto.payid.option.email": "Email",
+    "payto.payid.option.abn": "ABN",
+    "payto.payid.option.orgid": "Organization ID"
 }
\ No newline at end of file

From 3e2271dc0e9803aa0d733e5c22695f68593e6c6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ant=C3=B3nio=20Ferreira?= <m1aw@users.noreply.github.com>
Date: Wed, 22 Jan 2025 15:58:05 +0100
Subject: [PATCH 02/20] Partial feature: BSB Input (#3105)

* chore(deps): update dependency express to v4.21.2 (#3061)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency eslint-plugin-testing-library to v6.5.0 (#3060)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency eslint-plugin-storybook to v0.11.1 (#3058)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @changesets/cli to v2.27.11 (#3070)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency msw to v2.7.0 (#3074)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency globals to v15.14.0 (#3072)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency prettier to v3.4.2 (#3075)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @rollup/plugin-node-resolve to v15.3.1 (#3071)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* bsb input component

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package.json                                  |   4 +-
 packages/lib/package.json                     |   8 +-
 packages/lib/src/components/PayTo/PayTo.tsx   |  32 ++-
 .../components/PayTo/components/BSBInput.tsx  | 134 +++++++++-
 .../PayTo/components/PayIDInput.scss          |  12 +-
 .../PayTo/components/PayToComponent.tsx       |  76 ++++++
 .../PayTo/components/PayToInput.tsx           |  62 -----
 .../components/PayTo/components/validate.ts   |  31 +++
 packages/server/translations/en-US.json       |   6 +-
 yarn.lock                                     | 252 ++++++++++--------
 10 files changed, 402 insertions(+), 215 deletions(-)
 create mode 100644 packages/lib/src/components/PayTo/components/PayToComponent.tsx
 delete mode 100644 packages/lib/src/components/PayTo/components/PayToInput.tsx

diff --git a/package.json b/package.json
index 851ad416b9..a4a82d72d6 100644
--- a/package.json
+++ b/package.json
@@ -31,9 +31,9 @@
     },
     "devDependencies": {
         "@adyen/adyen-web-server": "1.0.0",
-        "@changesets/cli": "2.27.10",
+        "@changesets/cli": "2.27.11",
         "@changesets/get-github-info": "0.6.0",
         "concurrently": "8.2.2",
-        "prettier": "3.3.3"
+        "prettier": "3.4.2"
     }
 }
diff --git a/packages/lib/package.json b/packages/lib/package.json
index 3c36dbe33b..df37c87d95 100644
--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@@ -87,7 +87,7 @@
     "@rollup/plugin-commonjs": "26.0.3",
     "@rollup/plugin-eslint": "9.0.5",
     "@rollup/plugin-json": "6.1.0",
-    "@rollup/plugin-node-resolve": "15.3.0",
+    "@rollup/plugin-node-resolve": "15.3.1",
     "@rollup/plugin-replace": "5.0.7",
     "@rollup/plugin-terser": "0.4.4",
     "@size-limit/preset-big-lib": "11.1.6",
@@ -113,9 +113,9 @@
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react": "7.37.2",
-    "eslint-plugin-storybook": "0.8.0",
-    "eslint-plugin-testing-library": "6.2.2",
-    "globals": "15.8.0",
+    "eslint-plugin-storybook": "0.11.1",
+    "eslint-plugin-testing-library": "6.5.0",
+    "globals": "15.14.0",
     "husky": "9.1.7",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
diff --git a/packages/lib/src/components/PayTo/PayTo.tsx b/packages/lib/src/components/PayTo/PayTo.tsx
index abcb11e237..bf4bf4465c 100644
--- a/packages/lib/src/components/PayTo/PayTo.tsx
+++ b/packages/lib/src/components/PayTo/PayTo.tsx
@@ -9,9 +9,10 @@ Types (previously in their own file)
  */
 import { UIElementProps } from '../internal/UIElement/types';
 import { TxVariants } from '../tx-variants';
-import PayToInput from './components/PayToInput';
 import { PayIdFormData } from './components/PayIDInput';
 import { PayToIdentifierEnum } from './components/IdentifierSelector';
+import PayToComponent, { PayToComponentData } from './components/PayToComponent';
+import { BSBFormData } from './components/BSBInput';
 
 export interface PayToConfiguration extends UIElementProps {
     paymentData?: any;
@@ -19,7 +20,7 @@ export interface PayToConfiguration extends UIElementProps {
     placeholders?: any; //TODO
 }
 
-export interface PayToData extends PayIdFormData {
+export interface PayToData extends PayIdFormData, BSBFormData, PayToComponentData {
     shopperAccountIdentifier: string;
 }
 
@@ -38,15 +39,22 @@ const config = {
 };
 
 const getAccountIdentifier = (state: PayToData) => {
-    switch (state.selectedIdentifier) {
-        case PayToIdentifierEnum.email:
-            return state.email;
-        case PayToIdentifierEnum.abn:
-            return state.abn;
-        case PayToIdentifierEnum.orgid:
-            return state.orgid;
-        case PayToIdentifierEnum.phone:
-            return `${state.phonePrefix}-${state.phoneNumber}`;
+    // if it's BSB Input type merge bankAccount with BSB
+    if (state.selectedInput === 'bsb-option') {
+        return `${state.bsb}-${state.bankAccountNumber}`;
+    } else if (state.selectedInput === 'payid-option') {
+        // otherwise use the option in the dropdown
+        switch (state.selectedIdentifier) {
+            case PayToIdentifierEnum.email:
+                return state.email;
+            case PayToIdentifierEnum.abn:
+                return state.abn;
+            case PayToIdentifierEnum.orgid:
+                return state.orgid;
+            case PayToIdentifierEnum.phone:
+                // merge the phone prefix and number - see comment in ticket
+                return `${state.phonePrefix}-${state.phoneNumber}`;
+        }
     }
 };
 /**
@@ -118,7 +126,7 @@ export class PayToElement extends UIElement<PayToConfiguration> {
 
         return (
             <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>
-                <PayToInput
+                <PayToComponent
                     data={this.props.data}
                     placeholders={this.props.placeholders}
                     setComponentRef={this.setComponentRef}
diff --git a/packages/lib/src/components/PayTo/components/BSBInput.tsx b/packages/lib/src/components/PayTo/components/BSBInput.tsx
index e8257a09b8..fc87089e18 100644
--- a/packages/lib/src/components/PayTo/components/BSBInput.tsx
+++ b/packages/lib/src/components/PayTo/components/BSBInput.tsx
@@ -1,17 +1,129 @@
 import { h } from 'preact';
+import Fieldset from '../../internal/FormFields/Fieldset';
+import { useEffect, useRef } from 'preact/hooks';
+import useForm from '../../../utils/useForm';
+import { getErrorMessage } from '../../../utils/getErrorMessage';
+import Field from '../../internal/FormFields/Field';
+import { useCoreContext } from '../../../core/Context/CoreProvider';
+import InputText from '../../internal/FormFields/InputText';
+import { bsbValidationRules } from './validate';
+import './PayIDInput.scss';
+import { phoneFormatters } from '../../internal/PhoneInput/validate';
+import { ComponentMethodsRef } from '../../internal/UIElement/types';
 
-export default function BSBInput() {
-    // const { i18n } = useCoreContext();
+export interface BSBFormData {
+    bsb: string;
+    bankAccountNumber: string;
+    firstName: string;
+    lastName: string;
+}
+
+export interface BSBInputProps {
+    defaultData: BSBFormData;
+    placeholders: any; //TODO
+    onChange: (e) => void;
+    setComponentRef: (ref: ComponentMethodsRef) => void;
+}
+
+const BASE_SCHEMA = ['bankAccountNumber', 'bsb', 'firstName', 'lastName'];
+
+export default function BSBInput({ setComponentRef, defaultData, placeholders, onChange }: BSBInputProps) {
+    const { i18n } = useCoreContext();
+
+    const form = useForm<BSBFormData>({
+        schema: BASE_SCHEMA,
+        defaultData: defaultData,
+        rules: bsbValidationRules,
+        formatters: phoneFormatters
+    });
+    const { handleChangeFor, triggerValidation, data, errors, valid, isValid } = form;
+
+    // standard onChange propagate to parent state
+    useEffect(() => {
+        onChange({ data, valid, errors, isValid });
+    }, [data, valid, errors, isValid]);
+
+    const payToRef = useRef<ComponentMethodsRef>({
+        showValidation: triggerValidation
+    });
+
+    useEffect(() => {
+        setComponentRef(payToRef.current);
+    }, [setComponentRef]);
+
+    return (
+        <Fieldset classNameModifiers={['payto__bsb_input']} label={'payto.bsb.header'} description={'payto.bsb.description'}>
+            <Field
+                label={i18n.get('payto.bsb.label.bankAccountNumber')}
+                classNameModifiers={['col-60', 'bankAccountNumber']}
+                errorMessage={getErrorMessage(i18n, errors.bankAccountNumber, i18n.get('payto.bsb.label.bankAccountNumber'))}
+                name={'bankAccountNumber'}
+                i18n={i18n}
+            >
+                <InputText
+                    name={'bankAccountNumber'}
+                    value={data.bankAccountNumber}
+                    onInput={handleChangeFor('bankAccountNumber', 'input')}
+                    onBlur={handleChangeFor('bankAccountNumber', 'blur')}
+                    placeholder={placeholders?.bankAccountNumber}
+                    required={true}
+                />
+            </Field>
 
-    // TODO type this
-    // const { handleChangeFor, triggerValidation, data, valid, errors } = useForm<any>({
-    //     schema: ['beneficiaryId']
-    // });
-    //
-    // const [status, setStatus] = useState<string>('ready');
+            <Field
+                label={i18n.get('payto.bsb.label.bsb')}
+                classNameModifiers={['col-40', 'bsb']}
+                errorMessage={getErrorMessage(i18n, errors.bsb, i18n.get('payto.bsb.label.bsb'))}
+                name={'bsb'}
+                i18n={i18n}
+            >
+                <InputText
+                    name={'bsb'}
+                    value={data.bsb}
+                    onInput={handleChangeFor('bsb', 'input')}
+                    onBlur={handleChangeFor('bsb', 'blur')}
+                    placeholder={placeholders?.bsb}
+                    required={true}
+                />
+            </Field>
 
-    // this.setStatus = setStatus;
-    // this.showValidation = triggerValidation;
+            <Field
+                label={i18n.get('firstName')}
+                classNameModifiers={['col-50', 'firstName']}
+                errorMessage={getErrorMessage(i18n, errors.firstName, i18n.get('firstName'))}
+                name={'firstName'}
+                i18n={i18n}
+            >
+                <InputText
+                    name={'firstName'}
+                    value={data.firstName}
+                    classNameModifiers={['firstName']}
+                    onInput={handleChangeFor('firstName', 'input')}
+                    onBlur={handleChangeFor('firstName', 'input')}
+                    placeholder={placeholders?.firstName}
+                    spellCheck={false}
+                    required={true}
+                />
+            </Field>
 
-    return <p>BSBInput.tsx</p>;
+            <Field
+                label={i18n.get('lastName')}
+                classNameModifiers={['col-50', 'lastName']}
+                errorMessage={getErrorMessage(i18n, errors.lastName, i18n.get('lastName'))}
+                name={'lastName'}
+                i18n={i18n}
+            >
+                <InputText
+                    name={'lastName'}
+                    value={data.lastName}
+                    classNameModifiers={['lastName']}
+                    onInput={handleChangeFor('lastName', 'input')}
+                    onBlur={handleChangeFor('lastName', 'blur')}
+                    placeholder={placeholders?.lastName}
+                    spellCheck={false}
+                    required={true}
+                />
+            </Field>
+        </Fieldset>
+    );
 }
diff --git a/packages/lib/src/components/PayTo/components/PayIDInput.scss b/packages/lib/src/components/PayTo/components/PayIDInput.scss
index 5c2cada5d3..4fc2bd9c00 100644
--- a/packages/lib/src/components/PayTo/components/PayIDInput.scss
+++ b/packages/lib/src/components/PayTo/components/PayIDInput.scss
@@ -1,10 +1,12 @@
 @import 'styles/variable-generator';
 
-.adyen-checkout__fieldset--payto__payid_input {
-  margin-top: token(spacer-070);
-
-  .adyen-checkout__fieldset__fields {
+.adyen-checkout__payto-component {
+  .adyen-checkout__fieldset {
     margin-top: token(spacer-070);
-    gap: 0 token(spacer-060);
+
+    .adyen-checkout__fieldset__fields {
+      margin-top: token(spacer-070);
+      gap: 0 token(spacer-060);
+    }
   }
 }
diff --git a/packages/lib/src/components/PayTo/components/PayToComponent.tsx b/packages/lib/src/components/PayTo/components/PayToComponent.tsx
new file mode 100644
index 0000000000..703722a63a
--- /dev/null
+++ b/packages/lib/src/components/PayTo/components/PayToComponent.tsx
@@ -0,0 +1,76 @@
+import { h } from 'preact';
+import LoadingWrapper from '../../internal/LoadingWrapper';
+import SegmentedControl from '../../internal/SegmentedControl';
+import { useState } from 'preact/hooks';
+import { SegmentedControlOptions } from '../../internal/SegmentedControl/SegmentedControl';
+import PayIDInput from './PayIDInput';
+import BSBInput from './BSBInput';
+import { useCoreContext } from '../../../core/Context/CoreProvider';
+
+export type PayToInputOption = 'payid-option' | 'bsb-option';
+
+export type PayToComponentData = { selectedInput: PayToInputOption };
+
+const inputOptions: SegmentedControlOptions<PayToInputOption> = [
+    {
+        value: 'payid-option',
+        label: 'PayID',
+        htmlProps: {
+            id: 'payid-option', // TODO move this to i18n
+            'aria-controls': 'payid-input',
+            'aria-expanded': true // TODO move this logic to segmented controller
+        }
+    },
+    {
+        value: 'bsb-option',
+        label: 'BSB and account number', // TODO move this to i18n
+        htmlProps: {
+            id: 'bsb-option',
+            'aria-controls': 'bsb-input',
+            'aria-expanded': false // TODO move this logic to segmented controller
+        }
+    }
+];
+
+export default function PayToComponent(props) {
+    const { i18n } = useCoreContext();
+
+    const [status, setStatus] = useState<string>('ready');
+
+    this.setStatus = setStatus;
+
+    const defaultOption = inputOptions[0].value;
+    const [selectedInput, setSelectedInput] = useState<PayToInputOption>(defaultOption);
+
+    const onChange = ({ data, valid, errors, isValid }) => {
+        // merge selected input to as data, this keep the input layers untouched
+        props.onChange({ data: { selectedInput: selectedInput, ...data }, valid, errors, isValid });
+    };
+
+    return (
+        <LoadingWrapper>
+            <div className="adyen-checkout__payto-component">
+                <SegmentedControl selectedValue={selectedInput} options={inputOptions} onChange={setSelectedInput} />
+                {selectedInput === 'payid-option' && (
+                    <PayIDInput
+                        setComponentRef={props.setComponentRef}
+                        onChange={onChange}
+                        defaultData={props.data}
+                        onError={props.onError}
+                        placeholders={props.placeholders}
+                    />
+                )}
+                {selectedInput === 'bsb-option' && (
+                    <BSBInput
+                        setComponentRef={props.setComponentRef}
+                        onChange={onChange}
+                        defaultData={props.data}
+                        placeholders={props.placeholders}
+                    />
+                )}
+
+                {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}
+            </div>
+        </LoadingWrapper>
+    );
+}
diff --git a/packages/lib/src/components/PayTo/components/PayToInput.tsx b/packages/lib/src/components/PayTo/components/PayToInput.tsx
deleted file mode 100644
index 7a0c2839f7..0000000000
--- a/packages/lib/src/components/PayTo/components/PayToInput.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { h } from 'preact';
-import LoadingWrapper from '../../internal/LoadingWrapper';
-import SegmentedControl from '../../internal/SegmentedControl';
-import { useState } from 'preact/hooks';
-import { SegmentedControlOptions } from '../../internal/SegmentedControl/SegmentedControl';
-import PayIDInput from './PayIDInput';
-import BSBInput from './BSBInput';
-import { useCoreContext } from '../../../core/Context/CoreProvider';
-
-const inputOptions: SegmentedControlOptions<any> = [
-    {
-        value: 'payid-option',
-        label: 'PayID',
-        htmlProps: {
-            id: 'payid-option', // TODO move this to i18n
-            'aria-controls': 'payid-input',
-            'aria-expanded': true // TODO move this logic to segmented controller
-        }
-    },
-    {
-        value: 'bsb-option',
-        label: 'BSB and account number', // TODO move this to i18n
-        htmlProps: {
-            id: 'bsb-option',
-            'aria-controls': 'bsb-input',
-            'aria-expanded': false // TODO move this logic to segmented controller
-        }
-    }
-];
-
-export default function PayToInput(props) {
-    const { i18n } = useCoreContext();
-
-    const [status, setStatus] = useState<string>('ready');
-
-    this.setStatus = setStatus;
-
-    const defaultOption = inputOptions[0].value;
-    const [selectedInput, setSelectedInput] = useState<string>(defaultOption);
-
-    const onChange = ({ data, valid, errors, isValid }) => {
-        props.onChange({ data, valid, errors, isValid });
-    };
-
-    return (
-        <LoadingWrapper>
-            <SegmentedControl selectedValue={selectedInput} options={inputOptions} onChange={setSelectedInput} />
-            {selectedInput === 'payid-option' && (
-                <PayIDInput
-                    setComponentRef={props.setComponentRef}
-                    onChange={onChange}
-                    defaultData={props.data}
-                    onError={props.onError}
-                    placeholders={props.placeholders}
-                />
-            )}
-            {selectedInput === 'bsb-option' && <BSBInput />}
-
-            {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}
-        </LoadingWrapper>
-    );
-}
diff --git a/packages/lib/src/components/PayTo/components/validate.ts b/packages/lib/src/components/PayTo/components/validate.ts
index 6666f96afd..fb81089d24 100644
--- a/packages/lib/src/components/PayTo/components/validate.ts
+++ b/packages/lib/src/components/PayTo/components/validate.ts
@@ -74,3 +74,34 @@ export const payIdValidationRules: ValidatorRules = {
         errorMessage: 'mobileNumber.invalid'
     }
 };
+
+//original regex /^\d{6}-[ -~]{1,28}$/
+const bsbRegex = /^\d{6}$/;
+const bankAccountNumberRegex = /^[ -~]{1,28}$/;
+
+const bsbValidatorRule: ValidatorRule = {
+    validate: value => validationFromRegex(value, bsbRegex, bsbValidatorRule),
+    errorMessage: 'bsb.invalid',
+    modes: ['blur']
+};
+
+const bankAccountNumberValidatorRule: ValidatorRule = {
+    validate: value => validationFromRegex(value, bankAccountNumberRegex, bankAccountNumberValidatorRule),
+    errorMessage: 'bankAccountNumber.invalid',
+    modes: ['blur']
+};
+
+export const bsbValidationRules: ValidatorRules = {
+    bsb: bsbValidatorRule,
+    bankAccountNumber: bankAccountNumberValidatorRule,
+    firstName: {
+        validate: value => (isEmpty(value) ? null : true), // valid, if there are chars other than spaces,
+        errorMessage: 'firstName.invalid',
+        modes: ['blur']
+    },
+    lastName: {
+        validate: value => (isEmpty(value) ? null : true),
+        errorMessage: 'lastName.invalid',
+        modes: ['blur']
+    }
+};
diff --git a/packages/server/translations/en-US.json b/packages/server/translations/en-US.json
index 0daa27cb21..d8a14a46e5 100644
--- a/packages/server/translations/en-US.json
+++ b/packages/server/translations/en-US.json
@@ -333,5 +333,9 @@
     "payto.payid.option.phone": "Mobile",
     "payto.payid.option.email": "Email",
     "payto.payid.option.abn": "ABN",
-    "payto.payid.option.orgid": "Organization ID"
+    "payto.payid.option.orgid": "Organization ID",
+    "payto.bsb.header": "BSB",
+    "payto.bsb.description" : "Enter the bank account number and the Bank State Branch that is connected to your account to continue",
+    "payto.bsb.label.bankAccountNumber": "Bank account number",
+    "payto.bsb.label.bsb": "Bank State Branch"
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index ec50e5a62d..0e111da50e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -365,12 +365,12 @@
     "@types/tough-cookie" "^4.0.5"
     tough-cookie "^4.1.4"
 
-"@changesets/apply-release-plan@^7.0.6":
-  version "7.0.6"
-  resolved "https://registry.yarnpkg.com/@changesets/apply-release-plan/-/apply-release-plan-7.0.6.tgz#39af3f80f3ba287920271d1a542ef5394eb0bf8a"
-  integrity sha512-TKhVLtiwtQOgMAC0fCJfmv93faiViKSDqr8oMEqrnNs99gtSC1sZh/aEMS9a+dseU1ESZRCK+ofLgGY7o0fw/Q==
+"@changesets/apply-release-plan@^7.0.7":
+  version "7.0.7"
+  resolved "https://registry.yarnpkg.com/@changesets/apply-release-plan/-/apply-release-plan-7.0.7.tgz#cabeaed77de07c6bd9878a9bc5ffd3ea7db7f7ff"
+  integrity sha512-qnPOcmmmnD0MfMg9DjU1/onORFyRpDXkMMl2IJg9mECY6RnxL3wN0TCCc92b2sXt1jt8DgjAUUsZYGUGTdYIXA==
   dependencies:
-    "@changesets/config" "^3.0.4"
+    "@changesets/config" "^3.0.5"
     "@changesets/get-version-range-type" "^0.4.0"
     "@changesets/git" "^3.0.2"
     "@changesets/should-skip-package" "^0.1.1"
@@ -403,18 +403,18 @@
   dependencies:
     "@changesets/types" "^6.0.0"
 
-"@changesets/cli@2.27.10":
-  version "2.27.10"
-  resolved "https://registry.yarnpkg.com/@changesets/cli/-/cli-2.27.10.tgz#b2b98caaf6f8a6630592456f07a881e7684f6ada"
-  integrity sha512-PfeXjvs9OfQJV8QSFFHjwHX3QnUL9elPEQ47SgkiwzLgtKGyuikWjrdM+lO9MXzOE22FO9jEGkcs4b+B6D6X0Q==
+"@changesets/cli@2.27.11":
+  version "2.27.11"
+  resolved "https://registry.yarnpkg.com/@changesets/cli/-/cli-2.27.11.tgz#1d510044b350a7c78a8b55a0591637d7ad224469"
+  integrity sha512-1QislpE+nvJgSZZo9+Lj3Lno5pKBgN46dAV8IVxKJy9wX8AOrs9nn5pYVZuDpoxWJJCALmbfOsHkyxujgetQSg==
   dependencies:
-    "@changesets/apply-release-plan" "^7.0.6"
+    "@changesets/apply-release-plan" "^7.0.7"
     "@changesets/assemble-release-plan" "^6.0.5"
     "@changesets/changelog-git" "^0.2.0"
-    "@changesets/config" "^3.0.4"
+    "@changesets/config" "^3.0.5"
     "@changesets/errors" "^0.2.0"
     "@changesets/get-dependents-graph" "^2.1.2"
-    "@changesets/get-release-plan" "^4.0.5"
+    "@changesets/get-release-plan" "^4.0.6"
     "@changesets/git" "^3.0.2"
     "@changesets/logger" "^0.1.1"
     "@changesets/pre" "^2.0.1"
@@ -425,7 +425,7 @@
     "@manypkg/get-packages" "^1.1.3"
     ansi-colors "^4.1.3"
     ci-info "^3.7.0"
-    enquirer "^2.3.0"
+    enquirer "^2.4.1"
     external-editor "^3.1.0"
     fs-extra "^7.0.1"
     mri "^1.2.0"
@@ -437,10 +437,10 @@
     spawndamnit "^3.0.1"
     term-size "^2.1.0"
 
-"@changesets/config@^3.0.4":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@changesets/config/-/config-3.0.4.tgz#2acfdf3e09424149684b3bd10c88074becf251aa"
-  integrity sha512-+DiIwtEBpvvv1z30f8bbOsUQGuccnZl9KRKMM/LxUHuDu5oEjmN+bJQ1RIBKNJjfYMQn8RZzoPiX0UgPaLQyXw==
+"@changesets/config@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@changesets/config/-/config-3.0.5.tgz#cb59e9f338a4b35d3266af8a32799cb940d54ee0"
+  integrity sha512-QyXLSSd10GquX7hY0Mt4yQFMEeqnO5z/XLpbIr4PAkNNoQNKwDyiSrx4yd749WddusH1v3OSiA0NRAYmH/APpQ==
   dependencies:
     "@changesets/errors" "^0.2.0"
     "@changesets/get-dependents-graph" "^2.1.2"
@@ -475,13 +475,13 @@
     dataloader "^1.4.0"
     node-fetch "^2.5.0"
 
-"@changesets/get-release-plan@^4.0.5":
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/@changesets/get-release-plan/-/get-release-plan-4.0.5.tgz#2c857ce2f1942b88ff6ffcb24667edc52bcbfaea"
-  integrity sha512-E6wW7JoSMcctdVakut0UB76FrrN3KIeJSXvB+DHMFo99CnC3ZVnNYDCVNClMlqAhYGmLmAj77QfApaI3ca4Fkw==
+"@changesets/get-release-plan@^4.0.6":
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/@changesets/get-release-plan/-/get-release-plan-4.0.6.tgz#40d70c2524be51a70b7e1a778826854bb6c8562a"
+  integrity sha512-FHRwBkY7Eili04Y5YMOZb0ezQzKikTka4wL753vfUA5COSebt7KThqiuCN9BewE4/qFGgF/5t3AuzXx1/UAY4w==
   dependencies:
     "@changesets/assemble-release-plan" "^6.0.5"
-    "@changesets/config" "^3.0.4"
+    "@changesets/config" "^3.0.5"
     "@changesets/pre" "^2.0.1"
     "@changesets/read" "^0.6.2"
     "@changesets/types" "^6.0.0"
@@ -1423,10 +1423,10 @@
   dependencies:
     "@rollup/pluginutils" "^5.1.0"
 
-"@rollup/plugin-node-resolve@15.3.0":
-  version "15.3.0"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.0.tgz#efbb35515c9672e541c08d59caba2eff492a55d5"
-  integrity sha512-9eO5McEICxMzJpDW9OnMYSv4Sta3hmt7VtBFz5zR9273suNOydOyq/FrGeGy+KsTRFm8w0SLVhzig2ILFT63Ag==
+"@rollup/plugin-node-resolve@15.3.1":
+  version "15.3.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.1.tgz#66008953c2524be786aa319d49e32f2128296a78"
+  integrity sha512-tgg6b91pAybXHJQMAAwW9VuWBO6Thi+q7BCNARLwSqlmsHz0XYURtGvh/AuwSADXSI4h/2uHbs7s4FzlZDGSGA==
   dependencies:
     "@rollup/pluginutils" "^5.0.1"
     "@types/resolve" "1.20.2"
@@ -1871,13 +1871,6 @@
   dependencies:
     unplugin "^1.3.1"
 
-"@storybook/csf@^0.0.1":
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
-  integrity sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==
-  dependencies:
-    lodash "^4.17.15"
-
 "@storybook/csf@^0.1.11":
   version "0.1.11"
   resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.1.11.tgz#ad685a4fe564a47a6b73571c2e7c07b526f4f71b"
@@ -2494,6 +2487,14 @@
     "@typescript-eslint/types" "7.16.1"
     "@typescript-eslint/visitor-keys" "7.16.1"
 
+"@typescript-eslint/scope-manager@8.19.1":
+  version "8.19.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.19.1.tgz#794cfc8add4f373b9cd6fa32e367e7565a0e231b"
+  integrity sha512-60L9KIuN/xgmsINzonOcMDSB8p82h95hoBfSBtXuO4jlR1R9L1xSkmVZKgCPVfavDlXihh4ARNjXhh1gGnLC7Q==
+  dependencies:
+    "@typescript-eslint/types" "8.19.1"
+    "@typescript-eslint/visitor-keys" "8.19.1"
+
 "@typescript-eslint/type-utils@7.16.1":
   version "7.16.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.16.1.tgz#4d7ae4f3d9e3c8cbdabae91609b1a431de6aa6ca"
@@ -2514,6 +2515,11 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.16.1.tgz#bbab066276d18e398bc64067b23f1ce84dfc6d8c"
   integrity sha512-AQn9XqCzUXd4bAVEsAXM/Izk11Wx2u4H3BAfQVhSfzfDOm/wAON9nP7J5rpkCxts7E5TELmN845xTUCQrD1xIQ==
 
+"@typescript-eslint/types@8.19.1":
+  version "8.19.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.19.1.tgz#015a991281754ed986f2e549263a1188d6ed0a8c"
+  integrity sha512-JBVHMLj7B1K1v1051ZaMMgLW4Q/jre5qGK0Ew6UgXz1Rqh+/xPzV1aW581OM00X6iOfyr1be+QyW8LOUf19BbA==
+
 "@typescript-eslint/typescript-estree@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
@@ -2541,6 +2547,20 @@
     semver "^7.6.0"
     ts-api-utils "^1.3.0"
 
+"@typescript-eslint/typescript-estree@8.19.1":
+  version "8.19.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.19.1.tgz#c1094bb00bc251ac76cf215569ca27236435036b"
+  integrity sha512-jk/TZwSMJlxlNnqhy0Eod1PNEvCkpY6MXOXE/WLlblZ6ibb32i2We4uByoKPv1d0OD2xebDv4hbs3fm11SMw8Q==
+  dependencies:
+    "@typescript-eslint/types" "8.19.1"
+    "@typescript-eslint/visitor-keys" "8.19.1"
+    debug "^4.3.4"
+    fast-glob "^3.3.2"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^2.0.0"
+
 "@typescript-eslint/utils@7.16.1":
   version "7.16.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.16.1.tgz#df42dc8ca5a4603016fd102db0346cdab415cdb7"
@@ -2551,7 +2571,7 @@
     "@typescript-eslint/types" "7.16.1"
     "@typescript-eslint/typescript-estree" "7.16.1"
 
-"@typescript-eslint/utils@^5.58.0", "@typescript-eslint/utils@^5.62.0":
+"@typescript-eslint/utils@^5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
   integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
@@ -2565,6 +2585,16 @@
     eslint-scope "^5.1.1"
     semver "^7.3.7"
 
+"@typescript-eslint/utils@^8.8.1":
+  version "8.19.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.19.1.tgz#dd8eabd46b92bf61e573286e1c0ba6bd243a185b"
+  integrity sha512-IxG5gLO0Ne+KaUc8iW1A+XuKLd63o4wlbI1Zp692n1xojCl/THvgIKXJXBZixTh5dd5+yTJ/VXH7GJaaw21qXA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@typescript-eslint/scope-manager" "8.19.1"
+    "@typescript-eslint/types" "8.19.1"
+    "@typescript-eslint/typescript-estree" "8.19.1"
+
 "@typescript-eslint/visitor-keys@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
@@ -2581,6 +2611,14 @@
     "@typescript-eslint/types" "7.16.1"
     eslint-visitor-keys "^3.4.3"
 
+"@typescript-eslint/visitor-keys@8.19.1":
+  version "8.19.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.19.1.tgz#fce54d7cfa5351a92387d6c0c5be598caee072e0"
+  integrity sha512-fzmjU8CHK853V/avYZAvuVut3ZTfwN5YtMaoi+X9Y9MA9keaWNHC3zEQ9zvyX/7Hj+5JkNyK1l7TOR2hevHB6Q==
+  dependencies:
+    "@typescript-eslint/types" "8.19.1"
+    eslint-visitor-keys "^4.2.0"
+
 "@ungap/structured-clone@^1.0.0", "@ungap/structured-clone@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
@@ -3808,10 +3846,10 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
-cookie@0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.6.0.tgz#2798b04b071b0ecbff0dbb62a505a8efa4e19051"
-  integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
+cookie@0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.1.tgz#2f73c42142d5d5cf71310a74fc4ae61670e5dbc9"
+  integrity sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==
 
 cookie@^0.7.2:
   version "0.7.2"
@@ -4582,7 +4620,7 @@ enhanced-resolve@^5.17.1:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-enquirer@^2.3.0:
+enquirer@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.4.1.tgz#93334b3fbd74fc7097b224ab4a8fb7e40bf4ae56"
   integrity sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==
@@ -5087,22 +5125,21 @@ eslint-plugin-react@7.37.2:
     string.prototype.matchall "^4.0.11"
     string.prototype.repeat "^1.0.0"
 
-eslint-plugin-storybook@0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-storybook/-/eslint-plugin-storybook-0.8.0.tgz#23185ecabdc289cae55248c090f0c1d8fbae6c41"
-  integrity sha512-CZeVO5EzmPY7qghO2t64oaFM+8FTaD4uzOEjHKp516exyTKo+skKAL9GI3QALS2BXhyALJjNtwbmr1XinGE8bA==
+eslint-plugin-storybook@0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-storybook/-/eslint-plugin-storybook-0.11.1.tgz#4ef4f3550855fdc4a902296dfc278340ec287506"
+  integrity sha512-yGKpAYkBm/Q2hZg476vRUAvd9lAccjjSvzU5nYy3BSQbKTPy7uopx7JEpwk2vSuw4weTMZzWF64z9/gp/K5RCg==
   dependencies:
-    "@storybook/csf" "^0.0.1"
-    "@typescript-eslint/utils" "^5.62.0"
-    requireindex "^1.2.0"
+    "@storybook/csf" "^0.1.11"
+    "@typescript-eslint/utils" "^8.8.1"
     ts-dedent "^2.2.0"
 
-eslint-plugin-testing-library@6.2.2:
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-6.2.2.tgz#67e84ff891a2b3a8078ced0afa95ee6f343c00c1"
-  integrity sha512-1E94YOTUDnOjSLyvOwmbVDzQi/WkKm3WVrMXu6SmBr6DN95xTGZmI6HJ/eOkSXh/DlheRsxaPsJvZByDBhWLVQ==
+eslint-plugin-testing-library@6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-6.5.0.tgz#02532698270f525be8ceeb4740f66eef0f6f4729"
+  integrity sha512-Ls5TUfLm5/snocMAOlofSOJxNN0aKqwTlco7CrNtMjkTdQlkpSMaeTCDHCuXfzrI97xcx2rSCNeKeJjtpkNC1w==
   dependencies:
-    "@typescript-eslint/utils" "^5.58.0"
+    "@typescript-eslint/utils" "^5.62.0"
 
 eslint-scope@5.1.1, eslint-scope@^5.1.1:
   version "5.1.1"
@@ -5138,6 +5175,11 @@ eslint-visitor-keys@^4.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz#e3adc021aa038a2a8e0b2f8b0ce8f66b9483b1fb"
   integrity sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==
 
+eslint-visitor-keys@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz#687bacb2af884fcdda8a6e7d65c606f46a14cd45"
+  integrity sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==
+
 eslint@9.7.0:
   version "9.7.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.7.0.tgz#bedb48e1cdc2362a0caaa106a4c6ed943e8b09e4"
@@ -5367,36 +5409,36 @@ expect@^29.0.0, expect@^29.7.0:
     jest-util "^29.7.0"
 
 express@^4.17.3, express@^4.19.2, express@^4.20.0:
-  version "4.20.0"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.20.0.tgz#f1d08e591fcec770c07be4767af8eb9bcfd67c48"
-  integrity sha512-pLdae7I6QqShF5PnNTCVn4hI91Dx0Grkn2+IAsMTgMIKuQVte2dN9PeGSSAME2FR8anOhVA62QDIUaWVfEXVLw==
+  version "4.21.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.21.2.tgz#cf250e48362174ead6cea4a566abef0162c1ec32"
+  integrity sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
     body-parser "1.20.3"
     content-disposition "0.5.4"
     content-type "~1.0.4"
-    cookie "0.6.0"
+    cookie "0.7.1"
     cookie-signature "1.0.6"
     debug "2.6.9"
     depd "2.0.0"
     encodeurl "~2.0.0"
     escape-html "~1.0.3"
     etag "~1.8.1"
-    finalhandler "1.2.0"
+    finalhandler "1.3.1"
     fresh "0.5.2"
     http-errors "2.0.0"
     merge-descriptors "1.0.3"
     methods "~1.1.2"
     on-finished "2.4.1"
     parseurl "~1.3.3"
-    path-to-regexp "0.1.10"
+    path-to-regexp "0.1.12"
     proxy-addr "~2.0.7"
-    qs "6.11.0"
+    qs "6.13.0"
     range-parser "~1.2.1"
     safe-buffer "5.2.1"
     send "0.19.0"
-    serve-static "1.16.0"
+    serve-static "1.16.2"
     setprototypeof "1.2.0"
     statuses "2.0.1"
     type-is "~1.6.18"
@@ -5537,13 +5579,13 @@ fill-range@^7.1.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-finalhandler@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
-  integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
+finalhandler@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019"
+  integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==
   dependencies:
     debug "2.6.9"
-    encodeurl "~1.0.2"
+    encodeurl "~2.0.0"
     escape-html "~1.0.3"
     on-finished "2.4.1"
     parseurl "~1.3.3"
@@ -5918,10 +5960,10 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
-globals@15.8.0:
-  version "15.8.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-15.8.0.tgz#e64bb47b619dd8cbf32b3c1a0a61714e33cbbb41"
-  integrity sha512-VZAJ4cewHTExBWDHR6yptdIBlx9YSSZuwojj9Nt5mBRXQzrKakDsVKQ1J63sklLvzAJm0X5+RpO4i3Y2hcOnFw==
+globals@15.14.0:
+  version "15.14.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-15.14.0.tgz#b8fd3a8941ff3b4d38f3319d433b61bbb482e73f"
+  integrity sha512-OkToC372DtlQeje9/zHIo5CT8lRP/FUgEOKBEhU4e0abL7J7CD24fD9ohiLN5hagG/kWCYj4K5oaxxtj2Z0Dig==
 
 globals@^11.1.0:
   version "11.12.0"
@@ -7649,7 +7691,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21:
+lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -7952,9 +7994,9 @@ ms@2.1.3, ms@^2.1.1, ms@^2.1.3:
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
 msw@^2.6.4:
-  version "2.6.8"
-  resolved "https://registry.yarnpkg.com/msw/-/msw-2.6.8.tgz#0cc4d92526444f958829f3fb263ab55ca7437b1d"
-  integrity sha512-nxXxnH6WALZ9a7rsQp4HU2AaD4iGAiouMmE/MY4al7pXTibgA6OZOuKhmN2WBIM6w9qMKwRtX8p2iOb45B2M/Q==
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/msw/-/msw-2.7.0.tgz#d13ff87f7e018fc4c359800ff72ba5017033fb56"
+  integrity sha512-BIodwZ19RWfCbYTxWTUfTXc+sg4OwjCAgxU1ZsgmggX/7S3LdUifsbUPJs61j0rWb19CZRGY5if77duhc0uXzw==
   dependencies:
     "@bundled-es-modules/cookie" "^2.0.1"
     "@bundled-es-modules/statuses" "^1.0.1"
@@ -7965,12 +8007,12 @@ msw@^2.6.4:
     "@open-draft/until" "^2.1.0"
     "@types/cookie" "^0.6.0"
     "@types/statuses" "^2.0.4"
-    chalk "^4.1.2"
     graphql "^16.8.1"
     headers-polyfill "^4.0.2"
     is-node-process "^1.2.0"
     outvariant "^1.4.3"
     path-to-regexp "^6.3.0"
+    picocolors "^1.1.1"
     strict-event-emitter "^0.5.1"
     type-fest "^4.26.1"
     yargs "^17.7.2"
@@ -8487,10 +8529,10 @@ path-scurry@^1.11.1:
     lru-cache "^10.2.0"
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
 
-path-to-regexp@0.1.10:
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.10.tgz#67e9108c5c0551b9e5326064387de4763c4d5f8b"
-  integrity sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==
+path-to-regexp@0.1.12:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.12.tgz#d5e1a12e478a976d432ef3c58d534b9923164bb7"
+  integrity sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==
 
 path-to-regexp@^6.3.0:
   version "6.3.0"
@@ -9109,10 +9151,10 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier@3.3.3:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
-  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
+prettier@3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.4.2.tgz#a5ce1fb522a588bf2b78ca44c6e6fe5aa5a2b13f"
+  integrity sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==
 
 prettier@^2.7.1:
   version "2.8.8"
@@ -9248,13 +9290,6 @@ pure-rand@^6.0.0:
   resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-6.1.0.tgz#d173cf23258231976ccbdb05247c9787957604f2"
   integrity sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==
 
-qs@6.11.0:
-  version "6.11.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
-  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
-  dependencies:
-    side-channel "^1.0.4"
-
 qs@6.13.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
@@ -9514,11 +9549,6 @@ require-from-string@^2.0.2:
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
   integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
 
-requireindex@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/requireindex/-/requireindex-1.2.0.tgz#3463cdb22ee151902635aa6c9535d4de9c2ef1ef"
-  integrity sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==
-
 requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
@@ -9885,25 +9915,6 @@ semver@^7.3.2, semver@^7.3.4, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4, semve
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
   integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
 
-send@0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
-  integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
-  dependencies:
-    debug "2.6.9"
-    depd "2.0.0"
-    destroy "1.2.0"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    fresh "0.5.2"
-    http-errors "2.0.0"
-    mime "1.6.0"
-    ms "2.1.3"
-    on-finished "2.4.1"
-    range-parser "~1.2.1"
-    statuses "2.0.1"
-
 send@0.19.0:
   version "0.19.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
@@ -9943,15 +9954,15 @@ serve-index@^1.9.1:
     mime-types "~2.1.17"
     parseurl "~1.3.2"
 
-serve-static@1.16.0:
-  version "1.16.0"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.0.tgz#2bf4ed49f8af311b519c46f272bf6ac3baf38a92"
-  integrity sha512-pDLK8zwl2eKaYrs8mrPZBJua4hMplRWJ1tIFksVC3FtBEBnl8dxgeHtsaMS8DhS9i4fLObaon6ABoc4/hQGdPA==
+serve-static@1.16.2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
+  integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==
   dependencies:
-    encodeurl "~1.0.2"
+    encodeurl "~2.0.0"
     escape-html "~1.0.3"
     parseurl "~1.3.3"
-    send "0.18.0"
+    send "0.19.0"
 
 set-function-length@^1.2.1, set-function-length@^1.2.2:
   version "1.2.2"
@@ -10899,6 +10910,11 @@ ts-api-utils@^1.3.0:
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
   integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
 
+ts-api-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-2.0.0.tgz#b9d7d5f7ec9f736f4d0f09758b8607979044a900"
+  integrity sha512-xCt/TOAc+EOHS1XPnijD3/yzpH6qg2xppZO1YDqGoVsNXfQfzHpOdNuXwrwOU8u4ITXJyDCTyt8w5g1sZv9ynQ==
+
 ts-dedent@^2.0.0, ts-dedent@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"

From dfe8d0eed2051d580fc0c5b42ee3b62d3e8e91f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ant=C3=B3nio=20Ferreira?= <m1aw@users.noreply.github.com>
Date: Wed, 5 Feb 2025 12:48:08 +0100
Subject: [PATCH 03/20] Partial feature: Payto Await (#3104)

* change await screen

* refactor list into dl

* add msw to payto story

* code review fixes

* size limit and amount condition fix
---
 packages/lib/.size-limit.cjs                  |  26 +-
 packages/lib/.storybook/main.ts               |   3 +-
 packages/lib/.storybook/preview.tsx           |   9 +-
 packages/lib/package.json                     |   8 +-
 .../lib/src/components/PayTo/PayTo.test.ts    |  14 +
 packages/lib/src/components/PayTo/PayTo.tsx   |  31 +-
 .../PayTo/components/MandateSummary.scss      |  12 +
 .../PayTo/components/MandateSummary.tsx       |  66 ++++
 .../PayTo/components/PayToInstructions.tsx    |  15 +
 packages/lib/src/components/PayTo/types.ts    |  27 ++
 packages/lib/src/components/index.ts          |   1 +
 .../src/components/internal/Await/Await.scss  |   7 +
 .../src/components/internal/Await/Await.tsx   |  15 +
 .../src/components/internal/Await/types.ts    |   7 +-
 .../internal/DetailsTable/DetailsTable.scss   |  33 ++
 .../internal/DetailsTable/DetailsTable.tsx    |  33 ++
 .../components/internal/DetailsTable/index.ts |   1 +
 .../internal/QRLoader/QRLoader.scss           |   5 +
 .../components/internal/Voucher/Voucher.scss  |  31 --
 .../components/internal/Voucher/Voucher.tsx   |  12 +-
 packages/lib/src/components/types.ts          |   1 +
 .../lib/storybook/public/mockServiceWorker.js | 302 ++++++++++++++++++
 .../stories/components/PayTo.stories.tsx      | 123 ++++++-
 packages/server/translations/en-US.json       |  19 +-
 yarn.lock                                     |  40 +--
 25 files changed, 732 insertions(+), 109 deletions(-)
 create mode 100644 packages/lib/src/components/PayTo/components/MandateSummary.scss
 create mode 100644 packages/lib/src/components/PayTo/components/MandateSummary.tsx
 create mode 100644 packages/lib/src/components/PayTo/components/PayToInstructions.tsx
 create mode 100644 packages/lib/src/components/PayTo/types.ts
 create mode 100644 packages/lib/src/components/internal/DetailsTable/DetailsTable.scss
 create mode 100644 packages/lib/src/components/internal/DetailsTable/DetailsTable.tsx
 create mode 100644 packages/lib/src/components/internal/DetailsTable/index.ts
 create mode 100644 packages/lib/storybook/public/mockServiceWorker.js

diff --git a/packages/lib/.size-limit.cjs b/packages/lib/.size-limit.cjs
index b0ba0b52f9..d54dd11749 100644
--- a/packages/lib/.size-limit.cjs
+++ b/packages/lib/.size-limit.cjs
@@ -5,8 +5,8 @@ module.exports = [
     {
         name: 'UMD',
         path: 'dist/umd/adyen.js',
-        limit: '110 KB',
-        running: false,
+        limit: '120 KB',
+        running: false
     },
     /**
      * 'auto' bundle with all Components included, excluding Languages
@@ -14,9 +14,9 @@ module.exports = [
     {
         name: 'Auto',
         path: 'auto/auto.js',
-        import: "{ AdyenCheckout, Dropin }",
-        limit: '110 KB',
-        running: false,
+        import: '{ AdyenCheckout, Dropin }',
+        limit: '120 KB',
+        running: false
     },
     /**
      * ES modules (tree-shake)
@@ -24,22 +24,22 @@ module.exports = [
     {
         name: 'ESM - Core',
         path: 'dist/es/index.js',
-        import: "{ AdyenCheckout }",
+        import: '{ AdyenCheckout }',
         limit: '30 KB',
-        running: false,
+        running: false
     },
     {
         name: 'ESM - Core + Card',
         path: 'dist/es/index.js',
-        import: "{ AdyenCheckout, Card }",
+        import: '{ AdyenCheckout, Card }',
         limit: '65 KB',
-        running: false,
+        running: false
     },
     {
         name: 'ESM - Core + Dropin with Card',
         path: 'dist/es/index.js',
-        import: "{ AdyenCheckout, Dropin, Card }",
+        import: '{ AdyenCheckout, Dropin, Card }',
         limit: '70 KB',
-        running: false,
-    },
-]
+        running: false
+    }
+];
diff --git a/packages/lib/.storybook/main.ts b/packages/lib/.storybook/main.ts
index 6c05fa441b..a5f9ee27c2 100644
--- a/packages/lib/.storybook/main.ts
+++ b/packages/lib/.storybook/main.ts
@@ -26,7 +26,8 @@ const config: StorybookConfig = {
         options: {}
     },
 
-    staticDirs: ['../storybook/assets'],
+    // public added for msw: https://github.com/mswjs/msw-storybook-addon?tab=readme-ov-file#start-storybook
+    staticDirs: ['../storybook/assets', '../storybook/public'],
 
     viteFinal(config) {
         return mergeConfig(config, {
diff --git a/packages/lib/.storybook/preview.tsx b/packages/lib/.storybook/preview.tsx
index 94f316714d..d210f21516 100644
--- a/packages/lib/.storybook/preview.tsx
+++ b/packages/lib/.storybook/preview.tsx
@@ -1,6 +1,12 @@
 import './main.css';
 import { Preview } from '@storybook/preact';
 import { DEFAULT_COUNTRY_CODE, DEFAULT_SHOPPER_LOCALE, DEFAULT_AMOUNT_VALUE, SHOPPER_LOCALES } from '../storybook/config/commonConfig';
+import { initialize as initializeMSW, mswLoader } from 'msw-storybook-addon';
+
+// from the docs: https://github.com/mswjs/msw-storybook-addon
+initializeMSW({
+    onUnhandledRequest: 'bypass'
+});
 
 const preview: Preview = {
     argTypes: {
@@ -27,7 +33,8 @@ const preview: Preview = {
         shopperLocale: DEFAULT_SHOPPER_LOCALE,
         amount: DEFAULT_AMOUNT_VALUE,
         showPayButton: true
-    }
+    },
+    loaders: [mswLoader]
 };
 
 export default preview;
diff --git a/packages/lib/package.json b/packages/lib/package.json
index df37c87d95..72e636724e 100644
--- a/packages/lib/package.json
+++ b/packages/lib/package.json
@@ -123,6 +123,7 @@
     "jest-mock-extended": "3.0.7",
     "lint-staged": "15.2.11",
     "msw": "^2.6.4",
+    "msw-storybook-addon": "^2.0.4",
     "postcss": "8.4.49",
     "rollup": "4.22.4",
     "rollup-plugin-dts": "6.1.1",
@@ -154,5 +155,10 @@
     "*.{js,jsx,ts,tsx}": "eslint",
     "*.{scss,css}": "stylelint",
     "*.{js,jsx,ts,tsx,html,md}": "prettier --write"
+  },
+  "msw": {
+    "workerDirectory": [
+      "storybook/public"
+    ]
   }
-}
+}
\ No newline at end of file
diff --git a/packages/lib/src/components/PayTo/PayTo.test.ts b/packages/lib/src/components/PayTo/PayTo.test.ts
index 4ab8abdc16..7e338ad6ec 100644
--- a/packages/lib/src/components/PayTo/PayTo.test.ts
+++ b/packages/lib/src/components/PayTo/PayTo.test.ts
@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/preact';
 import PayTo from './PayTo';
 import userEvent from '@testing-library/user-event';
 import getDataset from '../../core/Services/get-dataset';
+import { MandateType } from './types';
 
 jest.mock('../../core/Services/get-dataset');
 (getDataset as jest.Mock).mockImplementation(
@@ -10,6 +11,16 @@ jest.mock('../../core/Services/get-dataset');
     })
 );
 
+const MOCK_MANDATE: MandateType = {
+    amount: '4001', // [Mandatory] for PayTo - Mandate Amount field
+    amountRule: 'exact', // [Mandatory] for PayTo - Needs to be Localised
+    endsAt: '2024-12-31', // [Mandatory] for PayTo - Date format
+    frequency: 'adhoc', // [Mandatory] for PayTo - Needs to be Localised
+    remarks: 'testThroughFlow1', // [Mandatory] for PayTo - Needs to be Localised as "Description"
+    count: '3', // [Optional] will be returned only if the merchant sends it
+    startsAt: '2024-11-13' // [Optional] will be returned only if the merchant sends it
+};
+
 describe('PayTo', () => {
     let onSubmitMock;
     let user;
@@ -22,6 +33,7 @@ describe('PayTo', () => {
     test('should render payment and show PayID page', async () => {
         const payTo = new PayTo(global.core, {
             i18n: global.i18n,
+            mandate: MOCK_MANDATE,
             loadingContext: 'test',
             modules: { resources: global.resources }
         });
@@ -37,6 +49,7 @@ describe('PayTo', () => {
     test('should render continue button', async () => {
         const payTo = new PayTo(global.core, {
             onSubmit: onSubmitMock,
+            mandate: MOCK_MANDATE,
             i18n: global.i18n,
             loadingContext: 'test',
             modules: { resources: global.resources }
@@ -55,6 +68,7 @@ describe('PayTo', () => {
     test('should change to different identifier when selected', async () => {
         const payTo = new PayTo(global.core, {
             onSubmit: onSubmitMock,
+            mandate: MOCK_MANDATE,
             i18n: global.i18n,
             loadingContext: 'test',
             modules: { resources: global.resources },
diff --git a/packages/lib/src/components/PayTo/PayTo.tsx b/packages/lib/src/components/PayTo/PayTo.tsx
index bf4bf4465c..cb4b0e5591 100644
--- a/packages/lib/src/components/PayTo/PayTo.tsx
+++ b/packages/lib/src/components/PayTo/PayTo.tsx
@@ -7,22 +7,12 @@ import SRPanelProvider from '../../core/Errors/SRPanelProvider';
 /*
 Types (previously in their own file)
  */
-import { UIElementProps } from '../internal/UIElement/types';
 import { TxVariants } from '../tx-variants';
-import { PayIdFormData } from './components/PayIDInput';
 import { PayToIdentifierEnum } from './components/IdentifierSelector';
-import PayToComponent, { PayToComponentData } from './components/PayToComponent';
-import { BSBFormData } from './components/BSBInput';
-
-export interface PayToConfiguration extends UIElementProps {
-    paymentData?: any;
-    data?: PayToData;
-    placeholders?: any; //TODO
-}
-
-export interface PayToData extends PayIdFormData, BSBFormData, PayToComponentData {
-    shopperAccountIdentifier: string;
-}
+import PayToComponent from './components/PayToComponent';
+import { PayToInstructions } from './components/PayToInstructions';
+import MandateSummary from './components/MandateSummary';
+import { PayToConfiguration, PayToData } from './types';
 
 /*
 Await Config (previously in its own file)
@@ -85,7 +75,12 @@ export class PayToElement extends UIElement<PayToConfiguration> {
             paymentMethod: {
                 type: PayToElement.type,
                 shopperAccountIdentifier: getAccountIdentifier(this.state.data)
-            }
+            },
+            shopperName: {
+                firstName: this.state.data.firstName,
+                lastName: this.state.data.lastName
+            },
+            mandate: this.props.mandate
         };
     }
 
@@ -106,18 +101,22 @@ export class PayToElement extends UIElement<PayToConfiguration> {
                             ref={ref => {
                                 this.componentRef = ref;
                             }}
+                            amount={this.props.amount}
+                            showAmount={true}
+                            instructions={PayToInstructions}
                             clientKey={this.props.clientKey}
                             paymentData={this.props.paymentData}
                             onError={this.props.onError}
                             onComplete={this.onComplete}
                             brandLogo={this.icon}
                             type={this.constructor['type']}
-                            messageText={this.props.i18n.get('ancv.confirmPayment')}
+                            messageText={this.props.i18n.get('payto.confirmPayment')}
                             awaitText={this.props.i18n.get('await.waitForConfirmation')}
                             showCountdownTimer={config.showCountdownTimer}
                             throttleTime={config.THROTTLE_TIME}
                             throttleInterval={config.THROTTLE_INTERVAL}
                             onActionHandled={this.onActionHandled}
+                            endSlot={() => <MandateSummary mandate={this.props.mandate} currencyCode={this.props.amount.currency} />}
                         />
                     </SRPanelProvider>
                 </CoreProvider>
diff --git a/packages/lib/src/components/PayTo/components/MandateSummary.scss b/packages/lib/src/components/PayTo/components/MandateSummary.scss
new file mode 100644
index 0000000000..ab43f0f288
--- /dev/null
+++ b/packages/lib/src/components/PayTo/components/MandateSummary.scss
@@ -0,0 +1,12 @@
+@import 'styles/variable-generator';
+
+.adyen-checkout__await--payto {
+  .adyen-checkout__details-table {
+    margin-top: token(spacer-070);
+    padding-top: token(spacer-060);
+  }
+
+  .adyen-checkout__details-table__item:first-child {
+    border-top: none;
+  }
+}
diff --git a/packages/lib/src/components/PayTo/components/MandateSummary.tsx b/packages/lib/src/components/PayTo/components/MandateSummary.tsx
new file mode 100644
index 0000000000..861e5f76f7
--- /dev/null
+++ b/packages/lib/src/components/PayTo/components/MandateSummary.tsx
@@ -0,0 +1,66 @@
+import DetailsTable from '../../internal/DetailsTable';
+import { h } from 'preact';
+import { MandateType } from '../types';
+import { useCoreContext } from '../../../core/Context/CoreProvider';
+import { DetailsTableData } from '../../internal/DetailsTable/DetailsTable';
+import './MandateSummary.scss';
+
+export default function MandateSummary({ mandate, currencyCode }: { mandate: MandateType; currencyCode: string }) {
+    const { i18n } = useCoreContext();
+    const tableFields: DetailsTableData = Object.keys(mandate).map((key: keyof MandateType) => {
+        // get the label for the key, like payto.mandate.amount.label, payto.mandate.frequency.label
+        const labelText = i18n.get(`payto.mandate.${key}.label`);
+        const amountValue = Number(mandate['amount']);
+        switch (key) {
+            case 'amount': {
+                // it can be either show "amount" OR "amount up to (max amount)"
+                const formatedAmount = i18n.amount(amountValue, currencyCode);
+                if (mandate.amountRule === 'max') {
+                    return {
+                        label: labelText,
+                        value: i18n.get('payto.mandate.amount.max', { values: { amount: formatedAmount } })
+                    };
+                } else {
+                    return {
+                        label: labelText,
+                        value: i18n.amount(amountValue, currencyCode)
+                    };
+                }
+            }
+            case 'frequency': {
+                if (!mandate.count) {
+                    // if there's no count we just say 'adhoc'
+                    return {
+                        label: labelText,
+                        value: i18n.get(`payto.mandate.frequency.adhoc-no-count`)
+                    };
+                } else {
+                    // frequency can be: adhoc, daily, weekly, biWeekly, monthly, quarterly, halfYearly, yearly
+                    return {
+                        label: labelText,
+                        value: i18n.get(`payto.mandate.frequency.${mandate.frequency}`, { values: { count: mandate.count } })
+                    };
+                }
+            }
+            // TODO test this for XSS
+            case 'remarks':
+                return {
+                    label: labelText,
+                    value: mandate.remarks
+                };
+            case 'startsAt':
+                return {
+                    label: labelText,
+                    value: i18n.date(mandate.startsAt)
+                };
+
+            case 'endsAt':
+                return {
+                    label: labelText,
+                    value: i18n.date(mandate.endsAt)
+                };
+        }
+    });
+
+    return <DetailsTable tableFields={tableFields}></DetailsTable>;
+}
diff --git a/packages/lib/src/components/PayTo/components/PayToInstructions.tsx b/packages/lib/src/components/PayTo/components/PayToInstructions.tsx
new file mode 100644
index 0000000000..b0d3e02285
--- /dev/null
+++ b/packages/lib/src/components/PayTo/components/PayToInstructions.tsx
@@ -0,0 +1,15 @@
+import { useCoreContext } from '../../../core/Context/CoreProvider';
+import { Timeline, TimelineWrapper } from '../../internal/Timeline';
+import { h } from 'preact';
+
+export const PayToInstructions = () => {
+    const { i18n } = useCoreContext();
+
+    const instructions = i18n.get('payto.instructions.steps').split('@');
+
+    return (
+        <TimelineWrapper>
+            <Timeline instructions={instructions} />
+        </TimelineWrapper>
+    );
+};
diff --git a/packages/lib/src/components/PayTo/types.ts b/packages/lib/src/components/PayTo/types.ts
new file mode 100644
index 0000000000..7cd77633bf
--- /dev/null
+++ b/packages/lib/src/components/PayTo/types.ts
@@ -0,0 +1,27 @@
+import { UIElementProps } from '../internal/UIElement/types';
+import { PayIdFormData } from './components/PayIDInput';
+import { BSBFormData } from './components/BSBInput';
+import { PayToComponentData } from './components/PayToComponent';
+
+export type MandateFrequencyType = 'adhoc' | 'daily' | 'weekly' | 'biWeekly' | 'monthly' | 'quarterly' | 'halfYearly' | 'yearly';
+
+export interface MandateType {
+    amount: string;
+    amountRule: string;
+    frequency: MandateFrequencyType;
+    startsAt?: string;
+    endsAt: string;
+    remarks: string;
+    count?: string;
+}
+
+export interface PayToConfiguration extends UIElementProps {
+    paymentData?: any;
+    data?: PayToData;
+    placeholders?: any; //TODO
+    mandate: MandateType;
+}
+
+export interface PayToData extends PayIdFormData, BSBFormData, PayToComponentData {
+    shopperAccountIdentifier: string;
+}
diff --git a/packages/lib/src/components/index.ts b/packages/lib/src/components/index.ts
index d05155adff..1f70b5a2d1 100644
--- a/packages/lib/src/components/index.ts
+++ b/packages/lib/src/components/index.ts
@@ -85,6 +85,7 @@ export { default as Blik } from './Blik';
 export { default as MBWay } from './MBWay';
 export { default as UPI } from './UPI';
 export { default as ANCV } from './ANCV';
+export { default as PayTo } from './PayTo';
 
 /** Giftcard */
 export { default as Giftcard } from './Giftcard';
diff --git a/packages/lib/src/components/internal/Await/Await.scss b/packages/lib/src/components/internal/Await/Await.scss
index ff01635bd3..a918de8e4a 100644
--- a/packages/lib/src/components/internal/Await/Await.scss
+++ b/packages/lib/src/components/internal/Await/Await.scss
@@ -81,6 +81,13 @@
     display: none;
 }
 
+.adyen-checkout__await__amount {
+    margin-top: token(spacer-070);
+    font-size: token(text-title-l-font-size);
+    font-weight: token(text-title-font-weight);
+    text-align: center;
+}
+
 @media only screen and (max-device-width: 1200px) {
     .adyen-checkout__await__app-link {
         display: block;
diff --git a/packages/lib/src/components/internal/Await/Await.tsx b/packages/lib/src/components/internal/Await/Await.tsx
index 4379696503..53cc2b41b1 100644
--- a/packages/lib/src/components/internal/Await/Await.tsx
+++ b/packages/lib/src/components/internal/Await/Await.tsx
@@ -26,6 +26,7 @@ function Await(props: AwaitComponentProps) {
     const [timePassed, setTimePassed] = useState(0);
     const [hasAdjustedTime, setHasAdjustedTime] = useState(false);
     const [storedTimeout, setStoredTimeout] = useState(null);
+    const { amount } = props;
 
     const onTimeUp = (): void => {
         setExpired(true);
@@ -191,6 +192,12 @@ function Await(props: AwaitComponentProps) {
         >
             {props.brandLogo && <img src={props.brandLogo} alt={props.type} className="adyen-checkout__await__brand-logo" />}
 
+            {/* Everything is wrapped in !! so we evaluate the result as boolean,
+             otherwise we might just print the value or object as mistake */}
+            {!!(props.showAmount && amount && amount.value && amount.currency) && (
+                <div className="adyen-checkout__await__amount">{i18n.amount(amount.value, amount.currency)}</div>
+            )}
+
             <div className="adyen-checkout__await__subtitle">{props.messageText}</div>
 
             <div className="adyen-checkout__await__indicator-holder">
@@ -220,6 +227,14 @@ function Await(props: AwaitComponentProps) {
                     <Button classNameModifiers={['await']} onClick={() => redirectToApp(props.url)} label={i18n.get('openApp')} />
                 </div>
             )}
+
+            {props.instructions && (
+                <div className="adyen-checkout__await__instructions">
+                    {typeof props.instructions === 'string' ? i18n.get(props.instructions) : props.instructions?.()}
+                </div>
+            )}
+
+            {props.endSlot && <div className="adyen-checkout__await__end-slot">{props.endSlot()}</div>}
         </div>
     );
 }
diff --git a/packages/lib/src/components/internal/Await/types.ts b/packages/lib/src/components/internal/Await/types.ts
index 68390cb1c2..3828716a4e 100644
--- a/packages/lib/src/components/internal/Await/types.ts
+++ b/packages/lib/src/components/internal/Await/types.ts
@@ -1,5 +1,6 @@
 import { UIElementProps } from '../UIElement/types';
-import { ActionHandledReturnObject } from '../../../types/global-types';
+import { ActionHandledReturnObject, PaymentAmount } from '../../../types/global-types';
+import { h } from 'preact';
 
 interface StatusObjectProps {
     payload: string;
@@ -31,6 +32,10 @@ export interface AwaitComponentProps {
     awaitText: string;
     ref: any;
     onActionHandled?: (rtnObj: ActionHandledReturnObject) => void;
+    instructions?: string | (() => h.JSX.Element);
+    endSlot?: () => h.JSX.Element;
+    amount?: PaymentAmount;
+    showAmount?: boolean;
 }
 
 export interface AwaitConfiguration extends UIElementProps {
diff --git a/packages/lib/src/components/internal/DetailsTable/DetailsTable.scss b/packages/lib/src/components/internal/DetailsTable/DetailsTable.scss
new file mode 100644
index 0000000000..0c143d7332
--- /dev/null
+++ b/packages/lib/src/components/internal/DetailsTable/DetailsTable.scss
@@ -0,0 +1,33 @@
+@import 'styles/variable-generator';
+
+.adyen-checkout__details-table {
+  list-style: none;
+  padding: 0;
+  margin: -1px auto 0;
+
+  &__item {
+    display: flex;
+    justify-content: space-between;
+    font-size: token(text-body-font-size);
+    color: token(color-label-primary);
+    padding: token(spacer-070) token(spacer-090);
+    border-top: 1px solid token(color-separator-primary);
+    word-break: break-word;
+  }
+
+  &__item:last-child {
+    margin-bottom: 0;
+  }
+
+  &__label {
+    max-width: 50%;
+    text-align: left;
+  }
+
+  &__value {
+    max-width: 50%;
+    text-align: right;
+    font-weight: bold;
+  }
+}
+
diff --git a/packages/lib/src/components/internal/DetailsTable/DetailsTable.tsx b/packages/lib/src/components/internal/DetailsTable/DetailsTable.tsx
new file mode 100644
index 0000000000..90202fab70
--- /dev/null
+++ b/packages/lib/src/components/internal/DetailsTable/DetailsTable.tsx
@@ -0,0 +1,33 @@
+import { h } from 'preact';
+import './DetailsTable.scss';
+
+export interface DetailsTableData
+    extends Array<{
+        label: string;
+        value: string;
+    }> {}
+
+export interface DetailsTableProps {
+    tableFields: DetailsTableData;
+}
+
+export default function DetailsTable({ tableFields }: DetailsTableProps) {
+    // For context, this markup uses 2 classes for backwards compatibility
+    // This was originally part of the voucher component and ported out
+    // We can remove the voucher class names at point
+    return (
+        <dl className="adyen-checkout__voucher-result__details adyen-checkout__details-table">
+            {tableFields
+                // first remove empty values
+                .filter(item => !!item)
+                // or objects without label and value
+                .filter(({ label, value }) => !!label && !!value)
+                .map(({ label, value }, index) => (
+                    <div key={index} className="adyen-checkout__voucher-result__details__item adyen-checkout__details-table__item">
+                        <dt className="adyen-checkout__voucher-result__details__label adyen-checkout__details-table__label">{label}</dt>
+                        <dd className="adyen-checkout__voucher-result__details__value adyen-checkout__details-table__value">{value}</dd>
+                    </div>
+                ))}
+        </dl>
+    );
+}
diff --git a/packages/lib/src/components/internal/DetailsTable/index.ts b/packages/lib/src/components/internal/DetailsTable/index.ts
new file mode 100644
index 0000000000..271ca61327
--- /dev/null
+++ b/packages/lib/src/components/internal/DetailsTable/index.ts
@@ -0,0 +1 @@
+export { default } from './DetailsTable';
diff --git a/packages/lib/src/components/internal/QRLoader/QRLoader.scss b/packages/lib/src/components/internal/QRLoader/QRLoader.scss
index 41b9fe5bd4..7735552dd6 100644
--- a/packages/lib/src/components/internal/QRLoader/QRLoader.scss
+++ b/packages/lib/src/components/internal/QRLoader/QRLoader.scss
@@ -110,6 +110,11 @@
     margin-top: token(spacer-100);
 }
 
+.adyen-checkout__await__instructions {
+    display: flex;
+    justify-content: center;
+}
+
 @media (max-width: 1024px) {
     .adyen-checkout__qr-loader__app-link {
         display: block;
diff --git a/packages/lib/src/components/internal/Voucher/Voucher.scss b/packages/lib/src/components/internal/Voucher/Voucher.scss
index 0ff472a366..b5736758e0 100644
--- a/packages/lib/src/components/internal/Voucher/Voucher.scss
+++ b/packages/lib/src/components/internal/Voucher/Voucher.scss
@@ -153,37 +153,6 @@
     line-height: 1.2;
 }
 
-.adyen-checkout__voucher-result__details {
-    list-style: none;
-    padding: 0;
-    margin: -1px auto 0;
-}
-
-.adyen-checkout__voucher-result__details__item {
-    display: flex;
-    justify-content: space-between;
-    font-size: token(text-body-font-size);
-    color: token(color-label-primary);
-    padding: token(spacer-070) token(spacer-090);
-    border-top: 1px solid token(color-separator-primary);
-    word-break: break-word;
-}
-
-.adyen-checkout__voucher-result__details__item:last-child {
-    margin-bottom: 0;
-}
-
-.adyen-checkout__voucher-result__details__label {
-    max-width: 50%;
-    text-align: left;
-}
-
-.adyen-checkout__voucher-result__details__value {
-    max-width: 50%;
-    text-align: right;
-    font-weight: bold;
-}
-
 .adyen-checkout__voucher-result__actions {
     margin: 0 auto token(spacer-100);
     max-width: 100%;
diff --git a/packages/lib/src/components/internal/Voucher/Voucher.tsx b/packages/lib/src/components/internal/Voucher/Voucher.tsx
index 16ff7bb142..919d93d829 100644
--- a/packages/lib/src/components/internal/Voucher/Voucher.tsx
+++ b/packages/lib/src/components/internal/Voucher/Voucher.tsx
@@ -8,6 +8,7 @@ import './Voucher.scss';
 import { VoucherProps } from './types';
 import useImage from '../../../core/Context/useImage';
 import { PREFIX } from '../Icon/constants';
+import DetailsTable from '../DetailsTable';
 
 export default function Voucher({ voucherDetails = [], className = '', ...props }: VoucherProps) {
     const { i18n } = useCoreContext();
@@ -115,16 +116,7 @@ export default function Voucher({ voucherDetails = [], className = '', ...props
                     </ul>
                 )}
 
-                <ul className="adyen-checkout__voucher-result__details">
-                    {voucherDetails
-                        .filter(({ label, value }) => !!label && !!value)
-                        .map(({ label, value }, index) => (
-                            <li key={index} className="adyen-checkout__voucher-result__details__item">
-                                <span className="adyen-checkout__voucher-result__details__label">{label}</span>
-                                <span className="adyen-checkout__voucher-result__details__value">{value}</span>
-                            </li>
-                        ))}
-                </ul>
+                <DetailsTable tableFields={voucherDetails} />
             </div>
         </div>
     );
diff --git a/packages/lib/src/components/types.ts b/packages/lib/src/components/types.ts
index f32534ed20..a382ef67cc 100644
--- a/packages/lib/src/components/types.ts
+++ b/packages/lib/src/components/types.ts
@@ -27,6 +27,7 @@ export * from './Redirect/types';
 export * from './Sepa/types';
 export * from './ThreeDS2/types';
 export * from './UPI/types';
+export * from './PayTo/types';
 
 /**
  * Helpers
diff --git a/packages/lib/storybook/public/mockServiceWorker.js b/packages/lib/storybook/public/mockServiceWorker.js
new file mode 100644
index 0000000000..4c0b038ee9
--- /dev/null
+++ b/packages/lib/storybook/public/mockServiceWorker.js
@@ -0,0 +1,302 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const PACKAGE_VERSION = '2.7.0';
+const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f';
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse');
+const activeClientIds = new Set();
+
+self.addEventListener('install', function () {
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', function (event) {
+    event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('message', async function (event) {
+    const clientId = event.source.id;
+
+    if (!clientId || !self.clients) {
+        return;
+    }
+
+    const client = await self.clients.get(clientId);
+
+    if (!client) {
+        return;
+    }
+
+    const allClients = await self.clients.matchAll({
+        type: 'window'
+    });
+
+    switch (event.data) {
+        case 'KEEPALIVE_REQUEST': {
+            sendToClient(client, {
+                type: 'KEEPALIVE_RESPONSE'
+            });
+            break;
+        }
+
+        case 'INTEGRITY_CHECK_REQUEST': {
+            sendToClient(client, {
+                type: 'INTEGRITY_CHECK_RESPONSE',
+                payload: {
+                    packageVersion: PACKAGE_VERSION,
+                    checksum: INTEGRITY_CHECKSUM
+                }
+            });
+            break;
+        }
+
+        case 'MOCK_ACTIVATE': {
+            activeClientIds.add(clientId);
+
+            sendToClient(client, {
+                type: 'MOCKING_ENABLED',
+                payload: {
+                    client: {
+                        id: client.id,
+                        frameType: client.frameType
+                    }
+                }
+            });
+            break;
+        }
+
+        case 'MOCK_DEACTIVATE': {
+            activeClientIds.delete(clientId);
+            break;
+        }
+
+        case 'CLIENT_CLOSED': {
+            activeClientIds.delete(clientId);
+
+            const remainingClients = allClients.filter(client => {
+                return client.id !== clientId;
+            });
+
+            // Unregister itself when there are no more clients
+            if (remainingClients.length === 0) {
+                self.registration.unregister();
+            }
+
+            break;
+        }
+    }
+});
+
+self.addEventListener('fetch', function (event) {
+    const { request } = event;
+
+    // Bypass navigation requests.
+    if (request.mode === 'navigate') {
+        return;
+    }
+
+    // Opening the DevTools triggers the "only-if-cached" request
+    // that cannot be handled by the worker. Bypass such requests.
+    if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+        return;
+    }
+
+    // Bypass all requests when there are no active clients.
+    // Prevents the self-unregistered worked from handling requests
+    // after it's been deleted (still remains active until the next reload).
+    if (activeClientIds.size === 0) {
+        return;
+    }
+
+    // Generate unique request ID.
+    const requestId = crypto.randomUUID();
+    event.respondWith(handleRequest(event, requestId));
+});
+
+async function handleRequest(event, requestId) {
+    const client = await resolveMainClient(event);
+    const response = await getResponse(event, client, requestId);
+
+    // Send back the response clone for the "response:*" life-cycle events.
+    // Ensure MSW is active and ready to handle the message, otherwise
+    // this message will pend indefinitely.
+    if (client && activeClientIds.has(client.id)) {
+        (async function () {
+            const responseClone = response.clone();
+
+            sendToClient(
+                client,
+                {
+                    type: 'RESPONSE',
+                    payload: {
+                        requestId,
+                        isMockedResponse: IS_MOCKED_RESPONSE in response,
+                        type: responseClone.type,
+                        status: responseClone.status,
+                        statusText: responseClone.statusText,
+                        body: responseClone.body,
+                        headers: Object.fromEntries(responseClone.headers.entries())
+                    }
+                },
+                [responseClone.body]
+            );
+        })();
+    }
+
+    return response;
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+    const client = await self.clients.get(event.clientId);
+
+    if (activeClientIds.has(event.clientId)) {
+        return client;
+    }
+
+    if (client?.frameType === 'top-level') {
+        return client;
+    }
+
+    const allClients = await self.clients.matchAll({
+        type: 'window'
+    });
+
+    return allClients
+        .filter(client => {
+            // Get only those clients that are currently visible.
+            return client.visibilityState === 'visible';
+        })
+        .find(client => {
+            // Find the client ID that's recorded in the
+            // set of clients that have registered the worker.
+            return activeClientIds.has(client.id);
+        });
+}
+
+async function getResponse(event, client, requestId) {
+    const { request } = event;
+
+    // Clone the request because it might've been already used
+    // (i.e. its body has been read and sent to the client).
+    const requestClone = request.clone();
+
+    function passthrough() {
+        // Cast the request headers to a new Headers instance
+        // so the headers can be manipulated with.
+        const headers = new Headers(requestClone.headers);
+
+        // Remove the "accept" header value that marked this request as passthrough.
+        // This prevents request alteration and also keeps it compliant with the
+        // user-defined CORS policies.
+        const acceptHeader = headers.get('accept');
+        if (acceptHeader) {
+            const values = acceptHeader.split(',').map(value => value.trim());
+            const filteredValues = values.filter(value => value !== 'msw/passthrough');
+
+            if (filteredValues.length > 0) {
+                headers.set('accept', filteredValues.join(', '));
+            } else {
+                headers.delete('accept');
+            }
+        }
+
+        return fetch(requestClone, { headers });
+    }
+
+    // Bypass mocking when the client is not active.
+    if (!client) {
+        return passthrough();
+    }
+
+    // Bypass initial page load requests (i.e. static assets).
+    // The absence of the immediate/parent client in the map of the active clients
+    // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+    // and is not ready to handle requests.
+    if (!activeClientIds.has(client.id)) {
+        return passthrough();
+    }
+
+    // Notify the client that a request has been intercepted.
+    const requestBuffer = await request.arrayBuffer();
+    const clientMessage = await sendToClient(
+        client,
+        {
+            type: 'REQUEST',
+            payload: {
+                id: requestId,
+                url: request.url,
+                mode: request.mode,
+                method: request.method,
+                headers: Object.fromEntries(request.headers.entries()),
+                cache: request.cache,
+                credentials: request.credentials,
+                destination: request.destination,
+                integrity: request.integrity,
+                redirect: request.redirect,
+                referrer: request.referrer,
+                referrerPolicy: request.referrerPolicy,
+                body: requestBuffer,
+                keepalive: request.keepalive
+            }
+        },
+        [requestBuffer]
+    );
+
+    switch (clientMessage.type) {
+        case 'MOCK_RESPONSE': {
+            return respondWithMock(clientMessage.data);
+        }
+
+        case 'PASSTHROUGH': {
+            return passthrough();
+        }
+    }
+
+    return passthrough();
+}
+
+function sendToClient(client, message, transferrables = []) {
+    return new Promise((resolve, reject) => {
+        const channel = new MessageChannel();
+
+        channel.port1.onmessage = event => {
+            if (event.data && event.data.error) {
+                return reject(event.data.error);
+            }
+
+            resolve(event.data);
+        };
+
+        client.postMessage(message, [channel.port2].concat(transferrables.filter(Boolean)));
+    });
+}
+
+async function respondWithMock(response) {
+    // Setting response status code to 0 is a no-op.
+    // However, when responding with a "Response.error()", the produced Response
+    // instance will have status code set to 0. Since it's not possible to create
+    // a Response instance with status code 0, handle that use-case separately.
+    if (response.status === 0) {
+        return Response.error();
+    }
+
+    const mockedResponse = new Response(response.body, response);
+
+    Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+        value: true,
+        enumerable: true
+    });
+
+    return mockedResponse;
+}
diff --git a/packages/lib/storybook/stories/components/PayTo.stories.tsx b/packages/lib/storybook/stories/components/PayTo.stories.tsx
index c5806e779a..3155b2aa5c 100644
--- a/packages/lib/storybook/stories/components/PayTo.stories.tsx
+++ b/packages/lib/storybook/stories/components/PayTo.stories.tsx
@@ -2,23 +2,136 @@ import { Meta, StoryObj } from '@storybook/preact';
 import { PaymentMethodStoryProps } from '../types';
 import { ComponentContainer } from '../ComponentContainer';
 import { Checkout } from '../Checkout';
-import PayTo, { PayToConfiguration } from '../../../src/components/PayTo/PayTo';
+import PayTo from '../../../src/components/PayTo/PayTo';
+import { http, HttpResponse } from 'msw';
+import { MandateType, PayToConfiguration } from '../../../src/components/PayTo/types';
 
-type PayToStory = StoryObj<PaymentMethodStoryProps<PayToConfiguration>>;
+// extend the default story args so we can change mandate top level
+interface ExtendedStoryArgs extends PaymentMethodStoryProps<PayToConfiguration> {
+    mandate: MandateType;
+}
+type PayToStory = StoryObj<ExtendedStoryArgs>;
+
+const MANDATE_EXAMPLE: MandateType = {
+    amount: '25900', // [Mandatory] for PayTo - Mandate Amount field
+    amountRule: 'exact', // [Mandatory] for PayTo - Needs to be Localised
+    endsAt: '2025-12-31', // [Mandatory] for PayTo - Date format
+    frequency: 'monthly', // [Mandatory] for PayTo - Needs to be Localised
+    remarks: 'testThroughFlow1', // [Mandatory] for PayTo - Needs to be Localised as "Description"
+    count: '3' // [Optional] will be returned only if the merchant sends it
+    //startsAt: '2025-02-01' // [Optional] will be returned only if the merchant sends it
+};
 
 const meta: Meta<PaymentMethodStoryProps<PayToStory>> = {
     title: 'Components/PayTo'
 };
 
+// const payToPaymentObject = {
+//     amount: {
+//         currency: 'AUD', // [Mandatory] only supported value: "AUD"
+//         value: 4200 // [Mandatory] { int: 1 to 1000000000 }
+//     },
+//     paymentMethod: {
+//         type: 'payto', // [Mandatory]
+//         shopperAccountIdentifier: '123456-98765432' // [Mandatory]
+//     },
+//     countryCode: 'AU', // [Mandatory]
+//     merchantAccount: 'YOUR_MERCHANT_ACCOUNT', // [Mandatory]
+//     reference: 'YOUR_ORDER_NUMBER', // [Mandatory]
+//     mandate: {
+//         amount: '42000', // [Mandatory] { int: 1 to 1000000000 }
+//         amountRule: 'exact', // [Mandatory]
+//         frequency: 'monthly', // [Mandatory] need to update docs to add "adhoc"
+//         startsAt: '2024-10-01', // [Optional]
+//         endsAt: '2027-10-01', // [Mandatory]
+//         remarks: 'Remark on mandate', // [Mandatory]
+//         count: '1' // [Conditional] new field
+//     },
+//     shopperName: { firstName: 'John', lastName: 'Doe' }, // [Mandatory]
+//     shopperEmail: 's.hopper@example.com', // [Mandatory]
+//     storePaymentMethod: true, // [Mandatory]
+//     shopperInteraction: 'Ecommerce', // [Mandatory]
+//     recurringProcessingModel: 'Subscription', // [Mandatory]
+//     shopperReference: 'YOUR_SHOPPER_REFERENCE' // [Mandatory]
+// };
+
 export const Default: PayToStory = {
-    render: ({ componentConfiguration, ...checkoutConfig }) => (
+    render: ({ componentConfiguration, mandate, ...checkoutConfig }) => (
         <Checkout checkoutConfig={checkoutConfig}>
-            {checkout => <ComponentContainer element={new PayTo(checkout, componentConfiguration)} />}
+            {checkout => (
+                <ComponentContainer
+                    element={
+                        new PayTo(checkout, {
+                            mandate,
+                            ...componentConfiguration
+                        })
+                    }
+                />
+            )}
         </Checkout>
     ),
     args: {
         countryCode: 'AU',
-        useSessions: false
+        useSessions: false,
+        mandate: MANDATE_EXAMPLE
     }
 };
 export default meta;
+
+// const paymentResponse = {
+//     resultCode: 'Pending',
+//     action: {
+//         paymentData: 'Ab02b4c0....J86s=',
+//         paymentMethodType: 'payto',
+//         expiresAt: '2024-11-13T00:01:37Z',
+//         mandate: {
+//             amount: '4001', // [Mandatory] for PayTo - Mandate Amount field
+//             amountRule: 'exact', // [Mandatory] for PayTo - Needs to be Localised
+//             endsAt: '2024-12-31', // [Mandatory] for PayTo - Date format
+//             frequency: 'adhoc', // [Mandatory] for PayTo - Needs to be Localised
+//             remarks: 'testThroughFlow1', // [Mandatory] for PayTo - Needs to be Localised as "Description"
+//             count: '3', // [Optional] will be returned only if the merchant sends it
+//             startsAt: '2024-11-13' // [Optional] will be returned only if the merchant sends it
+//         },
+//         name: 'John Smitty', // Echo back the field passed in the request
+//         shopperAccountIdentifier: 'test_again@test.com', // Echo back the field passed in the request
+//         payee: '[MERCHANT_NAME]', // Merchant name displayed in the agreement
+//         type: 'await'
+//     }
+// };
+
+export const PayToAwaitScreen: PayToStory = {
+    args: {
+        countryCode: 'AU',
+        shopperLocale: 'en-US',
+        mandate: MANDATE_EXAMPLE
+    },
+    parameters: {
+        msw: {
+            handlers: [
+                http.post('https://checkoutshopper-test.adyen.com/checkoutshopper/services/PaymentInitiation/v1/status', () => {
+                    return HttpResponse.json({
+                        payload: '',
+                        resultCode: 'pending',
+                        type: 'pending'
+                    });
+                })
+            ]
+        }
+    },
+    render: ({ componentConfiguration, mandate, ...checkoutConfig }) => (
+        <Checkout checkoutConfig={checkoutConfig}>
+            {checkout => (
+                <ComponentContainer
+                    element={
+                        new PayTo(checkout, {
+                            paymentData: 'Ab02b4c0....J86s=',
+                            mandate,
+                            ...componentConfiguration
+                        })
+                    }
+                />
+            )}
+        </Checkout>
+    )
+};
diff --git a/packages/server/translations/en-US.json b/packages/server/translations/en-US.json
index d8a14a46e5..583705be4d 100644
--- a/packages/server/translations/en-US.json
+++ b/packages/server/translations/en-US.json
@@ -337,5 +337,22 @@
     "payto.bsb.header": "BSB",
     "payto.bsb.description" : "Enter the bank account number and the Bank State Branch that is connected to your account to continue",
     "payto.bsb.label.bankAccountNumber": "Bank account number",
-    "payto.bsb.label.bsb": "Bank State Branch"
+    "payto.bsb.label.bsb": "Bank State Branch",
+    "payto.instructions.steps": "Log into your PayTo banking app@Authorize the PayTo agreement@Approve the payment terms@Complete the transaction",
+    "payto.confirmPayment": "Thank you for your purchase, complete your payment by following the instructions below.",
+    "payto.mandate.amount.label": "Amount",
+    "payto.mandate.frequency.label": "Frequency",
+    "payto.mandate.remarks.label": "Description",
+    "payto.mandate.startsAt.label": "Start Date",
+    "payto.mandate.endsAt.label": "Ends Date",
+    "payto.mandate.amount.max": "Up to %{amount} per transaction",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} time(s)",
+    "payto.mandate.frquency.daily": "%{count} payment(s) Daily",
+    "payto.mandate.frquency.weekly": "%{count} payment(s) Weekly",
+    "payto.mandate.frquency.biWeekly": "%{count} payment(s) Fortnightly",
+    "payto.mandate.frquency.monthly": "%{count} payment(s) Monthly",
+    "payto.mandate.frquency.quarterly": "%{count} payment(s) Quarterly",
+    "payto.mandate.frquency.halfYearly": "%{count} payment(s) Bi-Annual",
+    "payto.mandate.frquency.yearly": "%{count} payment(s) Yearly"
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 0e111da50e..5e58044bb7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6661,7 +6661,7 @@ is-negative-zero@^2.0.3:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
   integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
 
-is-node-process@^1.2.0:
+is-node-process@^1.0.1, is-node-process@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/is-node-process/-/is-node-process-1.2.0.tgz#ea02a1b90ddb3934a19aea414e88edef7e11d134"
   integrity sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==
@@ -7993,6 +7993,13 @@ ms@2.1.3, ms@^2.1.1, ms@^2.1.3:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+msw-storybook-addon@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/msw-storybook-addon/-/msw-storybook-addon-2.0.4.tgz#ff1f583c95aef5f8c2014299f235e13cdd34dc1b"
+  integrity sha512-rstO8+r01sRMg6PPP7OxM8LG5/6r4+wmp2uapHeHvm9TQQRHvpPXOU/Y9/Somysz8Oi4Ea1aummXH3JlnP2LIA==
+  dependencies:
+    is-node-process "^1.0.1"
+
 msw@^2.6.4:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/msw/-/msw-2.7.0.tgz#d13ff87f7e018fc4c359800ff72ba5017033fb56"
@@ -10347,16 +10354,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10483,14 +10481,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -11676,7 +11667,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -11694,15 +11685,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 643bd9726c0cd81e2cbec3aa63a252a13249c378 Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Wed, 5 Feb 2025 17:29:48 +0100
Subject: [PATCH 04/20] adds tests and small fixes

(cherry picked from commit 82259dd58989b5d682b949c2abbd520a9a13910e)
---
 packages/lib/config/setupTests.ts             |   1 +
 .../config/testMocks/commonCorePropsMock.ts   |   6 +
 .../lib/src/components/PayTo/PayTo.test.ts    | 184 +++++++++++++++++-
 .../PayTo/components/MandateSummary.tsx       |   2 +-
 .../components/PayTo/components/validate.ts   |   2 +-
 .../src/components/RatePay/RatePay.test.ts    |   4 +
 packages/server/translations/en-US.json       |  14 +-
 7 files changed, 202 insertions(+), 11 deletions(-)
 create mode 100644 packages/lib/config/testMocks/commonCorePropsMock.ts

diff --git a/packages/lib/config/setupTests.ts b/packages/lib/config/setupTests.ts
index 727154d458..4ba34d5a63 100644
--- a/packages/lib/config/setupTests.ts
+++ b/packages/lib/config/setupTests.ts
@@ -10,5 +10,6 @@ import './testMocks/analyticsMock';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import 'whatwg-fetch';
 import './testMocks/srPanelMock';
+import './testMocks/modulesMock';
 
 configure({ adapter: new Adapter() });
diff --git a/packages/lib/config/testMocks/commonCorePropsMock.ts b/packages/lib/config/testMocks/commonCorePropsMock.ts
new file mode 100644
index 0000000000..6c673ec5d8
--- /dev/null
+++ b/packages/lib/config/testMocks/commonCorePropsMock.ts
@@ -0,0 +1,6 @@
+global.commonCoreProps = {
+    clientKey: 'mock_clientKey',
+    loadingContext: 'https://checkoutshopper-test.adyen.com/checkoutshopper/',
+    i18n: global.i18n,
+    modules: { analytics: global.analytics, resources: global.resources, srPanel: global.srPanel }
+};
diff --git a/packages/lib/src/components/PayTo/PayTo.test.ts b/packages/lib/src/components/PayTo/PayTo.test.ts
index 7e338ad6ec..61d4ef7127 100644
--- a/packages/lib/src/components/PayTo/PayTo.test.ts
+++ b/packages/lib/src/components/PayTo/PayTo.test.ts
@@ -3,6 +3,8 @@ import PayTo from './PayTo';
 import userEvent from '@testing-library/user-event';
 import getDataset from '../../core/Services/get-dataset';
 import { MandateType } from './types';
+import { setupServer } from 'msw/node';
+import { http, HttpResponse } from 'msw';
 
 jest.mock('../../core/Services/get-dataset');
 (getDataset as jest.Mock).mockImplementation(
@@ -61,8 +63,6 @@ describe('PayTo', () => {
         // check if button actually triggers submit
         await user.click(button);
         expect(onSubmitMock).toHaveBeenCalledTimes(0);
-
-        //TODO check validation fails
     });
 
     test('should change to different identifier when selected', async () => {
@@ -83,4 +83,184 @@ describe('PayTo', () => {
         expect(screen.queryByLabelText(/Prefix/i)).toBeFalsy();
         expect(screen.getByLabelText(/Email/i)).toBeTruthy();
     });
+
+    describe('PayTo await screen', () => {
+        const server = setupServer(
+            http.post('https://checkoutshopper-test.adyen.com/checkoutshopper/services/PaymentInitiation/v1/status', () => {
+                return HttpResponse.json({
+                    payload: 'mockPaymentData',
+                    resultCode: 'pending',
+                    type: 'pending'
+                });
+            })
+        );
+
+        beforeAll(() => server.listen());
+        afterEach(() => server.resetHandlers());
+        afterAll(() => server.close());
+
+        test('should render await screen and transaction and mandate amount should be different', async () => {
+            const payTo = new PayTo(global.core, {
+                ...global.communCoreComponentProps,
+                amount: {
+                    value: '2000',
+                    currency: 'AUD'
+                },
+                mandate: MOCK_MANDATE,
+                paymentData: 'mockblob',
+                payee: 'Mock Payee'
+            });
+
+            render(payTo.render());
+
+            // amount from transaction
+            expect(await screen.findByText('A$20.00')).toBeTruthy();
+
+            // for context why we are not using roles here:
+            // https://github.com/testing-library/dom-testing-library/issues/140
+
+            // eslint-disable-next-line testing-library/no-node-access
+            const mandateAmount = screen.getByText('Amount').nextSibling;
+            expect(mandateAmount).toHaveTextContent('A$40.01');
+        });
+
+        test('should render await screen and amount should say up to if amountRule is max', async () => {
+            const payTo = new PayTo(global.core, {
+                ...global.communCoreComponentProps,
+                amount: {
+                    value: '2000',
+                    currency: 'AUD'
+                },
+                mandate: {
+                    ...MOCK_MANDATE,
+                    amountRule: 'max'
+                },
+                paymentData: 'mockblob',
+                payee: 'Mock Payee'
+            });
+
+            render(payTo.render());
+
+            // amount from transaction
+            expect(await screen.findByText('A$20.00')).toBeTruthy();
+
+            // for context why we are not using roles here:
+            // https://github.com/testing-library/dom-testing-library/issues/140
+
+            // eslint-disable-next-line testing-library/no-node-access
+            const mandateAmount = screen.getByText('Amount').nextSibling;
+            expect(mandateAmount).toHaveTextContent('Up to A$40.01 per transaction');
+        });
+
+        test('should render await screen and show correct frequency (Fortnightly)', async () => {
+            const payTo = new PayTo(global.core, {
+                ...global.communCoreComponentProps,
+                amount: {
+                    value: '2000',
+                    currency: 'AUD'
+                },
+                mandate: { ...MOCK_MANDATE, frequency: 'biWeekly' },
+                paymentData: 'mockblob',
+                payee: 'Mock Payee'
+            });
+
+            render(payTo.render());
+
+            // for context why we are not using roles here:
+            // https://github.com/testing-library/dom-testing-library/issues/140
+
+            const mandateFrequency = await screen.findByText('Frequency');
+            // eslint-disable-next-line testing-library/no-node-access
+            expect(mandateFrequency.nextSibling).toHaveTextContent('3 payment(s) Fortnightly');
+        });
+
+        test('should render await screen and show correct frequency (Yearly)', async () => {
+            const payTo = new PayTo(global.core, {
+                ...global.communCoreComponentProps,
+                amount: {
+                    value: '2000',
+                    currency: 'AUD'
+                },
+                mandate: { ...MOCK_MANDATE, frequency: 'yearly' },
+                paymentData: 'mockblob',
+                payee: 'Mock Payee'
+            });
+
+            render(payTo.render());
+
+            // for context why we are not using roles here:
+            // https://github.com/testing-library/dom-testing-library/issues/140
+
+            const mandateFrequency = await screen.findByText('Frequency');
+            // eslint-disable-next-line testing-library/no-node-access
+            expect(mandateFrequency.nextSibling).toHaveTextContent('3 payment(s) Yearly');
+        });
+
+        test('should render await screen and show correct frequency adhoc with count', async () => {
+            const payTo = new PayTo(global.core, {
+                ...global.communCoreComponentProps,
+                amount: {
+                    value: '2000',
+                    currency: 'AUD'
+                },
+                mandate: { ...MOCK_MANDATE, frequency: 'adhoc' },
+                paymentData: 'mockblob',
+                payee: 'Mock Payee'
+            });
+
+            render(payTo.render());
+
+            // for context why we are not using roles here:
+            // https://github.com/testing-library/dom-testing-library/issues/140
+
+            const mandateFrequency = await screen.findByText('Frequency');
+            // eslint-disable-next-line testing-library/no-node-access
+            expect(mandateFrequency.nextSibling).toHaveTextContent('3 time(s)');
+        });
+
+        test('should render await screen and show correct frequency adhoc without count', async () => {
+            const payTo = new PayTo(global.core, {
+                ...global.communCoreComponentProps,
+                amount: {
+                    value: '2000',
+                    currency: 'AUD'
+                },
+                mandate: { ...MOCK_MANDATE, count: null, frequency: 'adhoc' },
+                paymentData: 'mockblob',
+                payee: 'Mock Payee'
+            });
+
+            render(payTo.render());
+
+            // for context why we are not using roles here:
+            // https://github.com/testing-library/dom-testing-library/issues/140
+
+            const mandateFrequency = await screen.findByText('Frequency');
+            // eslint-disable-next-line testing-library/no-node-access
+            expect(mandateFrequency.nextSibling).toHaveTextContent('Ad Hoc');
+        });
+
+        // TODO waiting for feedback for what should be the result of this test case
+        test.skip('should render await screen and show correct frequency daily without count', async () => {
+            const payTo = new PayTo(global.core, {
+                ...global.communCoreComponentProps,
+                amount: {
+                    value: '2000',
+                    currency: 'AUD'
+                },
+                mandate: { ...MOCK_MANDATE, count: null, frequency: 'daily' },
+                paymentData: 'mockblob',
+                payee: 'Mock Payee'
+            });
+
+            render(payTo.render());
+
+            // for context why we are not using roles here:
+            // https://github.com/testing-library/dom-testing-library/issues/140
+
+            const mandateFrequency = await screen.findByText('Frequency');
+            // eslint-disable-next-line testing-library/no-node-access
+            expect(mandateFrequency.nextSibling).toHaveTextContent('Ad Hoc');
+        });
+    });
 });
diff --git a/packages/lib/src/components/PayTo/components/MandateSummary.tsx b/packages/lib/src/components/PayTo/components/MandateSummary.tsx
index 861e5f76f7..9c50b4190c 100644
--- a/packages/lib/src/components/PayTo/components/MandateSummary.tsx
+++ b/packages/lib/src/components/PayTo/components/MandateSummary.tsx
@@ -10,7 +10,7 @@ export default function MandateSummary({ mandate, currencyCode }: { mandate: Man
     const tableFields: DetailsTableData = Object.keys(mandate).map((key: keyof MandateType) => {
         // get the label for the key, like payto.mandate.amount.label, payto.mandate.frequency.label
         const labelText = i18n.get(`payto.mandate.${key}.label`);
-        const amountValue = Number(mandate['amount']);
+        const amountValue = Number(mandate.amount);
         switch (key) {
             case 'amount': {
                 // it can be either show "amount" OR "amount up to (max amount)"
diff --git a/packages/lib/src/components/PayTo/components/validate.ts b/packages/lib/src/components/PayTo/components/validate.ts
index fb81089d24..8a73a358dc 100644
--- a/packages/lib/src/components/PayTo/components/validate.ts
+++ b/packages/lib/src/components/PayTo/components/validate.ts
@@ -7,7 +7,7 @@ const abnRegex = /^((\d{9})|(\d{11}))$/;
 const orgidRegex = /`^[!-@[-~][ -@[-~]{0,254}[!-@[-~]$`/;
 
 const emailRegex =
-    /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)$/;
+    /^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?)$/;
 
 // full phone regex Phone: ^\+[0-9]{1,3}-[1-9]{1,1}[0-9]{1,29}$
 const phoneNumberRegex = /^[1-9]{1,1}[0-9]{1,29}$/;
diff --git a/packages/lib/src/components/RatePay/RatePay.test.ts b/packages/lib/src/components/RatePay/RatePay.test.ts
index a7cd0e9cb7..db28363205 100644
--- a/packages/lib/src/components/RatePay/RatePay.test.ts
+++ b/packages/lib/src/components/RatePay/RatePay.test.ts
@@ -14,6 +14,10 @@ beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
+server.events.on('request:start', ({ request }) => {
+    console.log('MSW intercepted:', request.method, request.url);
+});
+
 describe('RatePay Direct Debit', () => {
     test('should make a payment', async () => {
         const user = userEvent.setup();
diff --git a/packages/server/translations/en-US.json b/packages/server/translations/en-US.json
index 583705be4d..765882fcc7 100644
--- a/packages/server/translations/en-US.json
+++ b/packages/server/translations/en-US.json
@@ -348,11 +348,11 @@
     "payto.mandate.amount.max": "Up to %{amount} per transaction",
     "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
     "payto.mandate.frequency.adhoc": "%{count} time(s)",
-    "payto.mandate.frquency.daily": "%{count} payment(s) Daily",
-    "payto.mandate.frquency.weekly": "%{count} payment(s) Weekly",
-    "payto.mandate.frquency.biWeekly": "%{count} payment(s) Fortnightly",
-    "payto.mandate.frquency.monthly": "%{count} payment(s) Monthly",
-    "payto.mandate.frquency.quarterly": "%{count} payment(s) Quarterly",
-    "payto.mandate.frquency.halfYearly": "%{count} payment(s) Bi-Annual",
-    "payto.mandate.frquency.yearly": "%{count} payment(s) Yearly"
+    "payto.mandate.frequency.daily": "%{count} payment(s) Daily",
+    "payto.mandate.frequency.weekly": "%{count} payment(s) Weekly",
+    "payto.mandate.frequency.biWeekly": "%{count} payment(s) Fortnightly",
+    "payto.mandate.frequency.monthly": "%{count} payment(s) Monthly",
+    "payto.mandate.frequency.quarterly": "%{count} payment(s) Quarterly",
+    "payto.mandate.frequency.halfYearly": "%{count} payment(s) Bi-Annual",
+    "payto.mandate.frequency.yearly": "%{count} payment(s) Yearly"
 }
\ No newline at end of file

From ff50df24bc3e0ba945d33fc5cd29ddbeb1ec8db0 Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Wed, 5 Feb 2025 17:31:36 +0100
Subject: [PATCH 05/20] clean up tests

(cherry picked from commit c03defe4b27836719bf4181fedd205805adce82e)
---
 .../lib/src/components/PayTo/PayTo.test.ts    | 32 ++++---------------
 1 file changed, 7 insertions(+), 25 deletions(-)

diff --git a/packages/lib/src/components/PayTo/PayTo.test.ts b/packages/lib/src/components/PayTo/PayTo.test.ts
index 61d4ef7127..d5ad2ad50b 100644
--- a/packages/lib/src/components/PayTo/PayTo.test.ts
+++ b/packages/lib/src/components/PayTo/PayTo.test.ts
@@ -101,7 +101,7 @@ describe('PayTo', () => {
 
         test('should render await screen and transaction and mandate amount should be different', async () => {
             const payTo = new PayTo(global.core, {
-                ...global.communCoreComponentProps,
+                ...global.commonCoreProps,
                 amount: {
                     value: '2000',
                     currency: 'AUD'
@@ -126,7 +126,7 @@ describe('PayTo', () => {
 
         test('should render await screen and amount should say up to if amountRule is max', async () => {
             const payTo = new PayTo(global.core, {
-                ...global.communCoreComponentProps,
+                ...global.commonCoreProps,
                 amount: {
                     value: '2000',
                     currency: 'AUD'
@@ -144,9 +144,6 @@ describe('PayTo', () => {
             // amount from transaction
             expect(await screen.findByText('A$20.00')).toBeTruthy();
 
-            // for context why we are not using roles here:
-            // https://github.com/testing-library/dom-testing-library/issues/140
-
             // eslint-disable-next-line testing-library/no-node-access
             const mandateAmount = screen.getByText('Amount').nextSibling;
             expect(mandateAmount).toHaveTextContent('Up to A$40.01 per transaction');
@@ -154,7 +151,7 @@ describe('PayTo', () => {
 
         test('should render await screen and show correct frequency (Fortnightly)', async () => {
             const payTo = new PayTo(global.core, {
-                ...global.communCoreComponentProps,
+                ...global.commonCoreProps,
                 amount: {
                     value: '2000',
                     currency: 'AUD'
@@ -166,9 +163,6 @@ describe('PayTo', () => {
 
             render(payTo.render());
 
-            // for context why we are not using roles here:
-            // https://github.com/testing-library/dom-testing-library/issues/140
-
             const mandateFrequency = await screen.findByText('Frequency');
             // eslint-disable-next-line testing-library/no-node-access
             expect(mandateFrequency.nextSibling).toHaveTextContent('3 payment(s) Fortnightly');
@@ -176,7 +170,7 @@ describe('PayTo', () => {
 
         test('should render await screen and show correct frequency (Yearly)', async () => {
             const payTo = new PayTo(global.core, {
-                ...global.communCoreComponentProps,
+                ...global.commonCoreProps,
                 amount: {
                     value: '2000',
                     currency: 'AUD'
@@ -188,9 +182,6 @@ describe('PayTo', () => {
 
             render(payTo.render());
 
-            // for context why we are not using roles here:
-            // https://github.com/testing-library/dom-testing-library/issues/140
-
             const mandateFrequency = await screen.findByText('Frequency');
             // eslint-disable-next-line testing-library/no-node-access
             expect(mandateFrequency.nextSibling).toHaveTextContent('3 payment(s) Yearly');
@@ -198,7 +189,7 @@ describe('PayTo', () => {
 
         test('should render await screen and show correct frequency adhoc with count', async () => {
             const payTo = new PayTo(global.core, {
-                ...global.communCoreComponentProps,
+                ...global.commonCoreProps,
                 amount: {
                     value: '2000',
                     currency: 'AUD'
@@ -210,9 +201,6 @@ describe('PayTo', () => {
 
             render(payTo.render());
 
-            // for context why we are not using roles here:
-            // https://github.com/testing-library/dom-testing-library/issues/140
-
             const mandateFrequency = await screen.findByText('Frequency');
             // eslint-disable-next-line testing-library/no-node-access
             expect(mandateFrequency.nextSibling).toHaveTextContent('3 time(s)');
@@ -220,7 +208,7 @@ describe('PayTo', () => {
 
         test('should render await screen and show correct frequency adhoc without count', async () => {
             const payTo = new PayTo(global.core, {
-                ...global.communCoreComponentProps,
+                ...global.commonCoreProps,
                 amount: {
                     value: '2000',
                     currency: 'AUD'
@@ -232,9 +220,6 @@ describe('PayTo', () => {
 
             render(payTo.render());
 
-            // for context why we are not using roles here:
-            // https://github.com/testing-library/dom-testing-library/issues/140
-
             const mandateFrequency = await screen.findByText('Frequency');
             // eslint-disable-next-line testing-library/no-node-access
             expect(mandateFrequency.nextSibling).toHaveTextContent('Ad Hoc');
@@ -243,7 +228,7 @@ describe('PayTo', () => {
         // TODO waiting for feedback for what should be the result of this test case
         test.skip('should render await screen and show correct frequency daily without count', async () => {
             const payTo = new PayTo(global.core, {
-                ...global.communCoreComponentProps,
+                ...global.commonCoreProps,
                 amount: {
                     value: '2000',
                     currency: 'AUD'
@@ -255,9 +240,6 @@ describe('PayTo', () => {
 
             render(payTo.render());
 
-            // for context why we are not using roles here:
-            // https://github.com/testing-library/dom-testing-library/issues/140
-
             const mandateFrequency = await screen.findByText('Frequency');
             // eslint-disable-next-line testing-library/no-node-access
             expect(mandateFrequency.nextSibling).toHaveTextContent('Ad Hoc');

From 588f12e5d338c584ee7c7cf99e50bde5747d017e Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Wed, 5 Feb 2025 18:15:03 +0100
Subject: [PATCH 06/20] hardcode phone input

---
 packages/lib/config/setupTests.ts             |  2 +-
 .../PayTo/components/PayToPhone.tsx           | 22 ++++++++++++-------
 .../internal/PhoneInput/PhoneInputFields.tsx  |  5 +++--
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/lib/config/setupTests.ts b/packages/lib/config/setupTests.ts
index 4ba34d5a63..fe237dc23f 100644
--- a/packages/lib/config/setupTests.ts
+++ b/packages/lib/config/setupTests.ts
@@ -10,6 +10,6 @@ import './testMocks/analyticsMock';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import 'whatwg-fetch';
 import './testMocks/srPanelMock';
-import './testMocks/modulesMock';
+import './testMocks/commonCorePropsMock';
 
 configure({ adapter: new Adapter() });
diff --git a/packages/lib/src/components/PayTo/components/PayToPhone.tsx b/packages/lib/src/components/PayTo/components/PayToPhone.tsx
index fa1de5a070..e5decb6efc 100644
--- a/packages/lib/src/components/PayTo/components/PayToPhone.tsx
+++ b/packages/lib/src/components/PayTo/components/PayToPhone.tsx
@@ -1,5 +1,4 @@
 import { h } from 'preact';
-import usePhonePrefixes from '../../internal/PhoneInput/usePhonePrefixes';
 import { useCoreContext } from '../../../core/Context/CoreProvider';
 import PhoneInputFields from '../../internal/PhoneInput/PhoneInputFields';
 import { Form } from '../../../utils/useForm/types';
@@ -14,15 +13,21 @@ interface PayToPhoneProps {
     data: any; // Data
 }
 
-export default function PayToPhone({ form, onChange, onError, data }: PayToPhoneProps) {
-    const { loadingContext, i18n } = useCoreContext();
+// we have decided to hardcode phone prefix as it's going to be always +61 for now
+const HARDCODED_USE_PHONE_PREFIXES = {
+    phonePrefixes: [
+        {
+            id: '+61',
+            name: '+61 (AU)',
+            selectedOptionName: '+61'
+        }
+    ]
+};
 
-    const allowedCountries = [];
+export default function PayToPhone({ form, onChange, data }: PayToPhoneProps) {
+    const { i18n } = useCoreContext();
 
-    const { loadingStatus: prefixLoadingStatus, phonePrefixes } = usePhonePrefixes({ allowedCountries, loadingContext, handleError: onError });
-
-    // TODO handle the loading status
-    console.log('TODO', prefixLoadingStatus);
+    const { phonePrefixes } = HARDCODED_USE_PHONE_PREFIXES;
 
     const getError = useCallback((field: string) => getErrorMessage(i18n, form.errors[field]), [i18n, form]);
 
@@ -33,6 +38,7 @@ export default function PayToPhone({ form, onChange, onError, data }: PayToPhone
             items={phonePrefixes}
             data={data}
             onChange={onChange}
+            canSelectPrefix={false}
             showNumber={true}
             showPrefix={true}
             form={form}
diff --git a/packages/lib/src/components/internal/PhoneInput/PhoneInputFields.tsx b/packages/lib/src/components/internal/PhoneInput/PhoneInputFields.tsx
index e3b89933fe..8e79a38eb8 100644
--- a/packages/lib/src/components/internal/PhoneInput/PhoneInputFields.tsx
+++ b/packages/lib/src/components/internal/PhoneInput/PhoneInputFields.tsx
@@ -23,13 +23,14 @@ export interface PhoneInputFieldProps {
     ref?;
     showPrefix?: boolean;
     showNumber?: boolean;
+    canSelectPrefix?: boolean;
 }
 /**
  *
  * @param PhoneInputFormProps
  * @constructor
  */
-export default function PhoneInputFields({ getError, showNumber, showPrefix, form, ...props }: PhoneInputFieldProps) {
+export default function PhoneInputFields({ getError, showNumber, showPrefix, form, canSelectPrefix = true, ...props }: PhoneInputFieldProps) {
     const { i18n } = useCoreContext();
 
     const { handleChangeFor, data, valid, triggerValidation } = form;
@@ -41,7 +42,6 @@ export default function PhoneInputFields({ getError, showNumber, showPrefix, for
         }
     }, [data.phonePrefix]);
 
-    // TODO why do we need this?
     this.triggerValidation = triggerValidation;
 
     return (
@@ -58,6 +58,7 @@ export default function PhoneInputFields({ getError, showNumber, showPrefix, for
                     name={'phonePrefix'}
                 >
                     <Select
+                        readonly={!canSelectPrefix}
                         className={'adyen-checkout-dropdown adyen-checkout-dropdown--countrycode-selector'}
                         name={'phonePrefix'}
                         items={props.items}

From 85e0e4feae595205be276760c16d158584e3e72c Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Wed, 5 Feb 2025 18:40:40 +0100
Subject: [PATCH 07/20] fix payee and fields order

---
 .../lib/src/components/PayTo/PayTo.test.ts    | 19 +++++++++++++++++++
 packages/lib/src/components/PayTo/PayTo.tsx   |  4 +++-
 .../PayTo/components/MandateSummary.tsx       | 19 +++++++++++++++++--
 packages/lib/src/components/PayTo/types.ts    |  1 +
 .../stories/components/PayTo.stories.tsx      |  9 ++++++---
 packages/server/translations/en-US.json       |  2 ++
 6 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/packages/lib/src/components/PayTo/PayTo.test.ts b/packages/lib/src/components/PayTo/PayTo.test.ts
index d5ad2ad50b..1d9d8c2e20 100644
--- a/packages/lib/src/components/PayTo/PayTo.test.ts
+++ b/packages/lib/src/components/PayTo/PayTo.test.ts
@@ -244,5 +244,24 @@ describe('PayTo', () => {
             // eslint-disable-next-line testing-library/no-node-access
             expect(mandateFrequency.nextSibling).toHaveTextContent('Ad Hoc');
         });
+
+        test('should render await screen and show the correct payee', async () => {
+            const payTo = new PayTo(global.core, {
+                ...global.commonCoreProps,
+                amount: {
+                    value: '2000',
+                    currency: 'AUD'
+                },
+                mandate: { ...MOCK_MANDATE, count: null, frequency: 'daily' },
+                paymentData: 'mockblob',
+                payee: 'Mock Payee'
+            });
+
+            render(payTo.render());
+
+            const mandateFrequency = await screen.findByText('Frequency');
+            // eslint-disable-next-line testing-library/no-node-access
+            expect(mandateFrequency.nextSibling).toHaveTextContent('Ad Hoc');
+        });
     });
 });
diff --git a/packages/lib/src/components/PayTo/PayTo.tsx b/packages/lib/src/components/PayTo/PayTo.tsx
index cb4b0e5591..a3f1d4c8e8 100644
--- a/packages/lib/src/components/PayTo/PayTo.tsx
+++ b/packages/lib/src/components/PayTo/PayTo.tsx
@@ -116,7 +116,9 @@ export class PayToElement extends UIElement<PayToConfiguration> {
                             throttleTime={config.THROTTLE_TIME}
                             throttleInterval={config.THROTTLE_INTERVAL}
                             onActionHandled={this.onActionHandled}
-                            endSlot={() => <MandateSummary mandate={this.props.mandate} currencyCode={this.props.amount.currency} />}
+                            endSlot={() => (
+                                <MandateSummary mandate={this.props.mandate} payee={this.props.payee} currencyCode={this.props.amount.currency} />
+                            )}
                         />
                     </SRPanelProvider>
                 </CoreProvider>
diff --git a/packages/lib/src/components/PayTo/components/MandateSummary.tsx b/packages/lib/src/components/PayTo/components/MandateSummary.tsx
index 9c50b4190c..b7278dc3e3 100644
--- a/packages/lib/src/components/PayTo/components/MandateSummary.tsx
+++ b/packages/lib/src/components/PayTo/components/MandateSummary.tsx
@@ -5,9 +5,18 @@ import { useCoreContext } from '../../../core/Context/CoreProvider';
 import { DetailsTableData } from '../../internal/DetailsTable/DetailsTable';
 import './MandateSummary.scss';
 
-export default function MandateSummary({ mandate, currencyCode }: { mandate: MandateType; currencyCode: string }) {
+export interface MandateSummaryProps {
+    mandate: MandateType;
+    currencyCode: string;
+    payee?: string;
+}
+
+// this is the order the fields are going to be displayed in the UI
+const orderedMandateTableFields = ['payee', 'remarks', 'amount', 'frequency', 'startsAt', 'endsAt'];
+
+export default function MandateSummary({ mandate, currencyCode, payee }: MandateSummaryProps) {
     const { i18n } = useCoreContext();
-    const tableFields: DetailsTableData = Object.keys(mandate).map((key: keyof MandateType) => {
+    const tableFields: DetailsTableData = orderedMandateTableFields.map((key: keyof MandateType | 'payee') => {
         // get the label for the key, like payto.mandate.amount.label, payto.mandate.frequency.label
         const labelText = i18n.get(`payto.mandate.${key}.label`);
         const amountValue = Number(mandate.amount);
@@ -59,6 +68,12 @@ export default function MandateSummary({ mandate, currencyCode }: { mandate: Man
                     label: labelText,
                     value: i18n.date(mandate.endsAt)
                 };
+
+            case 'payee':
+                return {
+                    label: labelText,
+                    value: payee
+                };
         }
     });
 
diff --git a/packages/lib/src/components/PayTo/types.ts b/packages/lib/src/components/PayTo/types.ts
index 7cd77633bf..2454067957 100644
--- a/packages/lib/src/components/PayTo/types.ts
+++ b/packages/lib/src/components/PayTo/types.ts
@@ -20,6 +20,7 @@ export interface PayToConfiguration extends UIElementProps {
     data?: PayToData;
     placeholders?: any; //TODO
     mandate: MandateType;
+    payee?: string;
 }
 
 export interface PayToData extends PayIdFormData, BSBFormData, PayToComponentData {
diff --git a/packages/lib/storybook/stories/components/PayTo.stories.tsx b/packages/lib/storybook/stories/components/PayTo.stories.tsx
index 3155b2aa5c..4320769c39 100644
--- a/packages/lib/storybook/stories/components/PayTo.stories.tsx
+++ b/packages/lib/storybook/stories/components/PayTo.stories.tsx
@@ -9,11 +9,12 @@ import { MandateType, PayToConfiguration } from '../../../src/components/PayTo/t
 // extend the default story args so we can change mandate top level
 interface ExtendedStoryArgs extends PaymentMethodStoryProps<PayToConfiguration> {
     mandate: MandateType;
+    payee: string;
 }
 type PayToStory = StoryObj<ExtendedStoryArgs>;
 
 const MANDATE_EXAMPLE: MandateType = {
-    amount: '25900', // [Mandatory] for PayTo - Mandate Amount field
+    amount: '100000', // [Mandatory] for PayTo - Mandate Amount field
     amountRule: 'exact', // [Mandatory] for PayTo - Needs to be Localised
     endsAt: '2025-12-31', // [Mandatory] for PayTo - Date format
     frequency: 'monthly', // [Mandatory] for PayTo - Needs to be Localised
@@ -104,7 +105,8 @@ export const PayToAwaitScreen: PayToStory = {
     args: {
         countryCode: 'AU',
         shopperLocale: 'en-US',
-        mandate: MANDATE_EXAMPLE
+        mandate: MANDATE_EXAMPLE,
+        payee: 'Cool Merchant Ltd'
     },
     parameters: {
         msw: {
@@ -119,7 +121,7 @@ export const PayToAwaitScreen: PayToStory = {
             ]
         }
     },
-    render: ({ componentConfiguration, mandate, ...checkoutConfig }) => (
+    render: ({ componentConfiguration, mandate, payee, ...checkoutConfig }) => (
         <Checkout checkoutConfig={checkoutConfig}>
             {checkout => (
                 <ComponentContainer
@@ -127,6 +129,7 @@ export const PayToAwaitScreen: PayToStory = {
                         new PayTo(checkout, {
                             paymentData: 'Ab02b4c0....J86s=',
                             mandate,
+                            payee,
                             ...componentConfiguration
                         })
                     }
diff --git a/packages/server/translations/en-US.json b/packages/server/translations/en-US.json
index 765882fcc7..8a41069f37 100644
--- a/packages/server/translations/en-US.json
+++ b/packages/server/translations/en-US.json
@@ -345,6 +345,7 @@
     "payto.mandate.remarks.label": "Description",
     "payto.mandate.startsAt.label": "Start Date",
     "payto.mandate.endsAt.label": "Ends Date",
+    "payto.mandate.payee.label": "Payee",
     "payto.mandate.amount.max": "Up to %{amount} per transaction",
     "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
     "payto.mandate.frequency.adhoc": "%{count} time(s)",
@@ -355,4 +356,5 @@
     "payto.mandate.frequency.quarterly": "%{count} payment(s) Quarterly",
     "payto.mandate.frequency.halfYearly": "%{count} payment(s) Bi-Annual",
     "payto.mandate.frequency.yearly": "%{count} payment(s) Yearly"
+
 }
\ No newline at end of file

From 338d7e516f2f0f70950edd7e401ce18543ce158e Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Thu, 6 Feb 2025 17:30:56 +0100
Subject: [PATCH 08/20] style and labels improvements

---
 packages/lib/src/components/PayTo/PayTo.tsx      |  2 +-
 .../src/components/PayTo/components/BSBInput.tsx |  6 +++---
 .../PayTo/components/IdentifierSelector.tsx      |  2 +-
 .../components/PayTo/components/PayIDInput.scss  |  4 ++++
 .../components/PayTo/components/PayIDInput.tsx   | 16 ++++++++--------
 .../PayTo/components/PayToComponent.tsx          |  2 +-
 packages/server/translations/en-US.json          | 14 ++++++--------
 7 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/packages/lib/src/components/PayTo/PayTo.tsx b/packages/lib/src/components/PayTo/PayTo.tsx
index a3f1d4c8e8..710ec71103 100644
--- a/packages/lib/src/components/PayTo/PayTo.tsx
+++ b/packages/lib/src/components/PayTo/PayTo.tsx
@@ -111,7 +111,7 @@ export class PayToElement extends UIElement<PayToConfiguration> {
                             brandLogo={this.icon}
                             type={this.constructor['type']}
                             messageText={this.props.i18n.get('payto.confirmPayment')}
-                            awaitText={this.props.i18n.get('await.waitForConfirmation')}
+                            awaitText={this.props.i18n.get('payto.await.waitForConfirmation')}
                             showCountdownTimer={config.showCountdownTimer}
                             throttleTime={config.THROTTLE_TIME}
                             throttleInterval={config.THROTTLE_INTERVAL}
diff --git a/packages/lib/src/components/PayTo/components/BSBInput.tsx b/packages/lib/src/components/PayTo/components/BSBInput.tsx
index fc87089e18..d239c1d175 100644
--- a/packages/lib/src/components/PayTo/components/BSBInput.tsx
+++ b/packages/lib/src/components/PayTo/components/BSBInput.tsx
@@ -52,7 +52,7 @@ export default function BSBInput({ setComponentRef, defaultData, placeholders, o
     }, [setComponentRef]);
 
     return (
-        <Fieldset classNameModifiers={['payto__bsb_input']} label={'payto.bsb.header'} description={'payto.bsb.description'}>
+        <Fieldset classNameModifiers={['payto__bsb_input']} label={'BSB'} description={'payto.bsb.description'}>
             <Field
                 label={i18n.get('payto.bsb.label.bankAccountNumber')}
                 classNameModifiers={['col-60', 'bankAccountNumber']}
@@ -71,9 +71,9 @@ export default function BSBInput({ setComponentRef, defaultData, placeholders, o
             </Field>
 
             <Field
-                label={i18n.get('payto.bsb.label.bsb')}
+                label={i18n.get('Bank State Branch')}
                 classNameModifiers={['col-40', 'bsb']}
-                errorMessage={getErrorMessage(i18n, errors.bsb, i18n.get('payto.bsb.label.bsb'))}
+                errorMessage={getErrorMessage(i18n, errors.bsb, i18n.get('Bank State Branch'))}
                 name={'bsb'}
                 i18n={i18n}
             >
diff --git a/packages/lib/src/components/PayTo/components/IdentifierSelector.tsx b/packages/lib/src/components/PayTo/components/IdentifierSelector.tsx
index 5f6e5dbde2..fcddffda3b 100644
--- a/packages/lib/src/components/PayTo/components/IdentifierSelector.tsx
+++ b/packages/lib/src/components/PayTo/components/IdentifierSelector.tsx
@@ -30,7 +30,7 @@ export const PAYID_IDENTIFIER_OPTIONS: PayIdOptionsType = [
     },
     {
         id: PayToIdentifierEnum.abn,
-        nameKey: 'payto.payid.option.abn'
+        nameKey: 'ABN'
     },
     {
         id: PayToIdentifierEnum.orgid,
diff --git a/packages/lib/src/components/PayTo/components/PayIDInput.scss b/packages/lib/src/components/PayTo/components/PayIDInput.scss
index 4fc2bd9c00..e3c6f32857 100644
--- a/packages/lib/src/components/PayTo/components/PayIDInput.scss
+++ b/packages/lib/src/components/PayTo/components/PayIDInput.scss
@@ -9,4 +9,8 @@
       gap: 0 token(spacer-060);
     }
   }
+
+  .adyen-checkout-field--phone-prefix {
+    width: 98px;
+  }
 }
diff --git a/packages/lib/src/components/PayTo/components/PayIDInput.tsx b/packages/lib/src/components/PayTo/components/PayIDInput.tsx
index 61fb7898cc..951246f423 100644
--- a/packages/lib/src/components/PayTo/components/PayIDInput.tsx
+++ b/packages/lib/src/components/PayTo/components/PayIDInput.tsx
@@ -79,9 +79,9 @@ export default function PayIDInput({ setComponentRef, defaultData, placeholders,
     }, [setComponentRef]);
 
     return (
-        <Fieldset classNameModifiers={['payto__payid_input']} label={'payto.payid.header'} description={'payto.payid.description'}>
+        <Fieldset classNameModifiers={['payto__payid_input']} label={'PayID'} description={'payto.payid.description'}>
             <IdentifierSelector
-                classNameModifiers={['col-30']}
+                classNameModifiers={['col-40']}
                 onSelectedIdentifier={handleChangeFor('selectedIdentifier')}
                 selectedIdentifier={data.selectedIdentifier}
             />
@@ -93,7 +93,7 @@ export default function PayIDInput({ setComponentRef, defaultData, placeholders,
             {data.selectedIdentifier === PayToIdentifierEnum.email && (
                 <Field
                     label={i18n.get('shopperEmail')}
-                    classNameModifiers={['col-70', 'email']}
+                    classNameModifiers={['col-60', 'email']}
                     errorMessage={getErrorMessage(i18n, errors.email, i18n.get('shopperEmail'))}
                     dir={'ltr'}
                     name={'email'}
@@ -112,8 +112,8 @@ export default function PayIDInput({ setComponentRef, defaultData, placeholders,
 
             {data.selectedIdentifier === PayToIdentifierEnum.abn && (
                 <Field
-                    label={i18n.get('payto.payid.label.abn')}
-                    classNameModifiers={['col-70', 'abn']}
+                    label={i18n.get('ABN')}
+                    classNameModifiers={['col-60', 'abn']}
                     errorMessage={getErrorMessage(i18n, errors.abn, i18n.get('payto.payid.label.abn'))}
                     name={'ABN'}
                     i18n={i18n}
@@ -132,7 +132,7 @@ export default function PayIDInput({ setComponentRef, defaultData, placeholders,
             {data.selectedIdentifier === PayToIdentifierEnum.orgid && (
                 <Field
                     label={i18n.get('payto.payid.label.orgid')}
-                    classNameModifiers={['col-70', 'orgid']}
+                    classNameModifiers={['col-60', 'orgid']}
                     errorMessage={getErrorMessage(i18n, errors.orgid, i18n.get('payto.payid.label.orgid'))}
                     name={'orgid'}
                     i18n={i18n}
@@ -149,7 +149,7 @@ export default function PayIDInput({ setComponentRef, defaultData, placeholders,
             )}
 
             <Field
-                label={i18n.get('firstName')}
+                label={i18n.get('payto.label.firstName')}
                 classNameModifiers={['col-50', 'firstName']}
                 errorMessage={getErrorMessage(i18n, errors.firstName, i18n.get('firstName'))}
                 name={'firstName'}
@@ -168,7 +168,7 @@ export default function PayIDInput({ setComponentRef, defaultData, placeholders,
             </Field>
 
             <Field
-                label={i18n.get('lastName')}
+                label={i18n.get('payto.label.lastName')}
                 classNameModifiers={['col-50', 'lastName']}
                 errorMessage={getErrorMessage(i18n, errors.lastName, i18n.get('lastName'))}
                 name={'lastName'}
diff --git a/packages/lib/src/components/PayTo/components/PayToComponent.tsx b/packages/lib/src/components/PayTo/components/PayToComponent.tsx
index 703722a63a..c174349ff2 100644
--- a/packages/lib/src/components/PayTo/components/PayToComponent.tsx
+++ b/packages/lib/src/components/PayTo/components/PayToComponent.tsx
@@ -69,7 +69,7 @@ export default function PayToComponent(props) {
                     />
                 )}
 
-                {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}
+                {props.showPayButton && props.payButton({ status, label: i18n.get('continue') })}
             </div>
         </LoadingWrapper>
     );
diff --git a/packages/server/translations/en-US.json b/packages/server/translations/en-US.json
index 8a41069f37..a0dd10e089 100644
--- a/packages/server/translations/en-US.json
+++ b/packages/server/translations/en-US.json
@@ -325,26 +325,22 @@
     "paynow.mobileViewInstruction.step3": "Select the option to scan a QR code.",
     "paynow.mobileViewInstruction.step4": "Choose the option to upload a QR and select the screenshot.",
     "paynow.mobileViewInstruction.step5": "Complete the transaction.",
-    "payto.payid.header": "PayID",
     "payto.payid.description": "Enter the PayID and account details that are connected to your Payto account.",
     "payto.payid.label.identifier": "Identifier",
-    "payto.payid.label.abn": "ABN",
     "payto.payid.label.orgid": "Organization ID",
     "payto.payid.option.phone": "Mobile",
     "payto.payid.option.email": "Email",
-    "payto.payid.option.abn": "ABN",
     "payto.payid.option.orgid": "Organization ID",
     "payto.bsb.header": "BSB",
     "payto.bsb.description" : "Enter the bank account number and the Bank State Branch that is connected to your account to continue",
     "payto.bsb.label.bankAccountNumber": "Bank account number",
-    "payto.bsb.label.bsb": "Bank State Branch",
     "payto.instructions.steps": "Log into your PayTo banking app@Authorize the PayTo agreement@Approve the payment terms@Complete the transaction",
     "payto.confirmPayment": "Thank you for your purchase, complete your payment by following the instructions below.",
     "payto.mandate.amount.label": "Amount",
     "payto.mandate.frequency.label": "Frequency",
     "payto.mandate.remarks.label": "Description",
-    "payto.mandate.startsAt.label": "Start Date",
-    "payto.mandate.endsAt.label": "Ends Date",
+    "payto.mandate.startsAt.label": "First payment date",
+    "payto.mandate.endsAt.label": "End date",
     "payto.mandate.payee.label": "Payee",
     "payto.mandate.amount.max": "Up to %{amount} per transaction",
     "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
@@ -355,6 +351,8 @@
     "payto.mandate.frequency.monthly": "%{count} payment(s) Monthly",
     "payto.mandate.frequency.quarterly": "%{count} payment(s) Quarterly",
     "payto.mandate.frequency.halfYearly": "%{count} payment(s) Bi-Annual",
-    "payto.mandate.frequency.yearly": "%{count} payment(s) Yearly"
-
+    "payto.mandate.frequency.yearly": "%{count} payment(s) Yearly",
+    "payto.label.firstName": "Account holder first name",
+    "payto.label.lastName": "Account holder last name",
+    "payto.await.waitForConfirmation": "Awaiting your approval"
 }
\ No newline at end of file

From 4b57426f47fefa79a2d44d380c0e448c997b63ad Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Wed, 12 Feb 2025 23:54:45 +0100
Subject: [PATCH 09/20] fix mbway and remove dupe code

---
 packages/lib/src/components/MBWay/MBWay.tsx   |  1 +
 .../components/MBWayInput/MBWayInput.tsx      | 10 ++-
 .../MBWay/components/MBWayInput/types.ts      |  3 +-
 .../components/PayTo/components/BSBInput.tsx  | 39 +----------
 .../PayTo/components/PayIDInput.tsx           | 44 +------------
 .../PayTo/components/PayToNameFields.tsx      | 65 +++++++++++++++++++
 .../internal/PhoneInput/PhoneInputForm.tsx    | 11 +++-
 .../components/internal/PhoneInput/types.ts   |  2 +
 8 files changed, 92 insertions(+), 83 deletions(-)
 create mode 100644 packages/lib/src/components/PayTo/components/PayToNameFields.tsx

diff --git a/packages/lib/src/components/MBWay/MBWay.tsx b/packages/lib/src/components/MBWay/MBWay.tsx
index 3575aeea5a..cad60dcb21 100644
--- a/packages/lib/src/components/MBWay/MBWay.tsx
+++ b/packages/lib/src/components/MBWay/MBWay.tsx
@@ -83,6 +83,7 @@ export class MBWayElement extends UIElement<AwaitConfiguration> {
                         this.componentRef = ref;
                     }}
                     {...this.props}
+                    setComponentRef={this.setComponentRef}
                     onChange={this.setState}
                     onSubmit={this.submit}
                     payButton={this.payButton}
diff --git a/packages/lib/src/components/MBWay/components/MBWayInput/MBWayInput.tsx b/packages/lib/src/components/MBWay/components/MBWayInput/MBWayInput.tsx
index 7df30783fa..3b96ff97e2 100644
--- a/packages/lib/src/components/MBWay/components/MBWayInput/MBWayInput.tsx
+++ b/packages/lib/src/components/MBWay/components/MBWayInput/MBWayInput.tsx
@@ -17,7 +17,6 @@ function MBWayInput(props: MBWayInputProps) {
     const [status, setStatus] = useState<string>('ready');
 
     this.setStatus = setStatus;
-    this.showValidation = phoneInputRef?.current?.triggerValidation;
 
     const { loadingStatus: prefixLoadingStatus, phonePrefixes } = usePhonePrefixes({ allowedCountries, loadingContext, handleError: props.onError });
 
@@ -28,7 +27,14 @@ function MBWayInput(props: MBWayInputProps) {
     return (
         <LoadingWrapper status={prefixLoadingStatus}>
             <div className="adyen-checkout__mb-way">
-                <PhoneInputForm {...props} items={phonePrefixes} ref={phoneInputRef} onChange={onChange} data={props.data} />
+                <PhoneInputForm
+                    setComponentRef={props.setComponentRef}
+                    {...props}
+                    items={phonePrefixes}
+                    ref={phoneInputRef}
+                    onChange={onChange}
+                    data={props.data}
+                />
 
                 {props.showPayButton && props.payButton({ status, label: i18n.get('confirmPurchase') })}
             </div>
diff --git a/packages/lib/src/components/MBWay/components/MBWayInput/types.ts b/packages/lib/src/components/MBWay/components/MBWayInput/types.ts
index 704ea04f85..7ccbbbbf9e 100644
--- a/packages/lib/src/components/MBWay/components/MBWayInput/types.ts
+++ b/packages/lib/src/components/MBWay/components/MBWayInput/types.ts
@@ -1,4 +1,4 @@
-import { UIElementProps } from '../../../internal/UIElement/types';
+import { ComponentMethodsRef, UIElementProps } from '../../../internal/UIElement/types';
 
 export interface MBWayInputData {
     telephoneNumber?: string;
@@ -13,6 +13,7 @@ export interface MBWayInputProps extends UIElementProps {
     allowedCountries?: string[];
     requiredFields?: string[];
     phoneNumberKey?: string;
+    setComponentRef: (ref: ComponentMethodsRef) => void;
 }
 
 export interface MBWayDataState {
diff --git a/packages/lib/src/components/PayTo/components/BSBInput.tsx b/packages/lib/src/components/PayTo/components/BSBInput.tsx
index d239c1d175..0070bec8ec 100644
--- a/packages/lib/src/components/PayTo/components/BSBInput.tsx
+++ b/packages/lib/src/components/PayTo/components/BSBInput.tsx
@@ -10,6 +10,7 @@ import { bsbValidationRules } from './validate';
 import './PayIDInput.scss';
 import { phoneFormatters } from '../../internal/PhoneInput/validate';
 import { ComponentMethodsRef } from '../../internal/UIElement/types';
+import PayToNameFields from './PayToNameFields';
 
 export interface BSBFormData {
     bsb: string;
@@ -87,43 +88,7 @@ export default function BSBInput({ setComponentRef, defaultData, placeholders, o
                 />
             </Field>
 
-            <Field
-                label={i18n.get('firstName')}
-                classNameModifiers={['col-50', 'firstName']}
-                errorMessage={getErrorMessage(i18n, errors.firstName, i18n.get('firstName'))}
-                name={'firstName'}
-                i18n={i18n}
-            >
-                <InputText
-                    name={'firstName'}
-                    value={data.firstName}
-                    classNameModifiers={['firstName']}
-                    onInput={handleChangeFor('firstName', 'input')}
-                    onBlur={handleChangeFor('firstName', 'input')}
-                    placeholder={placeholders?.firstName}
-                    spellCheck={false}
-                    required={true}
-                />
-            </Field>
-
-            <Field
-                label={i18n.get('lastName')}
-                classNameModifiers={['col-50', 'lastName']}
-                errorMessage={getErrorMessage(i18n, errors.lastName, i18n.get('lastName'))}
-                name={'lastName'}
-                i18n={i18n}
-            >
-                <InputText
-                    name={'lastName'}
-                    value={data.lastName}
-                    classNameModifiers={['lastName']}
-                    onInput={handleChangeFor('lastName', 'input')}
-                    onBlur={handleChangeFor('lastName', 'blur')}
-                    placeholder={placeholders?.lastName}
-                    spellCheck={false}
-                    required={true}
-                />
-            </Field>
+            <PayToNameFields i18n={i18n} data={data} handleChangeFor={handleChangeFor} errors={errors} placeholders={placeholders} />
         </Fieldset>
     );
 }
diff --git a/packages/lib/src/components/PayTo/components/PayIDInput.tsx b/packages/lib/src/components/PayTo/components/PayIDInput.tsx
index 951246f423..3e785bea10 100644
--- a/packages/lib/src/components/PayTo/components/PayIDInput.tsx
+++ b/packages/lib/src/components/PayTo/components/PayIDInput.tsx
@@ -13,6 +13,7 @@ import { payIdValidationRules } from './validate';
 import './PayIDInput.scss';
 import { phoneFormatters } from '../../internal/PhoneInput/validate';
 import { ComponentMethodsRef } from '../../internal/UIElement/types';
+import PayToNameFields from './PayToNameFields';
 
 export interface PayIdFormData {
     email: string;
@@ -56,9 +57,6 @@ export default function PayIDInput({ setComponentRef, defaultData, placeholders,
     });
     const { handleChangeFor, triggerValidation, data, errors, valid, isValid, setSchema } = form;
 
-    //this.setStatus = setStatus;
-    this.triggerValidation = triggerValidation;
-
     // handle the changes of identifier, each identifier gets its own schema
     useEffect(() => {
         // get the correct schema for each identifier and merge it with the base
@@ -114,7 +112,7 @@ export default function PayIDInput({ setComponentRef, defaultData, placeholders,
                 <Field
                     label={i18n.get('ABN')}
                     classNameModifiers={['col-60', 'abn']}
-                    errorMessage={getErrorMessage(i18n, errors.abn, i18n.get('payto.payid.label.abn'))}
+                    errorMessage={getErrorMessage(i18n, errors.abn, i18n.get('ABN'))}
                     name={'ABN'}
                     i18n={i18n}
                 >
@@ -148,43 +146,7 @@ export default function PayIDInput({ setComponentRef, defaultData, placeholders,
                 </Field>
             )}
 
-            <Field
-                label={i18n.get('payto.label.firstName')}
-                classNameModifiers={['col-50', 'firstName']}
-                errorMessage={getErrorMessage(i18n, errors.firstName, i18n.get('firstName'))}
-                name={'firstName'}
-                i18n={i18n}
-            >
-                <InputText
-                    name={'firstName'}
-                    value={data.firstName}
-                    classNameModifiers={['firstName']}
-                    onInput={handleChangeFor('firstName', 'input')}
-                    onBlur={handleChangeFor('firstName', 'input')}
-                    placeholder={placeholders?.firstName}
-                    spellCheck={false}
-                    required={true}
-                />
-            </Field>
-
-            <Field
-                label={i18n.get('payto.label.lastName')}
-                classNameModifiers={['col-50', 'lastName']}
-                errorMessage={getErrorMessage(i18n, errors.lastName, i18n.get('lastName'))}
-                name={'lastName'}
-                i18n={i18n}
-            >
-                <InputText
-                    name={'lastName'}
-                    value={data.lastName}
-                    classNameModifiers={['lastName']}
-                    onInput={handleChangeFor('lastName', 'input')}
-                    onBlur={handleChangeFor('lastName', 'blur')}
-                    placeholder={placeholders?.lastName}
-                    spellCheck={false}
-                    required={true}
-                />
-            </Field>
+            <PayToNameFields i18n={i18n} data={data} handleChangeFor={handleChangeFor} errors={errors} placeholders={placeholders} />
         </Fieldset>
     );
 }
diff --git a/packages/lib/src/components/PayTo/components/PayToNameFields.tsx b/packages/lib/src/components/PayTo/components/PayToNameFields.tsx
new file mode 100644
index 0000000000..130af18bf7
--- /dev/null
+++ b/packages/lib/src/components/PayTo/components/PayToNameFields.tsx
@@ -0,0 +1,65 @@
+import { h, Fragment } from 'preact';
+import Field from '../../internal/FormFields/Field';
+import { getErrorMessage } from '../../../utils/getErrorMessage';
+import InputText from '../../internal/FormFields/InputText';
+import Language from '../../../language';
+import { HandleChangeForModeType } from '../../../utils/useForm/types';
+
+export interface PayToNameFieldsProps {
+    i18n: Language;
+    errors: {
+        [key: string]: any;
+    };
+    data: {
+        firstName: string;
+        lastName: string;
+    };
+    handleChangeFor: (key: string, mode?: HandleChangeForModeType) => (e: any) => void;
+    placeholders: {
+        firstName: string;
+        lastName: string;
+    };
+}
+
+export default function PayToNameFields({ i18n, errors, data, handleChangeFor, placeholders }: PayToNameFieldsProps) {
+    return (
+        <Fragment>
+            <Field
+                label={i18n.get('payto.label.firstName')}
+                classNameModifiers={['col-50', 'firstName']}
+                errorMessage={getErrorMessage(i18n, errors.firstName, i18n.get('firstName'))}
+                name={'firstName'}
+                i18n={i18n}
+            >
+                <InputText
+                    name={'firstName'}
+                    value={data.firstName}
+                    classNameModifiers={['firstName']}
+                    onInput={handleChangeFor('firstName', 'input')}
+                    onBlur={handleChangeFor('firstName', 'input')}
+                    placeholder={placeholders?.firstName}
+                    spellCheck={false}
+                    required={true}
+                />
+            </Field>
+            <Field
+                label={i18n.get('payto.label.lastName')}
+                classNameModifiers={['col-50', 'lastName']}
+                errorMessage={getErrorMessage(i18n, errors.lastName, i18n.get('lastName'))}
+                name={'lastName'}
+                i18n={i18n}
+            >
+                <InputText
+                    name={'lastName'}
+                    value={data.lastName}
+                    classNameModifiers={['lastName']}
+                    onInput={handleChangeFor('lastName', 'input')}
+                    onBlur={handleChangeFor('lastName', 'blur')}
+                    placeholder={placeholders?.lastName}
+                    spellCheck={false}
+                    required={true}
+                />
+            </Field>
+        </Fragment>
+    );
+}
diff --git a/packages/lib/src/components/internal/PhoneInput/PhoneInputForm.tsx b/packages/lib/src/components/internal/PhoneInput/PhoneInputForm.tsx
index 9e95dda7cc..abbe4ecfbe 100644
--- a/packages/lib/src/components/internal/PhoneInput/PhoneInputForm.tsx
+++ b/packages/lib/src/components/internal/PhoneInput/PhoneInputForm.tsx
@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { useEffect, useCallback } from 'preact/hooks';
+import { useEffect, useCallback, useRef } from 'preact/hooks';
 import useForm from '../../../utils/useForm';
 import { useCoreContext } from '../../../core/Context/CoreProvider';
 import './PhoneInput.scss';
@@ -7,6 +7,7 @@ import { phoneFormatters, phoneValidationRules } from './validate';
 import { PhoneInputFormProps, PhoneInputSchema } from './types';
 import Fieldset from '../FormFields/Fieldset';
 import PhoneInputFields from './PhoneInputFields';
+import { ComponentMethodsRef } from '../UIElement/types';
 
 /**
  *
@@ -39,7 +40,13 @@ function PhoneInputForm(props: PhoneInputFormProps) {
         props.onChange({ data, valid, errors, isValid });
     }, [data, valid, errors, isValid]);
 
-    this.showValidation = triggerValidation;
+    const componentRef = useRef<ComponentMethodsRef>({
+        showValidation: triggerValidation
+    });
+
+    useEffect(() => {
+        props.setComponentRef(componentRef.current);
+    }, [props.setComponentRef]);
 
     // This is here for MBWay, prob should be moved up
     // MBWay has a weird way of loading its error messages
diff --git a/packages/lib/src/components/internal/PhoneInput/types.ts b/packages/lib/src/components/internal/PhoneInput/types.ts
index 57ed4ff2cd..9617cbeb86 100644
--- a/packages/lib/src/components/internal/PhoneInput/types.ts
+++ b/packages/lib/src/components/internal/PhoneInput/types.ts
@@ -1,4 +1,5 @@
 import { DataSet, DataSetItem } from '../../../core/Services/data-set';
+import { ComponentMethodsRef } from '../UIElement/types';
 
 export interface PhoneInputSchema {
     phoneNumber?: string;
@@ -15,6 +16,7 @@ export interface PhoneInputFormProps {
     phoneNumberErrorKey?: string;
     placeholders?: PhoneInputSchema;
     ref?;
+    setComponentRef: (ref: ComponentMethodsRef) => void;
 }
 
 export interface PhonePrefixes {

From 1284df9b59b4539ba162e3397266fc0a873b8487 Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Thu, 13 Feb 2025 00:33:54 +0100
Subject: [PATCH 10/20] code review fixes

---
 .../Ach/components/AchInput/AchInput.tsx      |  2 -
 .../lib/src/components/PayTo/PayTo.test.ts    |  8 ++-
 packages/lib/src/components/PayTo/PayTo.tsx   | 10 +---
 .../components/PayTo/components/BSBInput.tsx  |  3 +-
 .../PayTo/components/IdentifierSelector.tsx   |  3 --
 .../PayTo/components/MandateSummary.tsx       |  1 -
 .../PayTo/components/PayIDInput.tsx           |  7 ++-
 packages/lib/src/components/PayTo/types.ts    |  4 +-
 .../PhoneInput/PhoneInputForm.test.tsx        |  1 +
 .../stories/components/PayTo.stories.tsx      | 54 +------------------
 10 files changed, 18 insertions(+), 75 deletions(-)

diff --git a/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx b/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx
index cdf6cfaeb3..8454915d85 100644
--- a/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx
+++ b/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx
@@ -128,8 +128,6 @@ function AchInput(props: ACHInputProps) {
         props.onChange({ data, isValid, storePaymentMethod });
     }, [data, valid, errors, storePaymentMethod]);
 
-    console.log('ach props 2', props);
-
     return (
         <div className="adyen-checkout__ach">
             <FormInstruction />
diff --git a/packages/lib/src/components/PayTo/PayTo.test.ts b/packages/lib/src/components/PayTo/PayTo.test.ts
index 1d9d8c2e20..2c9ec92e46 100644
--- a/packages/lib/src/components/PayTo/PayTo.test.ts
+++ b/packages/lib/src/components/PayTo/PayTo.test.ts
@@ -58,11 +58,15 @@ describe('PayTo', () => {
         });
 
         render(payTo.render());
-        const button = await screen.findByRole('button', { name: 'Confirm purchase' });
+        const button = await screen.findByRole('button', { name: 'Continue' });
 
-        // check if button actually triggers submit
+        // should not trigger the submit and render validation
         await user.click(button);
         expect(onSubmitMock).toHaveBeenCalledTimes(0);
+
+        expect(await screen.findByText('Invalid mobile number')).toBeTruthy();
+        expect(await screen.findByText('Enter your first name')).toBeTruthy();
+        expect(await screen.findByText('Enter your last name')).toBeTruthy();
     });
 
     test('should change to different identifier when selected', async () => {
diff --git a/packages/lib/src/components/PayTo/PayTo.tsx b/packages/lib/src/components/PayTo/PayTo.tsx
index 710ec71103..0617ffca4a 100644
--- a/packages/lib/src/components/PayTo/PayTo.tsx
+++ b/packages/lib/src/components/PayTo/PayTo.tsx
@@ -3,10 +3,6 @@ import UIElement from '../internal/UIElement/UIElement';
 import { CoreProvider } from '../../core/Context/CoreProvider';
 import Await from '../../components/internal/Await';
 import SRPanelProvider from '../../core/Errors/SRPanelProvider';
-
-/*
-Types (previously in their own file)
- */
 import { TxVariants } from '../tx-variants';
 import { PayToIdentifierEnum } from './components/IdentifierSelector';
 import PayToComponent from './components/PayToComponent';
@@ -62,7 +58,7 @@ export class PayToElement extends UIElement<PayToConfiguration> {
             ...props,
             data: {
                 ...props.data,
-                phonePrefix: props.data?.phonePrefix || '+61' // use AUS as default value
+                phonePrefix: '+61' // hardcode +61
             }
         };
     }
@@ -88,10 +84,6 @@ export class PayToElement extends UIElement<PayToConfiguration> {
         return !!this.state.isValid;
     }
 
-    get displayName(): string {
-        return this.props.name;
-    }
-
     render() {
         if (this.props.paymentData) {
             return (
diff --git a/packages/lib/src/components/PayTo/components/BSBInput.tsx b/packages/lib/src/components/PayTo/components/BSBInput.tsx
index 0070bec8ec..a3345d925d 100644
--- a/packages/lib/src/components/PayTo/components/BSBInput.tsx
+++ b/packages/lib/src/components/PayTo/components/BSBInput.tsx
@@ -11,6 +11,7 @@ import './PayIDInput.scss';
 import { phoneFormatters } from '../../internal/PhoneInput/validate';
 import { ComponentMethodsRef } from '../../internal/UIElement/types';
 import PayToNameFields from './PayToNameFields';
+import { PayToPlaceholdersType } from '../types';
 
 export interface BSBFormData {
     bsb: string;
@@ -21,7 +22,7 @@ export interface BSBFormData {
 
 export interface BSBInputProps {
     defaultData: BSBFormData;
-    placeholders: any; //TODO
+    placeholders: PayToPlaceholdersType;
     onChange: (e) => void;
     setComponentRef: (ref: ComponentMethodsRef) => void;
 }
diff --git a/packages/lib/src/components/PayTo/components/IdentifierSelector.tsx b/packages/lib/src/components/PayTo/components/IdentifierSelector.tsx
index fcddffda3b..efa14192fa 100644
--- a/packages/lib/src/components/PayTo/components/IdentifierSelector.tsx
+++ b/packages/lib/src/components/PayTo/components/IdentifierSelector.tsx
@@ -55,10 +55,7 @@ export default function IdentifierSelector({ selectedIdentifier, onSelectedIdent
 
     const hydratedOptions = loadI18nForOptions(i18n, PAYID_IDENTIFIER_OPTIONS);
 
-    // TODO this probably can by a bit tidier, clean up some of these types
-    //   maybe make Select type generic
     const onChange = (e: { target: SelectTargetObject }) => {
-        // TODO clean this
         const valueStr = e.target.value + '';
 
         if (payToIdentifierEnumCheck(valueStr)) {
diff --git a/packages/lib/src/components/PayTo/components/MandateSummary.tsx b/packages/lib/src/components/PayTo/components/MandateSummary.tsx
index b7278dc3e3..f4774628a0 100644
--- a/packages/lib/src/components/PayTo/components/MandateSummary.tsx
+++ b/packages/lib/src/components/PayTo/components/MandateSummary.tsx
@@ -51,7 +51,6 @@ export default function MandateSummary({ mandate, currencyCode, payee }: Mandate
                     };
                 }
             }
-            // TODO test this for XSS
             case 'remarks':
                 return {
                     label: labelText,
diff --git a/packages/lib/src/components/PayTo/components/PayIDInput.tsx b/packages/lib/src/components/PayTo/components/PayIDInput.tsx
index 3e785bea10..f901b56c52 100644
--- a/packages/lib/src/components/PayTo/components/PayIDInput.tsx
+++ b/packages/lib/src/components/PayTo/components/PayIDInput.tsx
@@ -14,6 +14,7 @@ import './PayIDInput.scss';
 import { phoneFormatters } from '../../internal/PhoneInput/validate';
 import { ComponentMethodsRef } from '../../internal/UIElement/types';
 import PayToNameFields from './PayToNameFields';
+import { PayToPlaceholdersType } from '../types';
 
 export interface PayIdFormData {
     email: string;
@@ -29,7 +30,7 @@ export interface PayIdFormData {
 
 export interface PayIDInputProps {
     defaultData: PayIdFormData;
-    placeholders: any; //TODO
+    placeholders: PayToPlaceholdersType;
     onError: () => {};
     onChange: (e) => void;
     setComponentRef: (ref: ComponentMethodsRef) => void;
@@ -44,8 +45,6 @@ const IDENTIFIER_SCHEMA = {
     [PayToIdentifierEnum.orgid]: ['orgid']
 };
 
-export interface KlarnaComponentRef extends ComponentMethodsRef {}
-
 export default function PayIDInput({ setComponentRef, defaultData, placeholders, onError, onChange }: PayIDInputProps) {
     const { i18n } = useCoreContext();
 
@@ -102,7 +101,7 @@ export default function PayIDInput({ setComponentRef, defaultData, placeholders,
                         value={data.email}
                         onInput={handleChangeFor('email', 'input')}
                         onBlur={handleChangeFor('email', 'blur')}
-                        placeholder={placeholders?.shopperEmail}
+                        placeholder={placeholders?.email}
                         required={true}
                     />
                 </Field>
diff --git a/packages/lib/src/components/PayTo/types.ts b/packages/lib/src/components/PayTo/types.ts
index 2454067957..2780e0783f 100644
--- a/packages/lib/src/components/PayTo/types.ts
+++ b/packages/lib/src/components/PayTo/types.ts
@@ -15,10 +15,12 @@ export interface MandateType {
     count?: string;
 }
 
+export type PayToPlaceholdersType = { [K in keyof PayToData]: string };
+
 export interface PayToConfiguration extends UIElementProps {
     paymentData?: any;
     data?: PayToData;
-    placeholders?: any; //TODO
+    placeholders?: PayToPlaceholdersType;
     mandate: MandateType;
     payee?: string;
 }
diff --git a/packages/lib/src/components/internal/PhoneInput/PhoneInputForm.test.tsx b/packages/lib/src/components/internal/PhoneInput/PhoneInputForm.test.tsx
index e1a695ea26..0884f19a86 100644
--- a/packages/lib/src/components/internal/PhoneInput/PhoneInputForm.test.tsx
+++ b/packages/lib/src/components/internal/PhoneInput/PhoneInputForm.test.tsx
@@ -9,6 +9,7 @@ const items = [{ id: '+44', name: 'United Kingdom', code: 'GB', selectedOptionNa
 
 describe('PhoneInput', () => {
     const defaultProps: PhoneInputFormProps = {
+        setComponentRef: () => {},
         items,
         data: { phonePrefix: items[0].id },
         onChange: jest.fn(),
diff --git a/packages/lib/storybook/stories/components/PayTo.stories.tsx b/packages/lib/storybook/stories/components/PayTo.stories.tsx
index 4320769c39..87e70e6472 100644
--- a/packages/lib/storybook/stories/components/PayTo.stories.tsx
+++ b/packages/lib/storybook/stories/components/PayTo.stories.tsx
@@ -27,35 +27,6 @@ const meta: Meta<PaymentMethodStoryProps<PayToStory>> = {
     title: 'Components/PayTo'
 };
 
-// const payToPaymentObject = {
-//     amount: {
-//         currency: 'AUD', // [Mandatory] only supported value: "AUD"
-//         value: 4200 // [Mandatory] { int: 1 to 1000000000 }
-//     },
-//     paymentMethod: {
-//         type: 'payto', // [Mandatory]
-//         shopperAccountIdentifier: '123456-98765432' // [Mandatory]
-//     },
-//     countryCode: 'AU', // [Mandatory]
-//     merchantAccount: 'YOUR_MERCHANT_ACCOUNT', // [Mandatory]
-//     reference: 'YOUR_ORDER_NUMBER', // [Mandatory]
-//     mandate: {
-//         amount: '42000', // [Mandatory] { int: 1 to 1000000000 }
-//         amountRule: 'exact', // [Mandatory]
-//         frequency: 'monthly', // [Mandatory] need to update docs to add "adhoc"
-//         startsAt: '2024-10-01', // [Optional]
-//         endsAt: '2027-10-01', // [Mandatory]
-//         remarks: 'Remark on mandate', // [Mandatory]
-//         count: '1' // [Conditional] new field
-//     },
-//     shopperName: { firstName: 'John', lastName: 'Doe' }, // [Mandatory]
-//     shopperEmail: 's.hopper@example.com', // [Mandatory]
-//     storePaymentMethod: true, // [Mandatory]
-//     shopperInteraction: 'Ecommerce', // [Mandatory]
-//     recurringProcessingModel: 'Subscription', // [Mandatory]
-//     shopperReference: 'YOUR_SHOPPER_REFERENCE' // [Mandatory]
-// };
-
 export const Default: PayToStory = {
     render: ({ componentConfiguration, mandate, ...checkoutConfig }) => (
         <Checkout checkoutConfig={checkoutConfig}>
@@ -77,29 +48,6 @@ export const Default: PayToStory = {
         mandate: MANDATE_EXAMPLE
     }
 };
-export default meta;
-
-// const paymentResponse = {
-//     resultCode: 'Pending',
-//     action: {
-//         paymentData: 'Ab02b4c0....J86s=',
-//         paymentMethodType: 'payto',
-//         expiresAt: '2024-11-13T00:01:37Z',
-//         mandate: {
-//             amount: '4001', // [Mandatory] for PayTo - Mandate Amount field
-//             amountRule: 'exact', // [Mandatory] for PayTo - Needs to be Localised
-//             endsAt: '2024-12-31', // [Mandatory] for PayTo - Date format
-//             frequency: 'adhoc', // [Mandatory] for PayTo - Needs to be Localised
-//             remarks: 'testThroughFlow1', // [Mandatory] for PayTo - Needs to be Localised as "Description"
-//             count: '3', // [Optional] will be returned only if the merchant sends it
-//             startsAt: '2024-11-13' // [Optional] will be returned only if the merchant sends it
-//         },
-//         name: 'John Smitty', // Echo back the field passed in the request
-//         shopperAccountIdentifier: 'test_again@test.com', // Echo back the field passed in the request
-//         payee: '[MERCHANT_NAME]', // Merchant name displayed in the agreement
-//         type: 'await'
-//     }
-// };
 
 export const PayToAwaitScreen: PayToStory = {
     args: {
@@ -138,3 +86,5 @@ export const PayToAwaitScreen: PayToStory = {
         </Checkout>
     )
 };
+
+export default meta;

From cbd7c36139222dc768b777a56127f04cf635cc0c Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Thu, 13 Feb 2025 12:31:50 +0100
Subject: [PATCH 11/20] fix status

---
 .../lib/src/components/PayTo/components/BSBInput.tsx     | 7 +++++--
 .../lib/src/components/PayTo/components/PayIDInput.tsx   | 7 +++++--
 .../src/components/PayTo/components/PayToComponent.tsx   | 9 ++++++---
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/lib/src/components/PayTo/components/BSBInput.tsx b/packages/lib/src/components/PayTo/components/BSBInput.tsx
index a3345d925d..5bfd5fa021 100644
--- a/packages/lib/src/components/PayTo/components/BSBInput.tsx
+++ b/packages/lib/src/components/PayTo/components/BSBInput.tsx
@@ -9,7 +9,7 @@ import InputText from '../../internal/FormFields/InputText';
 import { bsbValidationRules } from './validate';
 import './PayIDInput.scss';
 import { phoneFormatters } from '../../internal/PhoneInput/validate';
-import { ComponentMethodsRef } from '../../internal/UIElement/types';
+import { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';
 import PayToNameFields from './PayToNameFields';
 import { PayToPlaceholdersType } from '../types';
 
@@ -21,6 +21,8 @@ export interface BSBFormData {
 }
 
 export interface BSBInputProps {
+    status: UIElementStatus;
+    setStatus: (status: UIElementStatus) => void;
     defaultData: BSBFormData;
     placeholders: PayToPlaceholdersType;
     onChange: (e) => void;
@@ -29,7 +31,7 @@ export interface BSBInputProps {
 
 const BASE_SCHEMA = ['bankAccountNumber', 'bsb', 'firstName', 'lastName'];
 
-export default function BSBInput({ setComponentRef, defaultData, placeholders, onChange }: BSBInputProps) {
+export default function BSBInput({ setComponentRef, defaultData, placeholders, onChange, setStatus }: BSBInputProps) {
     const { i18n } = useCoreContext();
 
     const form = useForm<BSBFormData>({
@@ -46,6 +48,7 @@ export default function BSBInput({ setComponentRef, defaultData, placeholders, o
     }, [data, valid, errors, isValid]);
 
     const payToRef = useRef<ComponentMethodsRef>({
+        setStatus: setStatus,
         showValidation: triggerValidation
     });
 
diff --git a/packages/lib/src/components/PayTo/components/PayIDInput.tsx b/packages/lib/src/components/PayTo/components/PayIDInput.tsx
index f901b56c52..ed3b97f622 100644
--- a/packages/lib/src/components/PayTo/components/PayIDInput.tsx
+++ b/packages/lib/src/components/PayTo/components/PayIDInput.tsx
@@ -12,7 +12,7 @@ import InputText from '../../internal/FormFields/InputText';
 import { payIdValidationRules } from './validate';
 import './PayIDInput.scss';
 import { phoneFormatters } from '../../internal/PhoneInput/validate';
-import { ComponentMethodsRef } from '../../internal/UIElement/types';
+import { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';
 import PayToNameFields from './PayToNameFields';
 import { PayToPlaceholdersType } from '../types';
 
@@ -29,6 +29,8 @@ export interface PayIdFormData {
 }
 
 export interface PayIDInputProps {
+    status: UIElementStatus;
+    setStatus: (status: UIElementStatus) => void;
     defaultData: PayIdFormData;
     placeholders: PayToPlaceholdersType;
     onError: () => {};
@@ -45,7 +47,7 @@ const IDENTIFIER_SCHEMA = {
     [PayToIdentifierEnum.orgid]: ['orgid']
 };
 
-export default function PayIDInput({ setComponentRef, defaultData, placeholders, onError, onChange }: PayIDInputProps) {
+export default function PayIDInput({ setComponentRef, defaultData, placeholders, onError, onChange, setStatus }: PayIDInputProps) {
     const { i18n } = useCoreContext();
 
     const form = useForm<PayIdFormData>({
@@ -68,6 +70,7 @@ export default function PayIDInput({ setComponentRef, defaultData, placeholders,
     }, [data, valid, errors, isValid]);
 
     const payToRef = useRef<ComponentMethodsRef>({
+        setStatus: setStatus,
         showValidation: triggerValidation
     });
 
diff --git a/packages/lib/src/components/PayTo/components/PayToComponent.tsx b/packages/lib/src/components/PayTo/components/PayToComponent.tsx
index c174349ff2..44f0ec7b0a 100644
--- a/packages/lib/src/components/PayTo/components/PayToComponent.tsx
+++ b/packages/lib/src/components/PayTo/components/PayToComponent.tsx
@@ -6,6 +6,7 @@ import { SegmentedControlOptions } from '../../internal/SegmentedControl/Segment
 import PayIDInput from './PayIDInput';
 import BSBInput from './BSBInput';
 import { useCoreContext } from '../../../core/Context/CoreProvider';
+import { UIElementStatus } from '../../internal/UIElement/types';
 
 export type PayToInputOption = 'payid-option' | 'bsb-option';
 
@@ -35,9 +36,7 @@ const inputOptions: SegmentedControlOptions<PayToInputOption> = [
 export default function PayToComponent(props) {
     const { i18n } = useCoreContext();
 
-    const [status, setStatus] = useState<string>('ready');
-
-    this.setStatus = setStatus;
+    const [status, setStatus] = useState<UIElementStatus>('ready');
 
     const defaultOption = inputOptions[0].value;
     const [selectedInput, setSelectedInput] = useState<PayToInputOption>(defaultOption);
@@ -53,6 +52,8 @@ export default function PayToComponent(props) {
                 <SegmentedControl selectedValue={selectedInput} options={inputOptions} onChange={setSelectedInput} />
                 {selectedInput === 'payid-option' && (
                     <PayIDInput
+                        status={status}
+                        setStatus={setStatus}
                         setComponentRef={props.setComponentRef}
                         onChange={onChange}
                         defaultData={props.data}
@@ -62,6 +63,8 @@ export default function PayToComponent(props) {
                 )}
                 {selectedInput === 'bsb-option' && (
                     <BSBInput
+                        status={status}
+                        setStatus={setStatus}
                         setComponentRef={props.setComponentRef}
                         onChange={onChange}
                         defaultData={props.data}

From 8d4a5e56c589f255f28acc4f222a1e4a283ab8cc Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Thu, 13 Feb 2025 12:48:35 +0100
Subject: [PATCH 12/20] fix this

---
 .../src/components/internal/PhoneInput/PhoneInputFields.tsx   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/lib/src/components/internal/PhoneInput/PhoneInputFields.tsx b/packages/lib/src/components/internal/PhoneInput/PhoneInputFields.tsx
index 8e79a38eb8..80842e60fc 100644
--- a/packages/lib/src/components/internal/PhoneInput/PhoneInputFields.tsx
+++ b/packages/lib/src/components/internal/PhoneInput/PhoneInputFields.tsx
@@ -33,7 +33,7 @@ export interface PhoneInputFieldProps {
 export default function PhoneInputFields({ getError, showNumber, showPrefix, form, canSelectPrefix = true, ...props }: PhoneInputFieldProps) {
     const { i18n } = useCoreContext();
 
-    const { handleChangeFor, data, valid, triggerValidation } = form;
+    const { handleChangeFor, data, valid } = form;
 
     // Force re-validation of the phoneNumber when data.phonePrefix changes (since the validation rules will also change)
     useEffect((): void => {
@@ -42,8 +42,6 @@ export default function PhoneInputFields({ getError, showNumber, showPrefix, for
         }
     }, [data.phonePrefix]);
 
-    this.triggerValidation = triggerValidation;
-
     return (
         <Fragment>
             {showPrefix && (

From 330176384e1abe420ada3fdaabe99ac3e07ac72e Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Thu, 13 Feb 2025 13:30:37 +0100
Subject: [PATCH 13/20] sonar cloud improvements

---
 packages/lib/src/components/PayTo/PayTo.tsx                   | 2 +-
 packages/lib/src/components/PayTo/components/PayToPhone.tsx   | 1 -
 packages/lib/src/components/PayTo/components/validate.ts      | 3 ++-
 packages/lib/src/components/internal/Await/Await.tsx          | 2 +-
 .../lib/src/components/internal/DetailsTable/DetailsTable.tsx | 4 ++--
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/lib/src/components/PayTo/PayTo.tsx b/packages/lib/src/components/PayTo/PayTo.tsx
index 0617ffca4a..f237dd1c06 100644
--- a/packages/lib/src/components/PayTo/PayTo.tsx
+++ b/packages/lib/src/components/PayTo/PayTo.tsx
@@ -47,7 +47,7 @@ const getAccountIdentifier = (state: PayToData) => {
  *
  */
 export class PayToElement extends UIElement<PayToConfiguration> {
-    public static type = TxVariants.payto;
+    public static readonly type = TxVariants.payto;
 
     protected static defaultProps = {
         placeholders: {}
diff --git a/packages/lib/src/components/PayTo/components/PayToPhone.tsx b/packages/lib/src/components/PayTo/components/PayToPhone.tsx
index e5decb6efc..4c0ba43890 100644
--- a/packages/lib/src/components/PayTo/components/PayToPhone.tsx
+++ b/packages/lib/src/components/PayTo/components/PayToPhone.tsx
@@ -9,7 +9,6 @@ import { useCallback } from 'preact/hooks';
 interface PayToPhoneProps {
     form: Form<PayIdFormData>;
     onChange: (value: string) => void;
-    onError: (error: Error) => void;
     data: any; // Data
 }
 
diff --git a/packages/lib/src/components/PayTo/components/validate.ts b/packages/lib/src/components/PayTo/components/validate.ts
index 8a73a358dc..66336ad717 100644
--- a/packages/lib/src/components/PayTo/components/validate.ts
+++ b/packages/lib/src/components/PayTo/components/validate.ts
@@ -13,7 +13,8 @@ const emailRegex =
 const phoneNumberRegex = /^[1-9]{1,1}[0-9]{1,29}$/;
 
 export const validationFromRegex = (value: string, regex: RegExp, validationRule: ValidatorRule): boolean | null => {
-    // TODO investigate why null is the return value for 'empty' validation
+    // null is returned here for legacy reasons
+    // check comment on hasError() ValidatorRulesResult.ts:17
     if (isEmpty(value)) {
         validationRule.errorMessage = ERROR_FIELD_REQUIRED;
         return null;
diff --git a/packages/lib/src/components/internal/Await/Await.tsx b/packages/lib/src/components/internal/Await/Await.tsx
index 53cc2b41b1..558882494c 100644
--- a/packages/lib/src/components/internal/Await/Await.tsx
+++ b/packages/lib/src/components/internal/Await/Await.tsx
@@ -194,7 +194,7 @@ function Await(props: AwaitComponentProps) {
 
             {/* Everything is wrapped in !! so we evaluate the result as boolean,
              otherwise we might just print the value or object as mistake */}
-            {!!(props.showAmount && amount && amount.value && amount.currency) && (
+            {!!(props.showAmount && amount?.value && amount?.currency) && (
                 <div className="adyen-checkout__await__amount">{i18n.amount(amount.value, amount.currency)}</div>
             )}
 
diff --git a/packages/lib/src/components/internal/DetailsTable/DetailsTable.tsx b/packages/lib/src/components/internal/DetailsTable/DetailsTable.tsx
index 90202fab70..df57a79cb2 100644
--- a/packages/lib/src/components/internal/DetailsTable/DetailsTable.tsx
+++ b/packages/lib/src/components/internal/DetailsTable/DetailsTable.tsx
@@ -22,8 +22,8 @@ export default function DetailsTable({ tableFields }: DetailsTableProps) {
                 .filter(item => !!item)
                 // or objects without label and value
                 .filter(({ label, value }) => !!label && !!value)
-                .map(({ label, value }, index) => (
-                    <div key={index} className="adyen-checkout__voucher-result__details__item adyen-checkout__details-table__item">
+                .map(({ label, value }) => (
+                    <div key={`${label + value}`} className="adyen-checkout__voucher-result__details__item adyen-checkout__details-table__item">
                         <dt className="adyen-checkout__voucher-result__details__label adyen-checkout__details-table__label">{label}</dt>
                         <dd className="adyen-checkout__voucher-result__details__value adyen-checkout__details-table__value">{value}</dd>
                     </div>

From 35bb73dbcfd6efc432ea19746f538bafab372711 Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Thu, 13 Feb 2025 14:29:10 +0100
Subject: [PATCH 14/20] fix build and types

---
 packages/lib/src/components/PayTo/PayTo.tsx      |  1 -
 .../components/PayTo/components/PayIDInput.tsx   |  5 ++---
 .../PayTo/components/PayToComponent.tsx          | 16 +++++++++++++---
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/lib/src/components/PayTo/PayTo.tsx b/packages/lib/src/components/PayTo/PayTo.tsx
index f237dd1c06..3a3eda5440 100644
--- a/packages/lib/src/components/PayTo/PayTo.tsx
+++ b/packages/lib/src/components/PayTo/PayTo.tsx
@@ -123,7 +123,6 @@ export class PayToElement extends UIElement<PayToConfiguration> {
                     data={this.props.data}
                     placeholders={this.props.placeholders}
                     setComponentRef={this.setComponentRef}
-                    onSubmit={this.submit}
                     onChange={this.setState}
                     payButton={this.payButton}
                     showPayButton={this.props.showPayButton}
diff --git a/packages/lib/src/components/PayTo/components/PayIDInput.tsx b/packages/lib/src/components/PayTo/components/PayIDInput.tsx
index ed3b97f622..8b7e8b3677 100644
--- a/packages/lib/src/components/PayTo/components/PayIDInput.tsx
+++ b/packages/lib/src/components/PayTo/components/PayIDInput.tsx
@@ -33,7 +33,6 @@ export interface PayIDInputProps {
     setStatus: (status: UIElementStatus) => void;
     defaultData: PayIdFormData;
     placeholders: PayToPlaceholdersType;
-    onError: () => {};
     onChange: (e) => void;
     setComponentRef: (ref: ComponentMethodsRef) => void;
 }
@@ -47,7 +46,7 @@ const IDENTIFIER_SCHEMA = {
     [PayToIdentifierEnum.orgid]: ['orgid']
 };
 
-export default function PayIDInput({ setComponentRef, defaultData, placeholders, onError, onChange, setStatus }: PayIDInputProps) {
+export default function PayIDInput({ setComponentRef, defaultData, placeholders, onChange, setStatus }: PayIDInputProps) {
     const { i18n } = useCoreContext();
 
     const form = useForm<PayIdFormData>({
@@ -86,7 +85,7 @@ export default function PayIDInput({ setComponentRef, defaultData, placeholders,
                 selectedIdentifier={data.selectedIdentifier}
             />
             {data.selectedIdentifier === PayToIdentifierEnum.phone && (
-                <PayToPhone onChange={handleChangeFor('phone', 'blur')} onError={onError} data={data} form={form} />
+                <PayToPhone onChange={handleChangeFor('phone', 'blur')} data={data} form={form} />
             )}
 
             {/* TODO probably worth refactoring this into  either re-usable components or builder */}
diff --git a/packages/lib/src/components/PayTo/components/PayToComponent.tsx b/packages/lib/src/components/PayTo/components/PayToComponent.tsx
index 44f0ec7b0a..8f3c89b306 100644
--- a/packages/lib/src/components/PayTo/components/PayToComponent.tsx
+++ b/packages/lib/src/components/PayTo/components/PayToComponent.tsx
@@ -6,7 +6,9 @@ import { SegmentedControlOptions } from '../../internal/SegmentedControl/Segment
 import PayIDInput from './PayIDInput';
 import BSBInput from './BSBInput';
 import { useCoreContext } from '../../../core/Context/CoreProvider';
-import { UIElementStatus } from '../../internal/UIElement/types';
+import { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';
+import { PayToData, PayToPlaceholdersType } from '../types';
+import { PayButtonProps } from '../../internal/PayButton/PayButton';
 
 export type PayToInputOption = 'payid-option' | 'bsb-option';
 
@@ -33,7 +35,16 @@ const inputOptions: SegmentedControlOptions<PayToInputOption> = [
     }
 ];
 
-export default function PayToComponent(props) {
+export interface PayToComponentProps {
+    showPayButton: boolean;
+    onChange: (e) => void;
+    setComponentRef: (ref: ComponentMethodsRef) => void;
+    data: PayToData;
+    placeholders: PayToPlaceholdersType;
+    payButton: (props: Partial<PayButtonProps>) => h.JSX.Element;
+}
+
+export default function PayToComponent(props: PayToComponentProps) {
     const { i18n } = useCoreContext();
 
     const [status, setStatus] = useState<UIElementStatus>('ready');
@@ -57,7 +68,6 @@ export default function PayToComponent(props) {
                         setComponentRef={props.setComponentRef}
                         onChange={onChange}
                         defaultData={props.data}
-                        onError={props.onError}
                         placeholders={props.placeholders}
                     />
                 )}

From b4f2b80051f266b51d4f3f3f906c36e20f7d9100 Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Thu, 13 Feb 2025 14:52:54 +0100
Subject: [PATCH 15/20] add translations

---
 packages/server/translations/ar.json    | 31 ++++++++++++++++++++++++-
 packages/server/translations/bg-BG.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/ca-ES.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/cs-CZ.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/da-DK.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/de-DE.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/el-GR.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/en-US.json |  3 +--
 packages/server/translations/es-ES.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/et-EE.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/fi-FI.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/fr-FR.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/hr-HR.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/hu-HU.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/is-IS.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/it-IT.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/ja-JP.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/ko-KR.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/lt-LT.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/lv-LV.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/nl-NL.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/no-NO.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/pl-PL.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/pt-BR.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/pt-PT.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/ro-RO.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/ru-RU.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/sk-SK.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/sl-SI.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/sv-SE.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/zh-CN.json | 31 ++++++++++++++++++++++++-
 packages/server/translations/zh-TW.json | 31 ++++++++++++++++++++++++-
 32 files changed, 931 insertions(+), 33 deletions(-)

diff --git a/packages/server/translations/ar.json b/packages/server/translations/ar.json
index c5ee0cf61d..616a243cdd 100644
--- a/packages/server/translations/ar.json
+++ b/packages/server/translations/ar.json
@@ -323,5 +323,34 @@
     "paynow.mobileViewInstruction.step2": "افتح تطبيق بنك PayNow أو تطبيق الدفع.",
     "paynow.mobileViewInstruction.step3": "ابحث عن أداة قراءة رمز الاستجابة السريعة وشغلها.",
     "paynow.mobileViewInstruction.step4": "خدد خيار تحميل QR، ثم حدد لقطة الشاشة.",
-    "paynow.mobileViewInstruction.step5": "أكمل المعاملة."
+    "paynow.mobileViewInstruction.step5": "أكمل المعاملة.",
+    "payto.payid.description": "أدخل معرف PayID وتفاصيل الحساب المرتبطة بحساب Payto الخاص بك.",
+    "payto.payid.label.identifier": "المعرف",
+    "payto.payid.label.orgid": "معرف المنظمة",
+    "payto.payid.option.phone": "الهاتف المحمول",
+    "payto.payid.option.email": "البريد الإلكتروني",
+    "payto.payid.option.orgid": "معرف المنظمة",
+    "payto.bsb.description": "أدخل رقم الحساب المصرفي وفرع البنك في الولاية المرتبط بحسابك للمتابعة",
+    "payto.bsb.label.bankAccountNumber": "رقم الحساب البنكي",
+    "payto.instructions.steps": "سجّل الدخول إلى تطبيق PayTo المصرفي@وافق على اتفاقية PayTo@اعتمد شروط الدفع@أكمل المعاملة.",
+    "payto.confirmPayment": "نشكرك على عملية الشراء هذه، وفضلًا أكمل عملية الدفع باتباع التعليمات المبينة أدناه.",
+    "payto.mandate.amount.label": "المبلغ",
+    "payto.mandate.frequency.label": "التكرار",
+    "payto.mandate.remarks.label": "الوصف",
+    "payto.mandate.startsAt.label": "تاريخ أول دفعة",
+    "payto.mandate.endsAt.label": "تاريخ الانتهاء",
+    "payto.mandate.payee.label": "المدفوع له",
+    "payto.mandate.amount.max": "ما يصل إلى {amount}% لكل معاملة",
+    "payto.mandate.frequency.adhoc-no-count": "مخصص",
+    "payto.mandate.frequency.adhoc": "%{count} مرة (مرات)",
+    "payto.mandate.frequency.daily": "%{count} عملية (عمليات) دفع يوميًا",
+    "payto.mandate.frequency.weekly": "%{count} عملية (عمليات) دفع أسبوعيًا",
+    "payto.mandate.frequency.biWeekly": "%{count} عملية (عمليات) دفع كل أسبوعين",
+    "payto.mandate.frequency.monthly": "%{count} عملية (عمليات) دفع شهريًا",
+    "payto.mandate.frequency.quarterly": "%{count} عملية (عمليات) دفع ربع سنوية",
+    "payto.mandate.frequency.halfYearly": "%{count} عملية (عمليات) دفع نصف سنوية",
+    "payto.mandate.frequency.yearly": "%{count} عملية (عمليات) دفع سنويًا",
+    "payto.label.firstName": "الاسم الأول لصاحب الحساب",
+    "payto.label.lastName": "اسم العائلة لصاحب الحساب",
+    "payto.await.waitForConfirmation": "في انتظار موافقتكم"
 }
\ No newline at end of file
diff --git a/packages/server/translations/bg-BG.json b/packages/server/translations/bg-BG.json
index 44ad4a1a98..8bbcff8d9e 100644
--- a/packages/server/translations/bg-BG.json
+++ b/packages/server/translations/bg-BG.json
@@ -324,5 +324,34 @@
     "paynow.mobileViewInstruction.step2": "Отворете банката или приложението за плащане PayNow.",
     "paynow.mobileViewInstruction.step3": "Изберете опцията за сканиране на QR код.",
     "paynow.mobileViewInstruction.step4": "Изберете опцията за качване на QR код и след това изберете екранната снимка.",
-    "paynow.mobileViewInstruction.step5": "Извършете транзакцията."
+    "paynow.mobileViewInstruction.step5": "Извършете транзакцията.",
+    "payto.payid.description": "Въведете PayID и данните за сметката, които са свързани с Вашия Payto акаунт.",
+    "payto.payid.label.identifier": "Идентификатор",
+    "payto.payid.label.orgid": "OrganizationID",
+    "payto.payid.option.phone": "Мобилно устройство",
+    "payto.payid.option.email": "Имейл",
+    "payto.payid.option.orgid": "OrganizationID",
+    "payto.bsb.description": "Въведете номера на банковата сметка и банковия клон, които са свързани с вашия акаунт, за да продължите",
+    "payto.bsb.label.bankAccountNumber": "Номер на банкова сметка",
+    "payto.instructions.steps": "Влезте в приложението за банкиране PayTo@Приемете споразумението с PayTo@Одобрете условията на плащането@Завършете транзакцията",
+    "payto.confirmPayment": "Благодарим Ви за покупката, завършете плащането, като следвате инструкциите по-долу.",
+    "payto.mandate.amount.label": "Сума",
+    "payto.mandate.frequency.label": "Честота",
+    "payto.mandate.remarks.label": "Описание",
+    "payto.mandate.startsAt.label": "Първа дата за плащане",
+    "payto.mandate.endsAt.label": "Крайна дата",
+    "payto.mandate.payee.label": "Получател по плащането",
+    "payto.mandate.amount.max": "До %{amount} на транзакция",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} път(и)",
+    "payto.mandate.frequency.daily": "%{count} плащания дневно",
+    "payto.mandate.frequency.weekly": "%{count} плащания седмично",
+    "payto.mandate.frequency.biWeekly": "%{count} плащания на две седмици",
+    "payto.mandate.frequency.monthly": "%{count} плащания месечно",
+    "payto.mandate.frequency.quarterly": "%{count} плащания на тримесечие",
+    "payto.mandate.frequency.halfYearly": "%{count} плащания на шест месеца",
+    "payto.mandate.frequency.yearly": "%{count} плащания годишно",
+    "payto.label.firstName": "Име на титуляра на сметката",
+    "payto.label.lastName": "Фамилия на титуляра на сметката",
+    "payto.await.waitForConfirmation": "Очакваме Вашето одобрение"
 }
\ No newline at end of file
diff --git a/packages/server/translations/ca-ES.json b/packages/server/translations/ca-ES.json
index d5b92271b6..6185bcfc0e 100644
--- a/packages/server/translations/ca-ES.json
+++ b/packages/server/translations/ca-ES.json
@@ -324,5 +324,34 @@
     "paynow.mobileViewInstruction.step2": "Obriu PayNow o l'aplicació de pagament.",
     "paynow.mobileViewInstruction.step3": "Seleccioneu l'opció d'escanejar un codi QR.",
     "paynow.mobileViewInstruction.step4": "Trieu l'opció per carregar un QR i seleccioneu la captura de pantalla.",
-    "paynow.mobileViewInstruction.step5": "Completeu la transacció."
+    "paynow.mobileViewInstruction.step5": "Completeu la transacció.",
+    "payto.payid.description": "Introduïu el PayID i les dades del compte que estan connectades al vostre compte Payto.",
+    "payto.payid.label.identifier": "Identificador",
+    "payto.payid.label.orgid": "Identificació de l'organització",
+    "payto.payid.option.phone": "Mòbil",
+    "payto.payid.option.email": "Correu electrònic",
+    "payto.payid.option.orgid": "Identificació de l'organització",
+    "payto.bsb.description": "Introduïu el número de compte bancari i la sucursal bancària estatal que està associada al vostre compte per continuar",
+    "payto.bsb.label.bankAccountNumber": "Número de compte bancari",
+    "payto.instructions.steps": "Inicieu sessió a la vostra aplicació bancària PayTo @Autoritzeu l'acord PayTo @Aproveu els termes de pagament @Completeu la transacció",
+    "payto.confirmPayment": "Gràcies per la seva compra, completeu el vostre pagament seguint les instruccions següents.",
+    "payto.mandate.amount.label": "Import",
+    "payto.mandate.frequency.label": "Freqüència",
+    "payto.mandate.remarks.label": "Descripció",
+    "payto.mandate.startsAt.label": "Data del primer pagament",
+    "payto.mandate.endsAt.label": "Data de finalització",
+    "payto.mandate.payee.label": "Beneficiari",
+    "payto.mandate.amount.max": "Fins a %{amount} per transacció",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} vegada(es)",
+    "payto.mandate.frequency.daily": "%{count} pagament(s) diariament",
+    "payto.mandate.frequency.weekly": "%{count} pagament(s) setmanal(s)",
+    "payto.mandate.frequency.biWeekly": "%{count} pagament(s) cada quinze dies",
+    "payto.mandate.frequency.monthly": "%{count} pagament(s) mensual(s)",
+    "payto.mandate.frequency.quarterly": "%{count} pagament(s) trimestral(s)",
+    "payto.mandate.frequency.halfYearly": "%{count} pagament(s) bianual(s)",
+    "payto.mandate.frequency.yearly": "%{count} pagament(s) anual(s)",
+    "payto.label.firstName": "Nom del titular del compte",
+    "payto.label.lastName": "Cognom del titular del compte",
+    "payto.await.waitForConfirmation": "Esperant la vostra aprovació"
 }
\ No newline at end of file
diff --git a/packages/server/translations/cs-CZ.json b/packages/server/translations/cs-CZ.json
index feffd04651..78a8d2b718 100644
--- a/packages/server/translations/cs-CZ.json
+++ b/packages/server/translations/cs-CZ.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "Otevřete PayNow nebo platební aplikaci.",
     "paynow.mobileViewInstruction.step3": "Zvolte možnost naskenovat QR kód.",
     "paynow.mobileViewInstruction.step4": "Klikněte na možnost QR kód a vyberte snímek obrazovky.",
-    "paynow.mobileViewInstruction.step5": "Dokončete transakci."
+    "paynow.mobileViewInstruction.step5": "Dokončete transakci.",
+    "payto.payid.description": "Zadejte PayID a údaje o účtu, které jsou propojeny s vaším účtem Payto.",
+    "payto.payid.label.identifier": "Identifikátor",
+    "payto.payid.label.orgid": "ID organizace",
+    "payto.payid.option.phone": "Mobil",
+    "payto.payid.option.email": "E-mail",
+    "payto.payid.option.orgid": "ID organizace",
+    "payto.bsb.description": "Pro pokračování zadejte číslo bankovního účtu a kód BSB (Bank State Branch) spojený s vaším účtem",
+    "payto.bsb.label.bankAccountNumber": "Číslo bankovního účtu",
+    "payto.instructions.steps": "Přihlaste se do bankovní aplikace PayTo@Potvrďte smlouvu s PayTo@Schvalte platební podmínky@Dokončete transakci",
+    "payto.confirmPayment": "Děkujeme za váš nákup, dokončete platbu podle níže uvedených pokynů.",
+    "payto.mandate.amount.label": "Částka",
+    "payto.mandate.frequency.label": "Frekvence",
+    "payto.mandate.remarks.label": "Popis",
+    "payto.mandate.startsAt.label": "Datum první platby",
+    "payto.mandate.endsAt.label": "Datum ukončení",
+    "payto.mandate.payee.label": "Příjemce platby",
+    "payto.mandate.amount.max": "Až %{amount} na jednu transakci",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count}krát",
+    "payto.mandate.frequency.daily": "%{count} platba/platby/plateb denně",
+    "payto.mandate.frequency.weekly": "%{count} platba/platby/plateb týdně",
+    "payto.mandate.frequency.biWeekly": "%{count} platba/platby/plateb co 14 dní",
+    "payto.mandate.frequency.monthly": "%{count} platba/platby/plateb měsíčně",
+    "payto.mandate.frequency.quarterly": "%{count} platba/platby/plateb čtvrtletně",
+    "payto.mandate.frequency.halfYearly": "%{count} platba/platby/plateb půlročně",
+    "payto.mandate.frequency.yearly": "%{count} platba/platby/plateb ročně",
+    "payto.label.firstName": "Křestní jméno držitele účtu",
+    "payto.label.lastName": "Příjmení držitele účtu",
+    "payto.await.waitForConfirmation": "Čekáme na vaše schválení"
 }
\ No newline at end of file
diff --git a/packages/server/translations/da-DK.json b/packages/server/translations/da-DK.json
index c307fc0950..75c2d2a938 100644
--- a/packages/server/translations/da-DK.json
+++ b/packages/server/translations/da-DK.json
@@ -323,5 +323,34 @@
     "paynow.mobileViewInstruction.step2": "Åbn PayNow-banken eller betalingsappen.",
     "paynow.mobileViewInstruction.step3": "Vælg muligheden for at scanne en QR-kode.",
     "paynow.mobileViewInstruction.step4": "Vælg muligheden for at uploade en QR-kode og vælg skærmbilledet.",
-    "paynow.mobileViewInstruction.step5": "Gennemfør transaktionen."
+    "paynow.mobileViewInstruction.step5": "Gennemfør transaktionen.",
+    "payto.payid.description": "Indtast PayID og kontooplysninger, der er knyttet til din PayTo-konto.",
+    "payto.payid.label.identifier": "Identifikator",
+    "payto.payid.label.orgid": "Organisations-id",
+    "payto.payid.option.phone": "Mobil",
+    "payto.payid.option.email": "E-mail",
+    "payto.payid.option.orgid": "Organisations-id",
+    "payto.bsb.description": "Indtast bankkontonummeret og bankafdeling (Bank State Branch, BSB), der er knyttet til din konto, for at fortsætte",
+    "payto.bsb.label.bankAccountNumber": "Bankkontonummer",
+    "payto.instructions.steps": "Log ind på din PayTo-bankapp@Godkend PayTo-aftalen@Godkend betalingsbetingelserne@Fuldfør transaktionen",
+    "payto.confirmPayment": "Tak for dit køb! Fuldfør din betaling ved at følge instruktionerne nedenfor.",
+    "payto.mandate.amount.label": "Beløb",
+    "payto.mandate.frequency.label": "Hyppighed",
+    "payto.mandate.remarks.label": "Beskrivelse",
+    "payto.mandate.startsAt.label": "Første betalingsdato",
+    "payto.mandate.endsAt.label": "Slutdato",
+    "payto.mandate.payee.label": "Betalingsmodtager",
+    "payto.mandate.amount.max": "Op til %{amount} pr. transaktion",
+    "payto.mandate.frequency.adhoc-no-count": "Ad hoc",
+    "payto.mandate.frequency.adhoc": "%{count} gang(e)",
+    "payto.mandate.frequency.daily": "%{count} betaling(er) dagligt",
+    "payto.mandate.frequency.weekly": "%{count} betaling(er) ugentligt",
+    "payto.mandate.frequency.biWeekly": "%{count} betaling(er) hver 2. uge",
+    "payto.mandate.frequency.monthly": "%{count} betaling(er) månedligt",
+    "payto.mandate.frequency.quarterly": "%{count} betaling(er) kvartalsvis",
+    "payto.mandate.frequency.halfYearly": "%{count} betaling(er) halvårlig",
+    "payto.mandate.frequency.yearly": "%{count} betaling(er) årligt",
+    "payto.label.firstName": "Kontohavers fornavn",
+    "payto.label.lastName": "Kontohavers efternavn",
+    "payto.await.waitForConfirmation": "Afventer din godkendelse"
 }
\ No newline at end of file
diff --git a/packages/server/translations/de-DE.json b/packages/server/translations/de-DE.json
index e42f67c134..5b210d7afa 100644
--- a/packages/server/translations/de-DE.json
+++ b/packages/server/translations/de-DE.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "Öffnen Sie die PayNow-Bank- oder Zahlungs-App.",
     "paynow.mobileViewInstruction.step3": "Wählen Sie die Option, um einen QR-Code zu scannen.",
     "paynow.mobileViewInstruction.step4": "Wählen Sie die Option zum Hochladen eines QR-Codes und wählen Sie den Screenshot aus.",
-    "paynow.mobileViewInstruction.step5": "Schließen Sie die Transaktion ab."
+    "paynow.mobileViewInstruction.step5": "Schließen Sie die Transaktion ab.",
+    "payto.payid.description": "Geben Sie die PayID und die Kontodaten ein, die mit Ihrem Payto-Konto verknüpft sind.",
+    "payto.payid.label.identifier": "Kennung",
+    "payto.payid.label.orgid": "Organisations-ID",
+    "payto.payid.option.phone": "Mobil",
+    "payto.payid.option.email": "E-Mail-Adresse",
+    "payto.payid.option.orgid": "Organisations-ID",
+    "payto.bsb.description": "Geben Sie die Bankkontonummer und die dazugehörige Bankleitzahl ein, um fortzufahren",
+    "payto.bsb.label.bankAccountNumber": "Bankkontonummer",
+    "payto.instructions.steps": "Melden Sie sich bei Ihrer PayTo-Banking-App an@Genehmigen Sie die PayTo-Vereinbarung@Stimmen Sie den Zahlungsbedingungen zu@Schließen Sie die Transaktion ab",
+    "payto.confirmPayment": "Vielen Dank für Ihren Kauf. Bitte schließen Sie Ihre Zahlung ab, indem Sie die nachstehenden Anweisungen befolgen.",
+    "payto.mandate.amount.label": "Betrag",
+    "payto.mandate.frequency.label": "Häufigkeit",
+    "payto.mandate.remarks.label": "Beschreibung",
+    "payto.mandate.startsAt.label": "Erstes Zahlungsdatum",
+    "payto.mandate.endsAt.label": "Enddatum",
+    "payto.mandate.payee.label": "Zahlungsempfänger",
+    "payto.mandate.amount.max": "Bis zu %{amount} pro Transaktion",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} Mal",
+    "payto.mandate.frequency.daily": "%{count} Zahlung(en) täglich",
+    "payto.mandate.frequency.weekly": "%{count} Zahlung(en) wöchentlich",
+    "payto.mandate.frequency.biWeekly": "%{count} Zahlung(en) vierzehntägig",
+    "payto.mandate.frequency.monthly": "%{count} Zahlung(en) monatlich",
+    "payto.mandate.frequency.quarterly": "%{count} Zahlung(en) vierteljährlich",
+    "payto.mandate.frequency.halfYearly": "%{count} Zahlung(en) halbjährlich",
+    "payto.mandate.frequency.yearly": "%{count} Zahlung(en) jährlich",
+    "payto.label.firstName": "Vorname des Kontoinhabers",
+    "payto.label.lastName": "Nachname des Kontoinhabers",
+    "payto.await.waitForConfirmation": "Wir warten auf Ihre Genehmigung"
 }
\ No newline at end of file
diff --git a/packages/server/translations/el-GR.json b/packages/server/translations/el-GR.json
index bff5068f64..45972645dd 100644
--- a/packages/server/translations/el-GR.json
+++ b/packages/server/translations/el-GR.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "Ανοίξτε την τράπεζα PayNow ή την εφαρμογή πληρωμών.",
     "paynow.mobileViewInstruction.step3": "Επιλέξτε τη δυνατότητα σάρωσης ενός κωδικού QR.",
     "paynow.mobileViewInstruction.step4": "Επιλέξτε τη δυνατότητα μεταφόρτωσης ενός QR και επιλέξτε το στιγμιότυπο οθόνης.",
-    "paynow.mobileViewInstruction.step5": "Ολοκληρώστε τη συναλλαγή."
+    "paynow.mobileViewInstruction.step5": "Ολοκληρώστε τη συναλλαγή.",
+    "payto.payid.description": "Εισαγάγετε το PayID και τα στοιχεία λογαριασμού που είναι συνδεδεμένα με τον λογαριασμό Payto που διαθέτετε.",
+    "payto.payid.label.identifier": "Αναγνωριστικό",
+    "payto.payid.label.orgid": "Αναγνωριστικό οργανισμού",
+    "payto.payid.option.phone": "Κινητό",
+    "payto.payid.option.email": "Email",
+    "payto.payid.option.orgid": "Αναγνωριστικό οργανισμού",
+    "payto.bsb.description": "Εισαγάγετε τον αριθμό τραπεζικού λογαριασμού και το υποκατάστημα της τράπεζας που συνδέεται με τον λογαριασμό σας για να συνεχίσετε.",
+    "payto.bsb.label.bankAccountNumber": "Αριθμός τραπεζικού λογαριασμού",
+    "payto.instructions.steps": "Συνδεθείτε στην εφαρμογή τραπεζικής σας PayTo@Εξουσιοδοτήστε τη συμφωνία PayTo@Εγκρίνετε τους όρους πληρωμής@Ολοκληρώστε τη συναλλαγή",
+    "payto.confirmPayment": "Σας ευχαριστούμε για την αγορά σας. Ολοκληρώστε την πληρωμή σας ακολουθώντας τις παρακάτω οδηγίες.",
+    "payto.mandate.amount.label": "Ποσό",
+    "payto.mandate.frequency.label": "Συχνότητα",
+    "payto.mandate.remarks.label": "Περιγραφή",
+    "payto.mandate.startsAt.label": "Ημερομηνία πρώτης πληρωμής",
+    "payto.mandate.endsAt.label": "Ημερομηνία λήξης",
+    "payto.mandate.payee.label": "Δικαιούχος",
+    "payto.mandate.amount.max": "Έως %{amount} ανά συναλλαγή",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} φορά(-ές)",
+    "payto.mandate.frequency.daily": "%{count} πληρωμή(-ές) καθημερινά",
+    "payto.mandate.frequency.weekly": "%{count} πληρωμή(-ές) εβδομαδιαίως",
+    "payto.mandate.frequency.biWeekly": "%{count} πληρωμή(-ές) ανά δεκαπενθήμερο",
+    "payto.mandate.frequency.monthly": "%{count} πληρωμή(-ές) μηνιαίως",
+    "payto.mandate.frequency.quarterly": "%{count} πληρωμή(-ές) ανά τρίμηνο",
+    "payto.mandate.frequency.halfYearly": "%{count} πληρωμή(-ές) ανά εξάμηνο",
+    "payto.mandate.frequency.yearly": "%{count} πληρωμή(-ές) ετησίως",
+    "payto.label.firstName": "Όνομα κατόχου λογαριασμού",
+    "payto.label.lastName": "Επώνυμο κατόχου λογαριασμού",
+    "payto.await.waitForConfirmation": "Αναμονή για την έγκρισή σας"
 }
\ No newline at end of file
diff --git a/packages/server/translations/en-US.json b/packages/server/translations/en-US.json
index a0dd10e089..316c5af602 100644
--- a/packages/server/translations/en-US.json
+++ b/packages/server/translations/en-US.json
@@ -331,8 +331,7 @@
     "payto.payid.option.phone": "Mobile",
     "payto.payid.option.email": "Email",
     "payto.payid.option.orgid": "Organization ID",
-    "payto.bsb.header": "BSB",
-    "payto.bsb.description" : "Enter the bank account number and the Bank State Branch that is connected to your account to continue",
+    "payto.bsb.description": "Enter the bank account number and the Bank State Branch that is connected to your account to continue",
     "payto.bsb.label.bankAccountNumber": "Bank account number",
     "payto.instructions.steps": "Log into your PayTo banking app@Authorize the PayTo agreement@Approve the payment terms@Complete the transaction",
     "payto.confirmPayment": "Thank you for your purchase, complete your payment by following the instructions below.",
diff --git a/packages/server/translations/es-ES.json b/packages/server/translations/es-ES.json
index d7dbcefa20..d1956292c6 100644
--- a/packages/server/translations/es-ES.json
+++ b/packages/server/translations/es-ES.json
@@ -320,5 +320,34 @@
     "paynow.mobileViewInstruction.step2": "Abra la aplicación bancaria o de pago PayNow.",
     "paynow.mobileViewInstruction.step3": "Seleccione la opción de escanear un código QR.",
     "paynow.mobileViewInstruction.step4": "Elija la opción de subir un QR y seleccione la captura de pantalla.",
-    "paynow.mobileViewInstruction.step5": "Complete la transacción."
+    "paynow.mobileViewInstruction.step5": "Complete la transacción.",
+    "payto.payid.description": "Introduzca el PayID y los detalles de la cuenta que están conectados a su cuenta Payto.",
+    "payto.payid.label.identifier": "Identificador",
+    "payto.payid.label.orgid": "ID de la organización",
+    "payto.payid.option.phone": "Teléfono móvil",
+    "payto.payid.option.email": "Correo electrónico",
+    "payto.payid.option.orgid": "ID de la organización",
+    "payto.bsb.description": "Introduzca el número de cuenta bancaria y la sucursal del banco estatal que está vinculada a su cuenta para continuar",
+    "payto.bsb.label.bankAccountNumber": "Número de cuenta bancaria",
+    "payto.instructions.steps": "Inicie sesión en su aplicación bancaria PayTo@Autorice el acuerdo de PayTo@Apruebe las condiciones de pago @Complete la transacción",
+    "payto.confirmPayment": "Gracias por su compra. Complete su pago siguiendo las instrucciones a continuación.",
+    "payto.mandate.amount.label": "Cantidad",
+    "payto.mandate.frequency.label": "Frecuencia",
+    "payto.mandate.remarks.label": "Descripción",
+    "payto.mandate.startsAt.label": "Fecha del primer pago",
+    "payto.mandate.endsAt.label": "Fecha de finalización",
+    "payto.mandate.payee.label": "Beneficiario",
+    "payto.mandate.amount.max": "Hasta %{amount} por transacción",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} vez/veces",
+    "payto.mandate.frequency.daily": "%{count} pago(s) diariamente",
+    "payto.mandate.frequency.weekly": "%{count} pago(s) semanalmente",
+    "payto.mandate.frequency.biWeekly": "%{count} pago(s) quincenal(es)",
+    "payto.mandate.frequency.monthly": "%{count} pago(s) mensual(es)",
+    "payto.mandate.frequency.quarterly": "%{count} pago(s) trimestralmente",
+    "payto.mandate.frequency.halfYearly": "%{count} pago(s) semestralmente",
+    "payto.mandate.frequency.yearly": "%{count} pago(s) anualmente",
+    "payto.label.firstName": "Nombre del titular de la cuenta",
+    "payto.label.lastName": "Apellidos del titular de la cuenta",
+    "payto.await.waitForConfirmation": "Esperando su aprobación"
 }
\ No newline at end of file
diff --git a/packages/server/translations/et-EE.json b/packages/server/translations/et-EE.json
index b6d8b8873a..7d9bdc695d 100644
--- a/packages/server/translations/et-EE.json
+++ b/packages/server/translations/et-EE.json
@@ -324,5 +324,34 @@
     "paynow.mobileViewInstruction.step2": "Avage pank või makserakendus PayNow.",
     "paynow.mobileViewInstruction.step3": "Valige QR-koodi skannimise valik.",
     "paynow.mobileViewInstruction.step4": "Valige QR-koodi üleslaadimise valik ja valige kuvatõmmis.",
-    "paynow.mobileViewInstruction.step5": "Viige kanne lõpule."
+    "paynow.mobileViewInstruction.step5": "Viige kanne lõpule.",
+    "payto.payid.description": "Sisestage PayID ja teie Payto kontoga ühendatud konto andmed.",
+    "payto.payid.label.identifier": "Tunnus",
+    "payto.payid.label.orgid": "Organisatsiooni ID",
+    "payto.payid.option.phone": "Mobiil",
+    "payto.payid.option.email": "E-post",
+    "payto.payid.option.orgid": "Organisatsiooni ID",
+    "payto.bsb.description": "Jätkamiseks sisestage pangakonto number ja teie kontoga seotud panga riiklik filiaal",
+    "payto.bsb.label.bankAccountNumber": "Pangakonto number",
+    "payto.instructions.steps": "Logige sisse oma PayTo pangarakendusse@Kinnitage PayTo leping@Kinnitage maksetingimused@Lõpetage kanne",
+    "payto.confirmPayment": "Täname teid ostu eest, täitke makse allpool toodud juhiseid järgides.",
+    "payto.mandate.amount.label": "Summa",
+    "payto.mandate.frequency.label": "Sagedus",
+    "payto.mandate.remarks.label": "Kirjeldus",
+    "payto.mandate.startsAt.label": "Esimese makse kuupäev",
+    "payto.mandate.endsAt.label": "Lõppkuupäev",
+    "payto.mandate.payee.label": "Makse saaja",
+    "payto.mandate.amount.max": "Kuni %{amount} tehingu kohta",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} kord(a)",
+    "payto.mandate.frequency.daily": "%{count} makse(t) päevas",
+    "payto.mandate.frequency.weekly": "%{count} makse(t) nädalas",
+    "payto.mandate.frequency.biWeekly": "%{count} makse(t) iga kahe nädala tagant",
+    "payto.mandate.frequency.monthly": "%{count} makse(t) kuus",
+    "payto.mandate.frequency.quarterly": "%{count} makse(t) kvartalis",
+    "payto.mandate.frequency.halfYearly": "%{count} makse(t) kaks korda aastas",
+    "payto.mandate.frequency.yearly": "%{count} makse(t) aastas",
+    "payto.label.firstName": "Konto omaniku eesnimi",
+    "payto.label.lastName": "Konto omaniku perekonnanimi",
+    "payto.await.waitForConfirmation": "Teie heakskiidu ootel"
 }
\ No newline at end of file
diff --git a/packages/server/translations/fi-FI.json b/packages/server/translations/fi-FI.json
index 3df07a0e76..e30c12fda8 100644
--- a/packages/server/translations/fi-FI.json
+++ b/packages/server/translations/fi-FI.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "Avaa PayNow-pankkisovellus tai -maksusovellus.",
     "paynow.mobileViewInstruction.step3": "Valitse QR-koodin skannaustoiminto.",
     "paynow.mobileViewInstruction.step4": "Valitse QR-koodin lataustoiminto ja valitse ottamasi näyttökuva.",
-    "paynow.mobileViewInstruction.step5": "Suorita maksutapahtuma loppuun."
+    "paynow.mobileViewInstruction.step5": "Suorita maksutapahtuma loppuun.",
+    "payto.payid.description": "Anna Payto-tilisi PayID ja tilitiedot",
+    "payto.payid.label.identifier": "Tunniste",
+    "payto.payid.label.orgid": "Organisaatiotunnus",
+    "payto.payid.option.phone": "Matkapuhelinnumero",
+    "payto.payid.option.email": "Sähköposti",
+    "payto.payid.option.orgid": "Organisaation tunnus",
+    "payto.bsb.description": "Jotta voit jatkaa, lisää tiliisi yhdistetty pankkitilin numero ja BSB-numero (pankkikonttorin tunnus)",
+    "payto.bsb.label.bankAccountNumber": "Pankkitilinumero",
+    "payto.instructions.steps": "Kirjaudu PayTo-pankkisovellukseesi@Hyväksy PayTo-sopimus@Hyväksy maksuehdot@Viimeistele maksutapahtuma",
+    "payto.confirmPayment": "Kiitos ostoksestasi. Suorita maksu alla annettujen ohjeiden mukaisesti.",
+    "payto.mandate.amount.label": "Summa",
+    "payto.mandate.frequency.label": "Maksuaikataulu",
+    "payto.mandate.remarks.label": "Kuvaus",
+    "payto.mandate.startsAt.label": "Ensimmäinen maksupäivä",
+    "payto.mandate.endsAt.label": "Päättymispäivämäärä",
+    "payto.mandate.payee.label": "Maksunsaaja",
+    "payto.mandate.amount.max": "Jopa %{amount} per maksutapahtuma",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} kertaa",
+    "payto.mandate.frequency.daily": "%{count} maksua päivittäin",
+    "payto.mandate.frequency.weekly": "%{count} maksua viikoittain",
+    "payto.mandate.frequency.biWeekly": "%{count} maksu kahdessa viikossa",
+    "payto.mandate.frequency.monthly": "%{count} maksua kuukausittain",
+    "payto.mandate.frequency.quarterly": "%{count} maksua neljännesvuosittain",
+    "payto.mandate.frequency.halfYearly": "%{count} maksu(a) puolivuosittain",
+    "payto.mandate.frequency.yearly": "%{count} maksua vuosittain",
+    "payto.label.firstName": "Tilinhaltijan etunimi",
+    "payto.label.lastName": "Tilinhaltijan sukunimi",
+    "payto.await.waitForConfirmation": "Odottaa hyväksyntääsi"
 }
\ No newline at end of file
diff --git a/packages/server/translations/fr-FR.json b/packages/server/translations/fr-FR.json
index e6d25519ae..6d62d7a3b5 100644
--- a/packages/server/translations/fr-FR.json
+++ b/packages/server/translations/fr-FR.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "Ouvrez l'application bancaire ou de paiement PayNow.",
     "paynow.mobileViewInstruction.step3": "Sélectionnez l'option permettant de scanner un code QR.",
     "paynow.mobileViewInstruction.step4": "Choisissez l'option pour télécharger un code QR et sélectionnez la capture d'écran.",
-    "paynow.mobileViewInstruction.step5": "Complétez la transaction."
+    "paynow.mobileViewInstruction.step5": "Complétez la transaction.",
+    "payto.payid.description": "Veuillez saisir le PayID et les détails du compte qui sont connectés à votre compte Payto.",
+    "payto.payid.label.identifier": "Identifiant",
+    "payto.payid.label.orgid": "Identifiant de l'organisation",
+    "payto.payid.option.phone": "Portable",
+    "payto.payid.option.email": "E-mail",
+    "payto.payid.option.orgid": "Identifiant de l'organisation",
+    "payto.bsb.description": "Saisissez le numéro de compte bancaire et la succursale bancaire qui est liée à votre compte pour continuer.",
+    "payto.bsb.label.bankAccountNumber": "Numéro du compte bancaire",
+    "payto.instructions.steps": "Connectez-vous à votre application bancaire PayTo@Autorisez l'accord PayTo@Approuvez les conditions de paiement@Finalisez la transaction",
+    "payto.confirmPayment": "Nous vous remercions de votre achat. Veuillez finaliser votre paiement en suivant les instructions ci-dessous.",
+    "payto.mandate.amount.label": "Montant",
+    "payto.mandate.frequency.label": "Fréquence",
+    "payto.mandate.remarks.label": "Description",
+    "payto.mandate.startsAt.label": "Date du premier paiement",
+    "payto.mandate.endsAt.label": "Date de fin",
+    "payto.mandate.payee.label": "Bénéficiaire",
+    "payto.mandate.amount.max": "Jusqu'à %{amount} par transaction",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} fois",
+    "payto.mandate.frequency.daily": "%{count} paiement(s) par jour",
+    "payto.mandate.frequency.weekly": "%{count} paiement(s) par semaine",
+    "payto.mandate.frequency.biWeekly": "%{count} paiement(s) toutes les deux semaines",
+    "payto.mandate.frequency.monthly": "%{count} paiement(s) mensuel(s)",
+    "payto.mandate.frequency.quarterly": "%{count} paiement(s) par trimestre",
+    "payto.mandate.frequency.halfYearly": "%{count} paiement(s) par semestre",
+    "payto.mandate.frequency.yearly": "%{count} paiement(s) par an",
+    "payto.label.firstName": "Prénom du titulaire du compte",
+    "payto.label.lastName": "Nom de famille du titulaire du compte",
+    "payto.await.waitForConfirmation": "En attente de votre approbation"
 }
\ No newline at end of file
diff --git a/packages/server/translations/hr-HR.json b/packages/server/translations/hr-HR.json
index e18030904a..c4b9512a30 100644
--- a/packages/server/translations/hr-HR.json
+++ b/packages/server/translations/hr-HR.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "Otvorite PayNow banku ili aplikaciju za plaćanje.",
     "paynow.mobileViewInstruction.step3": "Odaberite opciju skeniranja QR kôda.",
     "paynow.mobileViewInstruction.step4": "Odaberite opciju za prijenos QR-a i odaberite snimku zaslona.",
-    "paynow.mobileViewInstruction.step5": "Dovršite transakciju."
+    "paynow.mobileViewInstruction.step5": "Dovršite transakciju.",
+    "payto.payid.description": "Unesite PayID i podatke o računu koji su povezani s vašim Payto računom.",
+    "payto.payid.label.identifier": "Identifikator",
+    "payto.payid.label.orgid": "ID organizacije",
+    "payto.payid.option.phone": "Mobilni telefon",
+    "payto.payid.option.email": "E-pošta",
+    "payto.payid.option.orgid": "ID organizacije",
+    "payto.bsb.description": "Unesite broj bankovnog računa i državnu podružnicu banke koja je povezana s vašim računom kako biste nastavili",
+    "payto.bsb.label.bankAccountNumber": "Broj bankovnog računa",
+    "payto.instructions.steps": "Prijavite se u svoju PayTo bankarsku aplikaciju kako biste@autorizirali ugovor PayTo @odobrili uvjete plaćanja@dovršili transakciju",
+    "payto.confirmPayment": "Zahvaljujemo vam na kupnji, dovršite uplatu slijedeći upute u nastavku.",
+    "payto.mandate.amount.label": "Iznos",
+    "payto.mandate.frequency.label": "Učestalost",
+    "payto.mandate.remarks.label": "Opis",
+    "payto.mandate.startsAt.label": "Datum prve uplate",
+    "payto.mandate.endsAt.label": "Datum završetka",
+    "payto.mandate.payee.label": "Primatelj uplate",
+    "payto.mandate.amount.max": "Do %{amount} po transakciji",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} puta",
+    "payto.mandate.frequency.daily": "Dnevnih uplata: %{count}",
+    "payto.mandate.frequency.weekly": "Tjednih uplata: %{count}",
+    "payto.mandate.frequency.biWeekly": "Dvotjednih uplata: %{count}",
+    "payto.mandate.frequency.monthly": "Mjesečnih uplata: %{count}",
+    "payto.mandate.frequency.quarterly": "Kvartalnih uplata: %{count}",
+    "payto.mandate.frequency.halfYearly": "%{count}",
+    "payto.mandate.frequency.yearly": "Godišnjih uplata: %{count}",
+    "payto.label.firstName": "Ime vlasnika računa",
+    "payto.label.lastName": "Prezime vlasnika računa",
+    "payto.await.waitForConfirmation": "Čekamo vaše odobrenje"
 }
\ No newline at end of file
diff --git a/packages/server/translations/hu-HU.json b/packages/server/translations/hu-HU.json
index 9715c90ac0..075a9a10b2 100644
--- a/packages/server/translations/hu-HU.json
+++ b/packages/server/translations/hu-HU.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "Nyissa meg a PayNow banki vagy fizetési alkalmazást.",
     "paynow.mobileViewInstruction.step3": "Válassza ki a QR-kód beolvasásának lehetőségét.",
     "paynow.mobileViewInstruction.step4": "Válassza ki a QR-feltöltés lehetőségét, és jelölje ki a képernyőképet.",
-    "paynow.mobileViewInstruction.step5": "Fejezze be a tranzakciót."
+    "paynow.mobileViewInstruction.step5": "Fejezze be a tranzakciót.",
+    "payto.payid.description": "Adja meg a Payto-fiókjához kapcsolódó PayID-t és a számlaadatait.",
+    "payto.payid.label.identifier": "Azonosító",
+    "payto.payid.label.orgid": "Szervezeti azonosító",
+    "payto.payid.option.phone": "Mobiltelefon",
+    "payto.payid.option.email": "E-mail-cím",
+    "payto.payid.option.orgid": "Szervezeti azonosító",
+    "payto.bsb.description": "A folytatáshoz adja meg a bankszámlaszámot és a számlájához kapcsolódó bankfiók azonosító (BSB) kódját",
+    "payto.bsb.label.bankAccountNumber": "Bankszámlaszám",
+    "payto.instructions.steps": "Jelentkezzen be PayTo banki alkalmazásába@Hagyja jóvá a PayTo megállapodást@Fogadja el a fizetési feltételeket@Fejezze be a tranzakciót",
+    "payto.confirmPayment": "Köszönjük vásárlást! Fejezze be a fizetést az alábbi utasításokat követve.",
+    "payto.mandate.amount.label": "Összeg",
+    "payto.mandate.frequency.label": "Gyakoriság",
+    "payto.mandate.remarks.label": "Leírás",
+    "payto.mandate.startsAt.label": "Első fizetési dátum",
+    "payto.mandate.endsAt.label": "Befejező dátum",
+    "payto.mandate.payee.label": "Kedvezményezett",
+    "payto.mandate.amount.max": "Tranzakciónként legfeljebb %{amount}",
+    "payto.mandate.frequency.adhoc-no-count": "Eseti",
+    "payto.mandate.frequency.adhoc": "%{count} alkalommal",
+    "payto.mandate.frequency.daily": "%{count} fizetés naponta",
+    "payto.mandate.frequency.weekly": "%{count} fizetés hetente",
+    "payto.mandate.frequency.biWeekly": "%{count} fizetés kéthetente",
+    "payto.mandate.frequency.monthly": "%{count} fizetés havonta",
+    "payto.mandate.frequency.quarterly": "%{count} fizetés negyedévente",
+    "payto.mandate.frequency.halfYearly": "%{count} fizetés kétévente",
+    "payto.mandate.frequency.yearly": "%{count} fizetés évente",
+    "payto.label.firstName": "Számlatulajdonos utóneve",
+    "payto.label.lastName": "Számlatulajdonos vezetékneve",
+    "payto.await.waitForConfirmation": "Várakozás az Ön jóváhagyására"
 }
\ No newline at end of file
diff --git a/packages/server/translations/is-IS.json b/packages/server/translations/is-IS.json
index f01b99b0cb..74257a70e4 100644
--- a/packages/server/translations/is-IS.json
+++ b/packages/server/translations/is-IS.json
@@ -324,5 +324,34 @@
     "paynow.mobileViewInstruction.step2": "Opnaðu PayNow-banka- eða greiðsluapp.",
     "paynow.mobileViewInstruction.step3": "Veldu valkostinn til að skanna QR-kóða.",
     "paynow.mobileViewInstruction.step4": "Veldu valkostinn til að hlaða upp QR-kóða og veldu skjámyndina.",
-    "paynow.mobileViewInstruction.step5": "Ljúktu færslunni."
+    "paynow.mobileViewInstruction.step5": "Ljúktu færslunni.",
+    "payto.payid.description": "Sláðu inn PayID og reikningsupplýsingar sem eru tengjast Payto-reikningnum þínum.",
+    "payto.payid.label.identifier": "Auðkenni",
+    "payto.payid.label.orgid": "Auðkenni fyrirtækis",
+    "payto.payid.option.phone": "Farsími",
+    "payto.payid.option.email": "Netfang",
+    "payto.payid.option.orgid": "Auðkenni fyrirtækis",
+    "payto.bsb.description": "Sláðu inn bankareikningsnúmerið og bankaútibúið sem er tengt við reikninginn til að halda áfram",
+    "payto.bsb.label.bankAccountNumber": "Bankareikningsnúmer",
+    "payto.instructions.steps": "Skráðu þig inn á PayTo-bankaforritið@Samþykktu PayTo-samninginn@Samþykktu greiðsluskilmálana@Ljúktu við færsluna",
+    "payto.confirmPayment": "Takk fyrir kaupin, ljúktu við greiðsluna með því að fylgja leiðbeiningunum hér fyrir neðan.",
+    "payto.mandate.amount.label": "Upphæð",
+    "payto.mandate.frequency.label": "Tíðni",
+    "payto.mandate.remarks.label": "Lýsing",
+    "payto.mandate.startsAt.label": "Fyrsti greiðsludagur",
+    "payto.mandate.endsAt.label": "Lokadagsetning",
+    "payto.mandate.payee.label": "Greiðsluþegi",
+    "payto.mandate.amount.max": "Allt að %{amount} fyrir hverja færslu",
+    "payto.mandate.frequency.adhoc-no-count": "Sértækt",
+    "payto.mandate.frequency.adhoc": "%{count} skipti",
+    "payto.mandate.frequency.daily": "%{count} greiðsla/greiðslur daglega",
+    "payto.mandate.frequency.weekly": "%{count} greiðsla/greiðslur vikulega",
+    "payto.mandate.frequency.biWeekly": "%{count} greiðsla/greiðslur á tveggja vikna fresti",
+    "payto.mandate.frequency.monthly": "%{count} greiðsla/greiðslur á mánuði",
+    "payto.mandate.frequency.quarterly": "%{count} greiðsla/greiðslur ársfjórðungslega",
+    "payto.mandate.frequency.halfYearly": "%{count} greiðsla/greiðslur á sex mánaða fresti",
+    "payto.mandate.frequency.yearly": "%{count} greiðsla/greiðslur árlega",
+    "payto.label.firstName": "Fornafn reikningshafa",
+    "payto.label.lastName": "Eftirnafn reikningshafa",
+    "payto.await.waitForConfirmation": "Bíður samþykkis"
 }
\ No newline at end of file
diff --git a/packages/server/translations/it-IT.json b/packages/server/translations/it-IT.json
index e89f0ca172..f7ad7b57d6 100644
--- a/packages/server/translations/it-IT.json
+++ b/packages/server/translations/it-IT.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "Apri PayNow o l'app di pagamento.",
     "paynow.mobileViewInstruction.step3": "Seleziona l'opzione per scansionare un codice QR.",
     "paynow.mobileViewInstruction.step4": "Scegli l'opzione per caricare un QR e seleziona lo screenshot.",
-    "paynow.mobileViewInstruction.step5": "Completa la transazione."
+    "paynow.mobileViewInstruction.step5": "Completa la transazione.",
+    "payto.payid.description": "Immettere la PayID e i dettagli del conto collegati al conto Payto.",
+    "payto.payid.label.identifier": "Identificatore",
+    "payto.payid.label.orgid": "ID organizzazione",
+    "payto.payid.option.phone": "Cellulare",
+    "payto.payid.option.email": "E-mail",
+    "payto.payid.option.orgid": "ID dell'organizzazione",
+    "payto.bsb.description": "Per continuare, immettere il numero di conto bancario e la filiale della banca collegata al tuo conto",
+    "payto.bsb.label.bankAccountNumber": "Numero di conto bancario",
+    "payto.instructions.steps": "Accedere all'app bancaria PayTo@Autorizzare il contratto PayTo@Approvare i termini di pagamento@Completare la transazione",
+    "payto.confirmPayment": "Grazie per l'acquisto, completare il pagamento seguendo le istruzioni riportate di seguito.",
+    "payto.mandate.amount.label": "Somma",
+    "payto.mandate.frequency.label": "Frequenza",
+    "payto.mandate.remarks.label": "Descrizione",
+    "payto.mandate.startsAt.label": "Data del primo pagamento",
+    "payto.mandate.endsAt.label": "Data di fine",
+    "payto.mandate.payee.label": "Beneficiario",
+    "payto.mandate.amount.max": "Fino a %{amount} per transazione",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} volta(e)",
+    "payto.mandate.frequency.daily": "%{count} pagamento(i) giornaliero(i)",
+    "payto.mandate.frequency.weekly": "%{count} pagamento(i) settimanale(i)",
+    "payto.mandate.frequency.biWeekly": "%{count} pagamento/i ogni quindici giorni",
+    "payto.mandate.frequency.monthly": "%{count} pagamento/i mensile(i)",
+    "payto.mandate.frequency.quarterly": "%{count} pagamento/i trimestrale(i)",
+    "payto.mandate.frequency.halfYearly": "%{count} pagamento(i) semestrale(i)",
+    "payto.mandate.frequency.yearly": "%{count} pagamento/i all'anno",
+    "payto.label.firstName": "Nome del titolare del conto",
+    "payto.label.lastName": "Cognome del titolare del conto",
+    "payto.await.waitForConfirmation": "In attesa della tua approvazione"
 }
\ No newline at end of file
diff --git a/packages/server/translations/ja-JP.json b/packages/server/translations/ja-JP.json
index dde1ea6343..4e7c068150 100644
--- a/packages/server/translations/ja-JP.json
+++ b/packages/server/translations/ja-JP.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "PayNow銀行または支払アプリを開きます。",
     "paynow.mobileViewInstruction.step3": "QRコードをスキャンするオプションを選択します。",
     "paynow.mobileViewInstruction.step4": "QRをアップロードするオプションを選択し、スクリーンショットを選択します。",
-    "paynow.mobileViewInstruction.step5": "取引を完了します。"
+    "paynow.mobileViewInstruction.step5": "取引を完了します。",
+    "payto.payid.description": "Paytoアカウントに接続されているPayIDとアカウントの詳細を入力してください。",
+    "payto.payid.label.identifier": "識別子",
+    "payto.payid.label.orgid": "組織ID",
+    "payto.payid.option.phone": "携帯",
+    "payto.payid.option.email": "メールアドレス",
+    "payto.payid.option.orgid": "組織ID",
+    "payto.bsb.description": "アカウントに接続されている銀行口座番号と銀行支店コードを入力して、続行してください。",
+    "payto.bsb.label.bankAccountNumber": "銀行口座番号",
+    "payto.instructions.steps": "PayTo銀行アプリにログインしてPayTo契約を承認し、支払い条件を確認して、取引を完了してください",
+    "payto.confirmPayment": "お買い上げありがとうございます。以下の指示に従って、支払いを完了してください。",
+    "payto.mandate.amount.label": "金額",
+    "payto.mandate.frequency.label": "頻度",
+    "payto.mandate.remarks.label": "説明",
+    "payto.mandate.startsAt.label": "初回支払日",
+    "payto.mandate.endsAt.label": "終了日",
+    "payto.mandate.payee.label": "受取人",
+    "payto.mandate.amount.max": "取引ごとに最大%{amount}",
+    "payto.mandate.frequency.adhoc-no-count": "アドホック",
+    "payto.mandate.frequency.adhoc": "%{count}回",
+    "payto.mandate.frequency.daily": "%{count}件の支払を毎日",
+    "payto.mandate.frequency.weekly": "%{count}件の支払を毎週",
+    "payto.mandate.frequency.biWeekly": "%{count}件の支払を隔週",
+    "payto.mandate.frequency.monthly": "%{count}件の支払を毎月",
+    "payto.mandate.frequency.quarterly": "%{count}件の支払を毎四半期",
+    "payto.mandate.frequency.halfYearly": "%{count}件の支払を半年毎",
+    "payto.mandate.frequency.yearly": "%{count}件の支払を毎年",
+    "payto.label.firstName": "口座名義人の名",
+    "payto.label.lastName": "口座名義人の姓",
+    "payto.await.waitForConfirmation": "承認待ち"
 }
\ No newline at end of file
diff --git a/packages/server/translations/ko-KR.json b/packages/server/translations/ko-KR.json
index 2cdbe796d5..5e11790efb 100644
--- a/packages/server/translations/ko-KR.json
+++ b/packages/server/translations/ko-KR.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "PayNow 은행 또는 결제 앱을 여세요.",
     "paynow.mobileViewInstruction.step3": "QR 코드 스캔 옵션을 선택하세요.",
     "paynow.mobileViewInstruction.step4": "QR 업로드 옵션으로 들어가 스크린샷을 선택하세요.",
-    "paynow.mobileViewInstruction.step5": "거래를 완료하세요."
+    "paynow.mobileViewInstruction.step5": "거래를 완료하세요.",
+    "payto.payid.description": "Payto 계정에 연결된 PayID와 계정 세부 정보를 입력하세요.",
+    "payto.payid.label.identifier": "식별자",
+    "payto.payid.label.orgid": "조직 ID",
+    "payto.payid.option.phone": "휴대폰",
+    "payto.payid.option.email": "이메일",
+    "payto.payid.option.orgid": "조직 ID",
+    "payto.bsb.description": "계속하려면 계정에 연결된 은행 계좌 번호와 은행 지점을 입력하세요.",
+    "payto.bsb.label.bankAccountNumber": "계좌 번호",
+    "payto.instructions.steps": "PayTo 뱅킹 앱에 로그인하세요@PayTo 이용 약관을 승인하세요@결제 조건을 승인하세요@거래를 완료하세요",
+    "payto.confirmPayment": "구매해 주셔서 감사드리며, 아래 안내에 따라 결제를 완료하세요.",
+    "payto.mandate.amount.label": "금액",
+    "payto.mandate.frequency.label": "빈도",
+    "payto.mandate.remarks.label": "설명",
+    "payto.mandate.startsAt.label": "첫 번째 결제 날짜",
+    "payto.mandate.endsAt.label": "종료일",
+    "payto.mandate.payee.label": "수취인",
+    "payto.mandate.amount.max": "거래당 최대 %{amount}",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count}건",
+    "payto.mandate.frequency.daily": "일별 결제 %{count}건",
+    "payto.mandate.frequency.weekly": "주별 결제 %{count}건",
+    "payto.mandate.frequency.biWeekly": "2주마다 결제 %{count}건",
+    "payto.mandate.frequency.monthly": "월별 결제 %{count}건",
+    "payto.mandate.frequency.quarterly": "분기별 결제 %{count}건",
+    "payto.mandate.frequency.halfYearly": "반년마다 결제 %{count}건",
+    "payto.mandate.frequency.yearly": "연간 결제 %{count}건",
+    "payto.label.firstName": "계좌 소유자 이름(이름)",
+    "payto.label.lastName": "계좌 소유자 성",
+    "payto.await.waitForConfirmation": "승인 대기 중"
 }
\ No newline at end of file
diff --git a/packages/server/translations/lt-LT.json b/packages/server/translations/lt-LT.json
index a36b770469..45881a5bd0 100644
--- a/packages/server/translations/lt-LT.json
+++ b/packages/server/translations/lt-LT.json
@@ -324,5 +324,34 @@
     "paynow.mobileViewInstruction.step2": "Atidarykite „PayNow“ banko arba mokėjimo programėlę.",
     "paynow.mobileViewInstruction.step3": "Pasirinkite QR kodo nuskaitymo parinktį.",
     "paynow.mobileViewInstruction.step4": "Pasirinkite parinktį įkelti QR kodą ir pasirinkite ekrano nuotrauką.",
-    "paynow.mobileViewInstruction.step5": "Užbaikite operaciją."
+    "paynow.mobileViewInstruction.step5": "Užbaikite operaciją.",
+    "payto.payid.description": "Įveskite „PayID“ ir sąskaitos duomenis, susietus su jūsų „Payto“ sąskaita.",
+    "payto.payid.label.identifier": "Identifikatorius",
+    "payto.payid.label.orgid": "Organizacijos identifikatorius",
+    "payto.payid.option.phone": "Mobilusis telefonas",
+    "payto.payid.option.email": "El. paštas",
+    "payto.payid.option.orgid": "Organizacijos ID",
+    "payto.bsb.description": "Įveskite banko sąskaitos numerį ir banko filialo kodą, susietą su jūsų sąskaita, kad galėtumėte tęsti",
+    "payto.bsb.label.bankAccountNumber": "Banko sąskaitos numeris",
+    "payto.instructions.steps": "Prisijunkite prie „PayTo“ banko programėlės@Autorizuokite „PayTo“ sutartį@Patvirtinkite mokėjimo sąlygas@Užbaikite operaciją",
+    "payto.confirmPayment": "Dėkojame už pirkinį, atlikite mokėjimą vadovaudamiesi toliau pateiktais nurodymais.",
+    "payto.mandate.amount.label": "Suma",
+    "payto.mandate.frequency.label": "Dažnis",
+    "payto.mandate.remarks.label": "Aprašymas",
+    "payto.mandate.startsAt.label": "Pirmojo mokėjimo data",
+    "payto.mandate.endsAt.label": "Pabaigos data",
+    "payto.mandate.payee.label": "Gavėjas",
+    "payto.mandate.amount.max": "Iki %{amount} vienai operacijai",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} kartas (-ai; -ų)",
+    "payto.mandate.frequency.daily": "%{count} mokėjimas (-ai; -ų) kasdien",
+    "payto.mandate.frequency.weekly": "%{count} mokėjimas (-ai; -ų) kas savaitę",
+    "payto.mandate.frequency.biWeekly": "%{count} mokėjimas (-ai; -ų) kas dvi savaites",
+    "payto.mandate.frequency.monthly": "%{count} mokėjimas (-ai; -ų) kas mėnesį",
+    "payto.mandate.frequency.quarterly": "%{count} mokėjimas (-ai; -ų) kas ketvirtį",
+    "payto.mandate.frequency.halfYearly": "%{count} mokėjimas (-ai; -ų) kas pusmetį",
+    "payto.mandate.frequency.yearly": "%{count} mokėjimas (-ai; -ų) kas metus",
+    "payto.label.firstName": "Sąskaitos turėtojo vardas",
+    "payto.label.lastName": "Sąskaitos turėtojo pavardė",
+    "payto.await.waitForConfirmation": "Laukiama jūsų patvirtinimo"
 }
\ No newline at end of file
diff --git a/packages/server/translations/lv-LV.json b/packages/server/translations/lv-LV.json
index b9bfd9ea3f..b3f290e84e 100644
--- a/packages/server/translations/lv-LV.json
+++ b/packages/server/translations/lv-LV.json
@@ -324,5 +324,34 @@
     "paynow.mobileViewInstruction.step2": "Atveriet PayNow banku vai maksājumu lietotni.",
     "paynow.mobileViewInstruction.step3": "Atlasiet opciju skenēt QR kodu.",
     "paynow.mobileViewInstruction.step4": "Izvēlieties opciju augšupielādēt QR kodu un veiciet ekrānuzņēmumu.",
-    "paynow.mobileViewInstruction.step5": "Pabeidziet darījumu."
+    "paynow.mobileViewInstruction.step5": "Pabeidziet darījumu.",
+    "payto.payid.description": "Ievadiet PayID un konta informāciju, kas ir savienota ar Jūsu Payto kontu.",
+    "payto.payid.label.identifier": "Identifikators",
+    "payto.payid.label.orgid": "Organizācijas ID",
+    "payto.payid.option.phone": "Mobilais",
+    "payto.payid.option.email": "E-pasts",
+    "payto.payid.option.orgid": "Organizācijas ID",
+    "payto.bsb.description": "Ievadiet bankas konta numuru un bankas valsts filiāli, kas ir saistīta ar jūsu kontu, lai turpinātu",
+    "payto.bsb.label.bankAccountNumber": "Bankas konta numurs",
+    "payto.instructions.steps": "Pierakstieties PayTo bankas lietotnē@Autorizējiet PayTo līgumu@Apstipriniet maksājuma noteikumus@Pabeidziet transakciju.",
+    "payto.confirmPayment": "Paldies par pirkumu, lūdzu, pabeidziet maksājumu, ievērojot tālāk sniegtos norādījumus.",
+    "payto.mandate.amount.label": "Summa",
+    "payto.mandate.frequency.label": "Biežums",
+    "payto.mandate.remarks.label": "Apraksts",
+    "payto.mandate.startsAt.label": "Pirmā maksājuma datums",
+    "payto.mandate.endsAt.label": "Beigu datums",
+    "payto.mandate.payee.label": "Saņēmējs",
+    "payto.mandate.amount.max": "Līdz %{amount} par vienu darījumu",
+    "payto.mandate.frequency.adhoc-no-count": "Speciāli",
+    "payto.mandate.frequency.adhoc": "%{count} reize(s)",
+    "payto.mandate.frequency.daily": "%{count} maksājums(-i) katru dienu",
+    "payto.mandate.frequency.weekly": "%{count} maksājums(-i) nedēļā",
+    "payto.mandate.frequency.biWeekly": "%{count} maksājums(-i) ik pēc divām nedēļām",
+    "payto.mandate.frequency.monthly": "%{count} maksājums(-i) mēnesī",
+    "payto.mandate.frequency.quarterly": "%{count} maksājums(-i) ceturksnī",
+    "payto.mandate.frequency.halfYearly": "%{count} maksājums(-i) divreiz gadā",
+    "payto.mandate.frequency.yearly": "%{count} maksājums(-i) gadā",
+    "payto.label.firstName": "Konta īpašnieka vārds",
+    "payto.label.lastName": "Konta īpašnieka uzvārds",
+    "payto.await.waitForConfirmation": "Gaida jūsu apstiprinājumu"
 }
\ No newline at end of file
diff --git a/packages/server/translations/nl-NL.json b/packages/server/translations/nl-NL.json
index 692dee1f4e..8d3282f255 100644
--- a/packages/server/translations/nl-NL.json
+++ b/packages/server/translations/nl-NL.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "Open de bank- of betaalapp van PayNow.",
     "paynow.mobileViewInstruction.step3": "Selecteer de optie om een QR-code te scannen.",
     "paynow.mobileViewInstruction.step4": "Kies de optie om een QR-code te uploaden en selecteer de schermafbeelding.",
-    "paynow.mobileViewInstruction.step5": "Voltooi de transactie."
+    "paynow.mobileViewInstruction.step5": "Voltooi de transactie.",
+    "payto.payid.description": "Voer de PayID en accountgegevens in die gekoppeld zijn aan uw Payto-account.",
+    "payto.payid.label.identifier": "Identificator",
+    "payto.payid.label.orgid": "Organisatie-ID",
+    "payto.payid.option.phone": "Mobiele telefoon",
+    "payto.payid.option.email": "E-mail",
+    "payto.payid.option.orgid": "Organisatie-ID",
+    "payto.bsb.description": "Voer het bankrekeningnummer en BSB in die aan uw rekening zijn gekoppeld om door te gaan",
+    "payto.bsb.label.bankAccountNumber": "Bankrekeningnummer",
+    "payto.instructions.steps": "Log in op uw PayTo-bankapp@Autoriseer de PayTo-overeenkomst@Keur de betalingsvoorwaarden goed@Voltooi de transactie",
+    "payto.confirmPayment": "Bedankt voor uw aankoop. Volg de onderstaande instructies om uw betaling te voltooien.",
+    "payto.mandate.amount.label": "Bedrag",
+    "payto.mandate.frequency.label": "Frequentie",
+    "payto.mandate.remarks.label": "Beschrijving",
+    "payto.mandate.startsAt.label": "Eerste betalingsdatum",
+    "payto.mandate.endsAt.label": "Einddatum",
+    "payto.mandate.payee.label": "Begunstigde",
+    "payto.mandate.amount.max": "Tot %{amount} per transactie toegestaan",
+    "payto.mandate.frequency.adhoc-no-count": "Ad hoc",
+    "payto.mandate.frequency.adhoc": "%{count} keer",
+    "payto.mandate.frequency.daily": "%{count} betaling(en) per dag",
+    "payto.mandate.frequency.weekly": "%{count} betaling(en) per week",
+    "payto.mandate.frequency.biWeekly": "%{count} betaling(en) om de twee weken",
+    "payto.mandate.frequency.monthly": "%{count} betaling(en) per maand",
+    "payto.mandate.frequency.quarterly": "%{count} betaling(en) per kwartaal",
+    "payto.mandate.frequency.halfYearly": "%{count} betaling(en) per half jaar",
+    "payto.mandate.frequency.yearly": "%{count} betaling(en) per jaar",
+    "payto.label.firstName": "Voornaam rekeninghouder",
+    "payto.label.lastName": "Achternaam rekeninghouder",
+    "payto.await.waitForConfirmation": "In afwachting van uw goedkeuring"
 }
\ No newline at end of file
diff --git a/packages/server/translations/no-NO.json b/packages/server/translations/no-NO.json
index d80c3f0c45..9da87e4be1 100644
--- a/packages/server/translations/no-NO.json
+++ b/packages/server/translations/no-NO.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "Åpne PayNow-banken eller betalingsappen.",
     "paynow.mobileViewInstruction.step3": "Velg alternativet å skanne en QR-kode.",
     "paynow.mobileViewInstruction.step4": "Velg alternativet å laste opp en QR-kode og velge skjermbildet.",
-    "paynow.mobileViewInstruction.step5": "Fullfør transaksjonen."
+    "paynow.mobileViewInstruction.step5": "Fullfør transaksjonen.",
+    "payto.payid.description": "Skriv inn PayID og kontoopplysningene som er tilknyttet PayTo-kontoen din.",
+    "payto.payid.label.identifier": "Identifikator",
+    "payto.payid.label.orgid": "Organisasjons-ID",
+    "payto.payid.option.phone": "Mobil",
+    "payto.payid.option.email": "E-postadresse",
+    "payto.payid.option.orgid": "Organisasjons-ID",
+    "payto.bsb.description": "Skriv inn bankkontonummeret og Bank State Branch som er knyttet til kontoen din, for å fortsette",
+    "payto.bsb.label.bankAccountNumber": "Bankkontonummer",
+    "payto.instructions.steps": "Logg inn i PayTo-bankappen@Autoriser PayTo-avtalen@Godkjenn betalingsvilkårene@Fullfør transaksjonen",
+    "payto.confirmPayment": "Takk for kjøpet. Følg instruksjonene nedenfor for å fullføre betalingen.",
+    "payto.mandate.amount.label": "Beløp",
+    "payto.mandate.frequency.label": "Hyppighet",
+    "payto.mandate.remarks.label": "Beskrivelse",
+    "payto.mandate.startsAt.label": "Første betalingsdato",
+    "payto.mandate.endsAt.label": "Sluttdato",
+    "payto.mandate.payee.label": "Betalingsmottaker",
+    "payto.mandate.amount.max": "Opptil %{amount} per transaksjon",
+    "payto.mandate.frequency.adhoc-no-count": "Ad hoc",
+    "payto.mandate.frequency.adhoc": "%{count} gang(er)",
+    "payto.mandate.frequency.daily": "%{count} betaling(er) per dag",
+    "payto.mandate.frequency.weekly": "%{count} betaling(er) per uke",
+    "payto.mandate.frequency.biWeekly": "%{count} betaling(er) annenhver uke",
+    "payto.mandate.frequency.monthly": "%{count} betaling(er) per måned",
+    "payto.mandate.frequency.quarterly": "%{count} betaling(er) per kvartal",
+    "payto.mandate.frequency.halfYearly": "%{count} betaling(er) per halvår",
+    "payto.mandate.frequency.yearly": "%{count} betaling(er) per år",
+    "payto.label.firstName": "Kontoinnehaverens fornavn",
+    "payto.label.lastName": "Kontoinnehaverens etternavn",
+    "payto.await.waitForConfirmation": "Venter på godkjenningen din"
 }
\ No newline at end of file
diff --git a/packages/server/translations/pl-PL.json b/packages/server/translations/pl-PL.json
index 4a31d7d4bc..ca0758e5d5 100644
--- a/packages/server/translations/pl-PL.json
+++ b/packages/server/translations/pl-PL.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "Otwórz aplikację bankową lub płatniczą PayNow.",
     "paynow.mobileViewInstruction.step3": "Wybierz opcję zeskanowania kodu QR.",
     "paynow.mobileViewInstruction.step4": "Wybierz opcję przesłania kodu QR i wybierz zrzut ekranu.",
-    "paynow.mobileViewInstruction.step5": "Sfinalizuj transakcję."
+    "paynow.mobileViewInstruction.step5": "Sfinalizuj transakcję.",
+    "payto.payid.description": "Wprowadź PayID i dane konta powiązane z Twoim kontem Payto.",
+    "payto.payid.label.identifier": "Identyfikator",
+    "payto.payid.label.orgid": "Identyfikator organizacji",
+    "payto.payid.option.phone": "Telefon komórkowy",
+    "payto.payid.option.email": "E-mail",
+    "payto.payid.option.orgid": "Identyfikator organizacji",
+    "payto.bsb.description": "Aby kontynuować, wprowadź numer konta bankowego i oddział banku, który jest powiązany z Twoim kontem",
+    "payto.bsb.label.bankAccountNumber": "Numer rachunku",
+    "payto.instructions.steps": "Zaloguj się do aplikacji bankowej PayTo@Autoryzuj umowę PayTo@Zatwierdź warunki płatności@Dokończ transakcję",
+    "payto.confirmPayment": "Dziękujemy za zakup, dokończ płatność, postępując zgodnie z poniższymi instrukcjami.",
+    "payto.mandate.amount.label": "Kwota",
+    "payto.mandate.frequency.label": "Częstotliwość",
+    "payto.mandate.remarks.label": "Opis",
+    "payto.mandate.startsAt.label": "Data pierwszej płatności",
+    "payto.mandate.endsAt.label": "Data zakończenia",
+    "payto.mandate.payee.label": "Odbiorca",
+    "payto.mandate.amount.max": "Do %{amount} na transakcję",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} raz(y)",
+    "payto.mandate.frequency.daily": "%{count} płatności dziennie",
+    "payto.mandate.frequency.weekly": "%{count} płatności tygodniowo",
+    "payto.mandate.frequency.biWeekly": "%{count} płatności co dwa tygodnie",
+    "payto.mandate.frequency.monthly": "%{count} płatności miesięcznie",
+    "payto.mandate.frequency.quarterly": "%{count} płatności kwartalnie",
+    "payto.mandate.frequency.halfYearly": "%{count} płatności co pół roku",
+    "payto.mandate.frequency.yearly": "%{count} płatności rocznie",
+    "payto.label.firstName": "Imię posiadacza rachunku",
+    "payto.label.lastName": "Nazwisko posiadacza rachunku",
+    "payto.await.waitForConfirmation": "Oczekiwanie na Twoją zgodę"
 }
\ No newline at end of file
diff --git a/packages/server/translations/pt-BR.json b/packages/server/translations/pt-BR.json
index 7ce2386a10..3a351f6379 100644
--- a/packages/server/translations/pt-BR.json
+++ b/packages/server/translations/pt-BR.json
@@ -323,5 +323,34 @@
     "paynow.mobileViewInstruction.step2": "Abra o banco PayNow ou o aplicativo de pagamento.",
     "paynow.mobileViewInstruction.step3": "Selecione a opção para escanear um código QR.",
     "paynow.mobileViewInstruction.step4": "Escolha a opção para carregar um QR e selecione a captura de tela.",
-    "paynow.mobileViewInstruction.step5": "Conclua a transação."
+    "paynow.mobileViewInstruction.step5": "Conclua a transação.",
+    "payto.payid.description": "Digite o PayID e as informações da conta associados à sua conta Payto.",
+    "payto.payid.label.identifier": "Identificador",
+    "payto.payid.label.orgid": "ID da organização",
+    "payto.payid.option.phone": "Dispositivo móvel",
+    "payto.payid.option.email": "E-mail",
+    "payto.payid.option.orgid": "ID da organização",
+    "payto.bsb.description": "Informe o número da conta bancária e a agência bancária estadual associada à sua conta para continuar",
+    "payto.bsb.label.bankAccountNumber": "Número da conta bancária",
+    "payto.instructions.steps": "Faça login no seu aplicativo bancário PayTo para@Autorizar o acordo PayTo@Aprovar os termos de pagamentos@Concluir a transação",
+    "payto.confirmPayment": "Obrigado pela sua compra! Siga as instruções abaixo para concluir o pagamento.",
+    "payto.mandate.amount.label": "Valor",
+    "payto.mandate.frequency.label": "Frequência",
+    "payto.mandate.remarks.label": "Descrição",
+    "payto.mandate.startsAt.label": "Primeira data de pagamento",
+    "payto.mandate.endsAt.label": "Data de término",
+    "payto.mandate.payee.label": "Beneficiário",
+    "payto.mandate.amount.max": "Até %{amount} por transação",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} vezes",
+    "payto.mandate.frequency.daily": "%{count} pagamento(s) por dia",
+    "payto.mandate.frequency.weekly": "%{count} pagamento(s) por semana",
+    "payto.mandate.frequency.biWeekly": "%{count} pagamento(s) por quinzena",
+    "payto.mandate.frequency.monthly": "%{count} pagamento(s) por mês",
+    "payto.mandate.frequency.quarterly": "%{count} pagamento(s) por trimestre",
+    "payto.mandate.frequency.halfYearly": "%{count} pagamento(s) por biênio",
+    "payto.mandate.frequency.yearly": "%{count} pagamento(s) por ano",
+    "payto.label.firstName": "Nome do titular da conta",
+    "payto.label.lastName": "Sobrenome do titular da conta",
+    "payto.await.waitForConfirmation": "Aguardando sua aprovação"
 }
\ No newline at end of file
diff --git a/packages/server/translations/pt-PT.json b/packages/server/translations/pt-PT.json
index ab54f80830..7a274b192a 100644
--- a/packages/server/translations/pt-PT.json
+++ b/packages/server/translations/pt-PT.json
@@ -324,5 +324,34 @@
     "paynow.mobileViewInstruction.step2": "Abra a aplicação bancária ou de pagamento da PayNow.",
     "paynow.mobileViewInstruction.step3": "Selecione a opção para ler um código QR.",
     "paynow.mobileViewInstruction.step4": "Escolha a opção para carregar um QR e selecione a captura de ecrã.",
-    "paynow.mobileViewInstruction.step5": "Conclua a transação."
+    "paynow.mobileViewInstruction.step5": "Conclua a transação.",
+    "payto.payid.description": "Introduza o PayID e os dados da conta que estão ligados à sua conta Payto.",
+    "payto.payid.label.identifier": "Identificador",
+    "payto.payid.label.orgid": "ID da Organização",
+    "payto.payid.option.phone": "Celular",
+    "payto.payid.option.email": "E-mail",
+    "payto.payid.option.orgid": "ID da Organização",
+    "payto.bsb.description": "Para continuar, insira o número da conta e a agência bancária associadas à sua conta",
+    "payto.bsb.label.bankAccountNumber": "Número da conta bancária",
+    "payto.instructions.steps": "Inicie sessão na sua aplicação bancária PayTo@Autorize o contrato PayTo@Aprove os termos de pagamento@Conclua a transação",
+    "payto.confirmPayment": "Agradecemos a sua compra, conclua o pagamento ao seguir as instruções abaixo.",
+    "payto.mandate.amount.label": "Valor",
+    "payto.mandate.frequency.label": "Frequência",
+    "payto.mandate.remarks.label": "Descrição",
+    "payto.mandate.startsAt.label": "Data do primeiro pagamento",
+    "payto.mandate.endsAt.label": "Data de fim",
+    "payto.mandate.payee.label": "Beneficiário",
+    "payto.mandate.amount.max": "Até %{amount} por transação",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} vez(es)",
+    "payto.mandate.frequency.daily": "%{count} pagamentos diários",
+    "payto.mandate.frequency.weekly": "%{count} pagamentos semanais",
+    "payto.mandate.frequency.biWeekly": "%{count} pagamentos quinzenais",
+    "payto.mandate.frequency.monthly": "%{count} pagamentos mensais",
+    "payto.mandate.frequency.quarterly": "%{count} pagamentos trimestrais",
+    "payto.mandate.frequency.halfYearly": "%{count} pagamentos semestrais",
+    "payto.mandate.frequency.yearly": "%{count} pagamentos anuais",
+    "payto.label.firstName": "Nome próprio do titular da conta",
+    "payto.label.lastName": "Sobrenome do titular da conta",
+    "payto.await.waitForConfirmation": "Aguardando sua aprovação"
 }
\ No newline at end of file
diff --git a/packages/server/translations/ro-RO.json b/packages/server/translations/ro-RO.json
index 733266aecd..32c1a0cf2a 100644
--- a/packages/server/translations/ro-RO.json
+++ b/packages/server/translations/ro-RO.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "Deschideți aplicația bancară sau de plată PayNow.",
     "paynow.mobileViewInstruction.step3": "Selectați opțiunea pentru a scana un cod QR.",
     "paynow.mobileViewInstruction.step4": "Alegeți opțiunea de a încărca un QR și selectați captura de ecran.",
-    "paynow.mobileViewInstruction.step5": "Finalizați tranzacția."
+    "paynow.mobileViewInstruction.step5": "Finalizați tranzacția.",
+    "payto.payid.description": "Completați PayID și detaliile contului care sunt conectate la contul dvs. Payto.",
+    "payto.payid.label.identifier": "Identificator",
+    "payto.payid.label.orgid": "ID organizație",
+    "payto.payid.option.phone": "Mobil",
+    "payto.payid.option.email": "E-mail",
+    "payto.payid.option.orgid": "ID organizație",
+    "payto.bsb.description": "Pentru a continua, introduceți numărul contului bancar și sucursala băncii de stat care este asociată cu contul dvs.",
+    "payto.bsb.label.bankAccountNumber": "Numărul contului bancar",
+    "payto.instructions.steps": "Conectați-vă la aplicația dvs. bancară PayTo. Acceptați acordul PayTo. Aprobați condițiile de plată. Finalizați tranzacția.",
+    "payto.confirmPayment": "Vă mulțumim pentru achiziție, finalizați plata urmând instrucțiunile de mai jos.",
+    "payto.mandate.amount.label": "Sumă",
+    "payto.mandate.frequency.label": "Frecvență",
+    "payto.mandate.remarks.label": "Descriere",
+    "payto.mandate.startsAt.label": "Data primei plăți",
+    "payto.mandate.endsAt.label": "Data de sfârșit",
+    "payto.mandate.payee.label": "Beneficiarul plății",
+    "payto.mandate.amount.max": "Până la %{amount} per tranzacție",
+    "payto.mandate.frequency.adhoc-no-count": "Ad-hoc",
+    "payto.mandate.frequency.adhoc": "%{count} dată/dăți",
+    "payto.mandate.frequency.daily": "%{count} plată/plăți zilnice",
+    "payto.mandate.frequency.weekly": "%{count} plată/plăți săptămânale",
+    "payto.mandate.frequency.biWeekly": "%{count} plată/plăți bilunare",
+    "payto.mandate.frequency.monthly": "%{count} plată/plăți lunare",
+    "payto.mandate.frequency.quarterly": "%{count} plată/plăți trimestriale",
+    "payto.mandate.frequency.halfYearly": "%{count} plată/plăți semestriale",
+    "payto.mandate.frequency.yearly": "%{count} plată/plăți anuale",
+    "payto.label.firstName": "Prenumele titularului de cont",
+    "payto.label.lastName": "Numele de familie al titularului de cont",
+    "payto.await.waitForConfirmation": "Se așteaptă aprobarea dvs."
 }
\ No newline at end of file
diff --git a/packages/server/translations/ru-RU.json b/packages/server/translations/ru-RU.json
index 0cf75394fa..3dd0aba1bb 100644
--- a/packages/server/translations/ru-RU.json
+++ b/packages/server/translations/ru-RU.json
@@ -320,5 +320,34 @@
     "paynow.mobileViewInstruction.step2": "Откройте банковское или платежное приложение PayNow.",
     "paynow.mobileViewInstruction.step3": "Выберите опцию сканирования QR-кода.",
     "paynow.mobileViewInstruction.step4": "Выберите опцию загрузки QR-кода и скриншот.",
-    "paynow.mobileViewInstruction.step5": "Завершите транзакцию."
+    "paynow.mobileViewInstruction.step5": "Завершите транзакцию.",
+    "payto.payid.description": "Введите PayID и данные счета, которые связаны с вашей учетной записью Payto.",
+    "payto.payid.label.identifier": "Идентификатор",
+    "payto.payid.label.orgid": "Идентификатор организации",
+    "payto.payid.option.phone": "Мобильный",
+    "payto.payid.option.email": "Эл. почта",
+    "payto.payid.option.orgid": "Идентификатор организации",
+    "payto.bsb.description": "Введите номер банковского счета и отделение банка, связанное с вашим счетом, чтобы продолжить",
+    "payto.bsb.label.bankAccountNumber": "Номер банковского счета",
+    "payto.instructions.steps": "Войдите в банковское приложение PayTo@Подпишите соглашение PayTo@Одобрите условия оплаты@Завершите транзакцию",
+    "payto.confirmPayment": "Благодарим за покупку. Завершите оплату, следуя инструкциям ниже.",
+    "payto.mandate.amount.label": "Сумма",
+    "payto.mandate.frequency.label": "Частота",
+    "payto.mandate.remarks.label": "Описание",
+    "payto.mandate.startsAt.label": "Дата первого платежа",
+    "payto.mandate.endsAt.label": "Дата окончания",
+    "payto.mandate.payee.label": "Получатель",
+    "payto.mandate.amount.max": "До %{amount} на одну транзакцию",
+    "payto.mandate.frequency.adhoc-no-count": "По необходимости",
+    "payto.mandate.frequency.adhoc": "%{count} раз(а)",
+    "payto.mandate.frequency.daily": "Платежей за день: %{count}",
+    "payto.mandate.frequency.weekly": "Платежей за неделю: %{count}",
+    "payto.mandate.frequency.biWeekly": "Платежей за две недели: %{count}",
+    "payto.mandate.frequency.monthly": "Платежей за месяц %{count}",
+    "payto.mandate.frequency.quarterly": "Платежей за квартал: %{count}",
+    "payto.mandate.frequency.halfYearly": "Платежей за полгода: %{count}",
+    "payto.mandate.frequency.yearly": "Платежей за год: %{count}",
+    "payto.label.firstName": "Имя владельца счета",
+    "payto.label.lastName": "Фамилия владельца счета",
+    "payto.await.waitForConfirmation": "В ожидании вашего одобрения"
 }
\ No newline at end of file
diff --git a/packages/server/translations/sk-SK.json b/packages/server/translations/sk-SK.json
index a319f80ed4..f9a041a723 100644
--- a/packages/server/translations/sk-SK.json
+++ b/packages/server/translations/sk-SK.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "Otvorte banku alebo platobnú aplikáciu PayNow.",
     "paynow.mobileViewInstruction.step3": "Vyberte možnosť na nasnímanie QR kódu.",
     "paynow.mobileViewInstruction.step4": "Vyberte možnosť nahrať QR kód a vyberte snímku obrazovky.",
-    "paynow.mobileViewInstruction.step5": "Dokončite transakciu."
+    "paynow.mobileViewInstruction.step5": "Dokončite transakciu.",
+    "payto.payid.description": "Zadajte PayID a údaje o účte, ktoré sú pripojené k vášmu účtu Payto.",
+    "payto.payid.label.identifier": "Identifikátor",
+    "payto.payid.label.orgid": "ID organizácie",
+    "payto.payid.option.phone": "Mobilný telefón",
+    "payto.payid.option.email": "E-mail",
+    "payto.payid.option.orgid": "ID organizácie",
+    "payto.bsb.description": "Pokračujte zadaním čísla bankového účtu a pobočky banky, ktorá je pripojená k vášmu účtu",
+    "payto.bsb.label.bankAccountNumber": "Číslo bankového účtu",
+    "payto.instructions.steps": "Prihláste sa do svojej bankovej aplikácie PayTo@Autorizujte zmluvu s PayTo@Schváľte podmienky platby@Dokončite transakciu",
+    "payto.confirmPayment": "Ďakujeme vám za nákup, dokončite platbu podľa nižšie uvedených pokynov.",
+    "payto.mandate.amount.label": "Čiastka",
+    "payto.mandate.frequency.label": "Frekvencia",
+    "payto.mandate.remarks.label": "Opis",
+    "payto.mandate.startsAt.label": "Dátum prvej platby",
+    "payto.mandate.endsAt.label": "Dátum ukončenia",
+    "payto.mandate.payee.label": "Príjemca",
+    "payto.mandate.amount.max": "Maximálne %{amount} na jednu transakciu",
+    "payto.mandate.frequency.adhoc-no-count": "Ad Hoc",
+    "payto.mandate.frequency.adhoc": "%{count} krát",
+    "payto.mandate.frequency.daily": "%{count} platba(y/ieb) denne",
+    "payto.mandate.frequency.weekly": "%{count} platba(y/ieb) týždenne",
+    "payto.mandate.frequency.biWeekly": "%{count} platba(y/ieb) každé dva týždne",
+    "payto.mandate.frequency.monthly": "%{count} platba(y/ieb) mesačne",
+    "payto.mandate.frequency.quarterly": "%{count} platba(y/ieb) štvrťročne",
+    "payto.mandate.frequency.halfYearly": "%{count} platba(y/ieb) polročne",
+    "payto.mandate.frequency.yearly": "%{count} platba(y/ieb) ročne",
+    "payto.label.firstName": "Krstné meno majiteľa účtu",
+    "payto.label.lastName": "Priezvisko majiteľa účtu",
+    "payto.await.waitForConfirmation": "Čakáme na váš súhlas"
 }
\ No newline at end of file
diff --git a/packages/server/translations/sl-SI.json b/packages/server/translations/sl-SI.json
index 6fc565d231..c4211a0848 100644
--- a/packages/server/translations/sl-SI.json
+++ b/packages/server/translations/sl-SI.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "Odprite banko PayNow ali aplikacijo za plačevanje.",
     "paynow.mobileViewInstruction.step3": "Izberite možnost za skeniranje kode QR.",
     "paynow.mobileViewInstruction.step4": "Izberite možnost za nalaganje QR in izberite posnetek zaslona.",
-    "paynow.mobileViewInstruction.step5": "Zaključite transakcijo."
+    "paynow.mobileViewInstruction.step5": "Zaključite transakcijo.",
+    "payto.payid.description": "Vnesite PayID in podrobnosti o računu, ki so povezani z vašim računom PayTo.",
+    "payto.payid.label.identifier": "Identifikator",
+    "payto.payid.label.orgid": "ID organizacije",
+    "payto.payid.option.phone": "Mobilni telefon",
+    "payto.payid.option.email": "E-pošta",
+    "payto.payid.option.orgid": "ID organizacije",
+    "payto.bsb.description": "Za nadaljevanje vnesite številko bančnega računa in podružnico banke, ki sta povezani z vašim računom",
+    "payto.bsb.label.bankAccountNumber": "Številka bančnega računa",
+    "payto.instructions.steps": "Prijavite se v bančno aplikacijo PayTo@Sprejmite pogodbo PayTo@Potrdite plačilne pogoje@Zaključite transakcijo",
+    "payto.confirmPayment": "Zahvaljujemo se vam za nakup. Izvedite plačilo po spodnjih navodilih.",
+    "payto.mandate.amount.label": "Znesek",
+    "payto.mandate.frequency.label": "Pogostost",
+    "payto.mandate.remarks.label": "Opis",
+    "payto.mandate.startsAt.label": "Datum prvega plačila",
+    "payto.mandate.endsAt.label": "Končni datum",
+    "payto.mandate.payee.label": "Prejemnik plačila",
+    "payto.mandate.amount.max": "Do %{amount} na transakcijo",
+    "payto.mandate.frequency.adhoc-no-count": "Enkratno plačilo",
+    "payto.mandate.frequency.adhoc": "%{count}-krat",
+    "payto.mandate.frequency.daily": "Št. plačil na dan: %{count}",
+    "payto.mandate.frequency.weekly": "Št. plačil na teden: %{count}",
+    "payto.mandate.frequency.biWeekly": "Št. plačil na 14 dni: %{count}",
+    "payto.mandate.frequency.monthly": "Št. plačil na mesec: %{count}",
+    "payto.mandate.frequency.quarterly": "Št. plačil na četrtletje: %{count}",
+    "payto.mandate.frequency.halfYearly": "Št. plačil na polletje: %{count}",
+    "payto.mandate.frequency.yearly": "Št. plačil na leto: %{count}",
+    "payto.label.firstName": "Ime imetnika računa",
+    "payto.label.lastName": "Priimek imetnika računa",
+    "payto.await.waitForConfirmation": "Čakanje na vašo odobritev"
 }
\ No newline at end of file
diff --git a/packages/server/translations/sv-SE.json b/packages/server/translations/sv-SE.json
index f79eab59d9..e63ca5304c 100644
--- a/packages/server/translations/sv-SE.json
+++ b/packages/server/translations/sv-SE.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "Öppna PayNow-banken eller betalningsappen.",
     "paynow.mobileViewInstruction.step3": "Välj alternativet för att skanna en QR-kod.",
     "paynow.mobileViewInstruction.step4": "Välj alternativet att ladda upp en QR och välj skärmdumpen.",
-    "paynow.mobileViewInstruction.step5": "Slutför transaktionen."
+    "paynow.mobileViewInstruction.step5": "Slutför transaktionen.",
+    "payto.payid.description": "Ange PayID och kontouppgifter för Payto-kontot.",
+    "payto.payid.label.identifier": "Identifierare",
+    "payto.payid.label.orgid": "Organisations-id",
+    "payto.payid.option.phone": "Mobil",
+    "payto.payid.option.email": "E-postadress",
+    "payto.payid.option.orgid": "Organisations-id",
+    "payto.bsb.description": "Ange bankkontonumret och det bankkontor som är kopplat till ditt konto för att fortsätta",
+    "payto.bsb.label.bankAccountNumber": "Bankkontonummer",
+    "payto.instructions.steps": "Logga in på din PayTo-bankapp@Godkänn PayTo-avtalet@Godkänn betalningsvillkoren@Slutför transaktionen",
+    "payto.confirmPayment": "Tack för ditt köp. Slutför betalningen genom att följa instruktionerna nedan.",
+    "payto.mandate.amount.label": "Belopp",
+    "payto.mandate.frequency.label": "Frekvens",
+    "payto.mandate.remarks.label": "Beskrivning",
+    "payto.mandate.startsAt.label": "Första betalningsdatum",
+    "payto.mandate.endsAt.label": "Slutdatum",
+    "payto.mandate.payee.label": "Betalningsmottagare",
+    "payto.mandate.amount.max": "Upp till %{amount} per transaktion",
+    "payto.mandate.frequency.adhoc-no-count": "Ad hoc",
+    "payto.mandate.frequency.adhoc": "%{count} gång(er)",
+    "payto.mandate.frequency.daily": "%{count} betalning(ar) dagligen",
+    "payto.mandate.frequency.weekly": "%{count} betalning(ar) varje vecka",
+    "payto.mandate.frequency.biWeekly": "%{count} betalning(ar) varannan vecka",
+    "payto.mandate.frequency.monthly": "%{count} betalning(ar) i månaden",
+    "payto.mandate.frequency.quarterly": "%{count} betalning(ar) kvartalsvis",
+    "payto.mandate.frequency.halfYearly": "%{count} betalning(ar) halvårsvis",
+    "payto.mandate.frequency.yearly": "%{count} betalning(ar) om året",
+    "payto.label.firstName": "Kontoinnehavarens förnamn",
+    "payto.label.lastName": "Kontoinnehavarens efternamn",
+    "payto.await.waitForConfirmation": "Väntar på ditt godkännande"
 }
\ No newline at end of file
diff --git a/packages/server/translations/zh-CN.json b/packages/server/translations/zh-CN.json
index 215e396ecd..e26f6179d5 100644
--- a/packages/server/translations/zh-CN.json
+++ b/packages/server/translations/zh-CN.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "打开 PayNow 银行或支付应用程序。",
     "paynow.mobileViewInstruction.step3": "选择扫描二维码的选项。",
     "paynow.mobileViewInstruction.step4": "选择上传二维码选项并选择截图。",
-    "paynow.mobileViewInstruction.step5": "完成交易。"
+    "paynow.mobileViewInstruction.step5": "完成交易。",
+    "payto.payid.description": "请输入与您的 Payto 账户关联的 PayID 和账户详细信息。",
+    "payto.payid.label.identifier": "标识符",
+    "payto.payid.label.orgid": "组织 ID",
+    "payto.payid.option.phone": "移动设备",
+    "payto.payid.option.email": "电子邮件",
+    "payto.payid.option.orgid": "组织 ID",
+    "payto.bsb.description": "请输入银行账号和与您的账户关联的银行州分行以继续",
+    "payto.bsb.label.bankAccountNumber": "银行账号",
+    "payto.instructions.steps": "登录您的 PayTo 银行应用程序@授权 PayTo 协议@批准支付条款@完成交易",
+    "payto.confirmPayment": "感谢您的购买，请按照以下说明完成支付。",
+    "payto.mandate.amount.label": "金额",
+    "payto.mandate.frequency.label": "频率",
+    "payto.mandate.remarks.label": "描述",
+    "payto.mandate.startsAt.label": "首次支付日期",
+    "payto.mandate.endsAt.label": "结束日期",
+    "payto.mandate.payee.label": "收款人",
+    "payto.mandate.amount.max": "每笔交易的最大金额为 %{amount}",
+    "payto.mandate.frequency.adhoc-no-count": "临时",
+    "payto.mandate.frequency.adhoc": "%{count} 次",
+    "payto.mandate.frequency.daily": "每日 %{count} 笔付款",
+    "payto.mandate.frequency.weekly": "每周 %{count} 笔付款",
+    "payto.mandate.frequency.biWeekly": "每每两周 %{count} 笔付款",
+    "payto.mandate.frequency.monthly": "每月 %{count} 笔付款",
+    "payto.mandate.frequency.quarterly": "每季度 %{count} 笔付款",
+    "payto.mandate.frequency.halfYearly": "每每半年 %{count} 笔付款",
+    "payto.mandate.frequency.yearly": "每年 %{count} 笔付款",
+    "payto.label.firstName": "账户持有人名字",
+    "payto.label.lastName": "账户持有人姓氏",
+    "payto.await.waitForConfirmation": "等待您的批准…"
 }
\ No newline at end of file
diff --git a/packages/server/translations/zh-TW.json b/packages/server/translations/zh-TW.json
index 378159e0ce..68af07079f 100644
--- a/packages/server/translations/zh-TW.json
+++ b/packages/server/translations/zh-TW.json
@@ -322,5 +322,34 @@
     "paynow.mobileViewInstruction.step2": "開啟 PayNow 銀行或支付應用程式。",
     "paynow.mobileViewInstruction.step3": "選取掃描 QR 代碼的選項。",
     "paynow.mobileViewInstruction.step4": "選擇上傳 QR 代碼的選項並選取此螢幕擷取畫面。",
-    "paynow.mobileViewInstruction.step5": "完成此交易。"
+    "paynow.mobileViewInstruction.step5": "完成此交易。",
+    "payto.payid.description": "請輸入與 Payto 帳戶相連的 PayID 和帳戶詳情。",
+    "payto.payid.label.identifier": "識別碼",
+    "payto.payid.label.orgid": "組織 ID",
+    "payto.payid.option.phone": "手機",
+    "payto.payid.option.email": "電子郵件",
+    "payto.payid.option.orgid": "組織 ID",
+    "payto.bsb.description": "請輸入銀行帳號以及您帳戶的銀行分行代碼以繼續至下一步",
+    "payto.bsb.label.bankAccountNumber": "銀行帳戶號碼",
+    "payto.instructions.steps": "登入您的 PayTo 金融應用程式@授權《PayTo 協議》@同意《付款條款》@完成交易",
+    "payto.confirmPayment": "感謝您的購買，敬請依照以下的指示來完成付款。",
+    "payto.mandate.amount.label": "金額",
+    "payto.mandate.frequency.label": "頻率",
+    "payto.mandate.remarks.label": "說明",
+    "payto.mandate.startsAt.label": "首次付款日期",
+    "payto.mandate.endsAt.label": "結束日期",
+    "payto.mandate.payee.label": "受款人",
+    "payto.mandate.amount.max": "每筆交易的金額上限為 %{amount}",
+    "payto.mandate.frequency.adhoc-no-count": "隨選",
+    "payto.mandate.frequency.adhoc": "%{count} 次",
+    "payto.mandate.frequency.daily": "每日 %{count} 筆付款",
+    "payto.mandate.frequency.weekly": "%{count} 筆付款（每週）",
+    "payto.mandate.frequency.biWeekly": "每兩週 %{count} 筆付款",
+    "payto.mandate.frequency.monthly": "每月 %{count} 筆付款",
+    "payto.mandate.frequency.quarterly": "每季 %{count} 筆付款",
+    "payto.mandate.frequency.halfYearly": "每半年 %{count} 筆付款",
+    "payto.mandate.frequency.yearly": "每年 %{count} 筆付款",
+    "payto.label.firstName": "帳戶持有人名字",
+    "payto.label.lastName": "帳戶持有人的姓氏",
+    "payto.await.waitForConfirmation": "正在等待您的核准"
 }
\ No newline at end of file

From 2a7a63c70418c17f3a23ed62f54ff58d8eedeffe Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Thu, 13 Feb 2025 15:08:15 +0100
Subject: [PATCH 16/20] add changeset

---
 .changeset/silent-turtles-walk.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/silent-turtles-walk.md

diff --git a/.changeset/silent-turtles-walk.md b/.changeset/silent-turtles-walk.md
new file mode 100644
index 0000000000..543bf22035
--- /dev/null
+++ b/.changeset/silent-turtles-walk.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+Feature: New PayTo payment method

From f89583518dc8e8fb3f9f404df7850b265a0c5bae Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Thu, 13 Feb 2025 16:59:37 +0100
Subject: [PATCH 17/20] fix broken e2e

---
 packages/lib/.storybook/preview.tsx           |  12 +-
 .../lib/storybook/public/mockServiceWorker.js | 302 ------------------
 .../stories/components/PayTo.stories.tsx      |  24 +-
 3 files changed, 18 insertions(+), 320 deletions(-)
 delete mode 100644 packages/lib/storybook/public/mockServiceWorker.js

diff --git a/packages/lib/.storybook/preview.tsx b/packages/lib/.storybook/preview.tsx
index d210f21516..938ce76ffb 100644
--- a/packages/lib/.storybook/preview.tsx
+++ b/packages/lib/.storybook/preview.tsx
@@ -1,12 +1,12 @@
 import './main.css';
 import { Preview } from '@storybook/preact';
 import { DEFAULT_COUNTRY_CODE, DEFAULT_SHOPPER_LOCALE, DEFAULT_AMOUNT_VALUE, SHOPPER_LOCALES } from '../storybook/config/commonConfig';
-import { initialize as initializeMSW, mswLoader } from 'msw-storybook-addon';
+//import { initialize as initializeMSW, mswLoader } from 'msw-storybook-addon';
 
 // from the docs: https://github.com/mswjs/msw-storybook-addon
-initializeMSW({
-    onUnhandledRequest: 'bypass'
-});
+// initializeMSW({
+//     onUnhandledRequest: 'bypass'
+// });
 
 const preview: Preview = {
     argTypes: {
@@ -33,8 +33,8 @@ const preview: Preview = {
         shopperLocale: DEFAULT_SHOPPER_LOCALE,
         amount: DEFAULT_AMOUNT_VALUE,
         showPayButton: true
-    },
-    loaders: [mswLoader]
+    }
+    //loaders: [mswLoader]
 };
 
 export default preview;
diff --git a/packages/lib/storybook/public/mockServiceWorker.js b/packages/lib/storybook/public/mockServiceWorker.js
deleted file mode 100644
index 4c0b038ee9..0000000000
--- a/packages/lib/storybook/public/mockServiceWorker.js
+++ /dev/null
@@ -1,302 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-
-/**
- * Mock Service Worker.
- * @see https://github.com/mswjs/msw
- * - Please do NOT modify this file.
- * - Please do NOT serve this file on production.
- */
-
-const PACKAGE_VERSION = '2.7.0';
-const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f';
-const IS_MOCKED_RESPONSE = Symbol('isMockedResponse');
-const activeClientIds = new Set();
-
-self.addEventListener('install', function () {
-    self.skipWaiting();
-});
-
-self.addEventListener('activate', function (event) {
-    event.waitUntil(self.clients.claim());
-});
-
-self.addEventListener('message', async function (event) {
-    const clientId = event.source.id;
-
-    if (!clientId || !self.clients) {
-        return;
-    }
-
-    const client = await self.clients.get(clientId);
-
-    if (!client) {
-        return;
-    }
-
-    const allClients = await self.clients.matchAll({
-        type: 'window'
-    });
-
-    switch (event.data) {
-        case 'KEEPALIVE_REQUEST': {
-            sendToClient(client, {
-                type: 'KEEPALIVE_RESPONSE'
-            });
-            break;
-        }
-
-        case 'INTEGRITY_CHECK_REQUEST': {
-            sendToClient(client, {
-                type: 'INTEGRITY_CHECK_RESPONSE',
-                payload: {
-                    packageVersion: PACKAGE_VERSION,
-                    checksum: INTEGRITY_CHECKSUM
-                }
-            });
-            break;
-        }
-
-        case 'MOCK_ACTIVATE': {
-            activeClientIds.add(clientId);
-
-            sendToClient(client, {
-                type: 'MOCKING_ENABLED',
-                payload: {
-                    client: {
-                        id: client.id,
-                        frameType: client.frameType
-                    }
-                }
-            });
-            break;
-        }
-
-        case 'MOCK_DEACTIVATE': {
-            activeClientIds.delete(clientId);
-            break;
-        }
-
-        case 'CLIENT_CLOSED': {
-            activeClientIds.delete(clientId);
-
-            const remainingClients = allClients.filter(client => {
-                return client.id !== clientId;
-            });
-
-            // Unregister itself when there are no more clients
-            if (remainingClients.length === 0) {
-                self.registration.unregister();
-            }
-
-            break;
-        }
-    }
-});
-
-self.addEventListener('fetch', function (event) {
-    const { request } = event;
-
-    // Bypass navigation requests.
-    if (request.mode === 'navigate') {
-        return;
-    }
-
-    // Opening the DevTools triggers the "only-if-cached" request
-    // that cannot be handled by the worker. Bypass such requests.
-    if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
-        return;
-    }
-
-    // Bypass all requests when there are no active clients.
-    // Prevents the self-unregistered worked from handling requests
-    // after it's been deleted (still remains active until the next reload).
-    if (activeClientIds.size === 0) {
-        return;
-    }
-
-    // Generate unique request ID.
-    const requestId = crypto.randomUUID();
-    event.respondWith(handleRequest(event, requestId));
-});
-
-async function handleRequest(event, requestId) {
-    const client = await resolveMainClient(event);
-    const response = await getResponse(event, client, requestId);
-
-    // Send back the response clone for the "response:*" life-cycle events.
-    // Ensure MSW is active and ready to handle the message, otherwise
-    // this message will pend indefinitely.
-    if (client && activeClientIds.has(client.id)) {
-        (async function () {
-            const responseClone = response.clone();
-
-            sendToClient(
-                client,
-                {
-                    type: 'RESPONSE',
-                    payload: {
-                        requestId,
-                        isMockedResponse: IS_MOCKED_RESPONSE in response,
-                        type: responseClone.type,
-                        status: responseClone.status,
-                        statusText: responseClone.statusText,
-                        body: responseClone.body,
-                        headers: Object.fromEntries(responseClone.headers.entries())
-                    }
-                },
-                [responseClone.body]
-            );
-        })();
-    }
-
-    return response;
-}
-
-// Resolve the main client for the given event.
-// Client that issues a request doesn't necessarily equal the client
-// that registered the worker. It's with the latter the worker should
-// communicate with during the response resolving phase.
-async function resolveMainClient(event) {
-    const client = await self.clients.get(event.clientId);
-
-    if (activeClientIds.has(event.clientId)) {
-        return client;
-    }
-
-    if (client?.frameType === 'top-level') {
-        return client;
-    }
-
-    const allClients = await self.clients.matchAll({
-        type: 'window'
-    });
-
-    return allClients
-        .filter(client => {
-            // Get only those clients that are currently visible.
-            return client.visibilityState === 'visible';
-        })
-        .find(client => {
-            // Find the client ID that's recorded in the
-            // set of clients that have registered the worker.
-            return activeClientIds.has(client.id);
-        });
-}
-
-async function getResponse(event, client, requestId) {
-    const { request } = event;
-
-    // Clone the request because it might've been already used
-    // (i.e. its body has been read and sent to the client).
-    const requestClone = request.clone();
-
-    function passthrough() {
-        // Cast the request headers to a new Headers instance
-        // so the headers can be manipulated with.
-        const headers = new Headers(requestClone.headers);
-
-        // Remove the "accept" header value that marked this request as passthrough.
-        // This prevents request alteration and also keeps it compliant with the
-        // user-defined CORS policies.
-        const acceptHeader = headers.get('accept');
-        if (acceptHeader) {
-            const values = acceptHeader.split(',').map(value => value.trim());
-            const filteredValues = values.filter(value => value !== 'msw/passthrough');
-
-            if (filteredValues.length > 0) {
-                headers.set('accept', filteredValues.join(', '));
-            } else {
-                headers.delete('accept');
-            }
-        }
-
-        return fetch(requestClone, { headers });
-    }
-
-    // Bypass mocking when the client is not active.
-    if (!client) {
-        return passthrough();
-    }
-
-    // Bypass initial page load requests (i.e. static assets).
-    // The absence of the immediate/parent client in the map of the active clients
-    // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
-    // and is not ready to handle requests.
-    if (!activeClientIds.has(client.id)) {
-        return passthrough();
-    }
-
-    // Notify the client that a request has been intercepted.
-    const requestBuffer = await request.arrayBuffer();
-    const clientMessage = await sendToClient(
-        client,
-        {
-            type: 'REQUEST',
-            payload: {
-                id: requestId,
-                url: request.url,
-                mode: request.mode,
-                method: request.method,
-                headers: Object.fromEntries(request.headers.entries()),
-                cache: request.cache,
-                credentials: request.credentials,
-                destination: request.destination,
-                integrity: request.integrity,
-                redirect: request.redirect,
-                referrer: request.referrer,
-                referrerPolicy: request.referrerPolicy,
-                body: requestBuffer,
-                keepalive: request.keepalive
-            }
-        },
-        [requestBuffer]
-    );
-
-    switch (clientMessage.type) {
-        case 'MOCK_RESPONSE': {
-            return respondWithMock(clientMessage.data);
-        }
-
-        case 'PASSTHROUGH': {
-            return passthrough();
-        }
-    }
-
-    return passthrough();
-}
-
-function sendToClient(client, message, transferrables = []) {
-    return new Promise((resolve, reject) => {
-        const channel = new MessageChannel();
-
-        channel.port1.onmessage = event => {
-            if (event.data && event.data.error) {
-                return reject(event.data.error);
-            }
-
-            resolve(event.data);
-        };
-
-        client.postMessage(message, [channel.port2].concat(transferrables.filter(Boolean)));
-    });
-}
-
-async function respondWithMock(response) {
-    // Setting response status code to 0 is a no-op.
-    // However, when responding with a "Response.error()", the produced Response
-    // instance will have status code set to 0. Since it's not possible to create
-    // a Response instance with status code 0, handle that use-case separately.
-    if (response.status === 0) {
-        return Response.error();
-    }
-
-    const mockedResponse = new Response(response.body, response);
-
-    Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
-        value: true,
-        enumerable: true
-    });
-
-    return mockedResponse;
-}
diff --git a/packages/lib/storybook/stories/components/PayTo.stories.tsx b/packages/lib/storybook/stories/components/PayTo.stories.tsx
index 87e70e6472..ead7751c5b 100644
--- a/packages/lib/storybook/stories/components/PayTo.stories.tsx
+++ b/packages/lib/storybook/stories/components/PayTo.stories.tsx
@@ -3,7 +3,7 @@ import { PaymentMethodStoryProps } from '../types';
 import { ComponentContainer } from '../ComponentContainer';
 import { Checkout } from '../Checkout';
 import PayTo from '../../../src/components/PayTo/PayTo';
-import { http, HttpResponse } from 'msw';
+// import { http, HttpResponse } from 'msw';
 import { MandateType, PayToConfiguration } from '../../../src/components/PayTo/types';
 
 // extend the default story args so we can change mandate top level
@@ -57,17 +57,17 @@ export const PayToAwaitScreen: PayToStory = {
         payee: 'Cool Merchant Ltd'
     },
     parameters: {
-        msw: {
-            handlers: [
-                http.post('https://checkoutshopper-test.adyen.com/checkoutshopper/services/PaymentInitiation/v1/status', () => {
-                    return HttpResponse.json({
-                        payload: '',
-                        resultCode: 'pending',
-                        type: 'pending'
-                    });
-                })
-            ]
-        }
+        // msw: {
+        //     handlers: [
+        //         http.post('https://checkoutshopper-test.adyen.com/checkoutshopper/services/PaymentInitiation/v1/status', () => {
+        //             return HttpResponse.json({
+        //                 payload: '',
+        //                 resultCode: 'pending',
+        //                 type: 'pending'
+        //             });
+        //         })
+        //     ]
+        // }
     },
     render: ({ componentConfiguration, mandate, payee, ...checkoutConfig }) => (
         <Checkout checkoutConfig={checkoutConfig}>

From a5b50b49892e01d711f193ea1d58ed31ff08f345 Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Thu, 13 Feb 2025 17:04:23 +0100
Subject: [PATCH 18/20] fix broken e2e 2

---
 packages/lib/.storybook/main.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/lib/.storybook/main.ts b/packages/lib/.storybook/main.ts
index a5f9ee27c2..31ae567154 100644
--- a/packages/lib/.storybook/main.ts
+++ b/packages/lib/.storybook/main.ts
@@ -27,7 +27,8 @@ const config: StorybookConfig = {
     },
 
     // public added for msw: https://github.com/mswjs/msw-storybook-addon?tab=readme-ov-file#start-storybook
-    staticDirs: ['../storybook/assets', '../storybook/public'],
+    // '../storybook/public'
+    staticDirs: ['../storybook/assets'],
 
     viteFinal(config) {
         return mergeConfig(config, {

From d970ca6add8fd3893c2d6c857c3a173e2d8fc77c Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Wed, 19 Feb 2025 16:15:18 +0100
Subject: [PATCH 19/20] fix payto loading state

---
 .../src/components/PayTo/components/PayToComponent.scss  | 7 +++++++
 .../src/components/PayTo/components/PayToComponent.tsx   | 9 ++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 packages/lib/src/components/PayTo/components/PayToComponent.scss

diff --git a/packages/lib/src/components/PayTo/components/PayToComponent.scss b/packages/lib/src/components/PayTo/components/PayToComponent.scss
new file mode 100644
index 0000000000..4d2d16528e
--- /dev/null
+++ b/packages/lib/src/components/PayTo/components/PayToComponent.scss
@@ -0,0 +1,7 @@
+@use 'styles/index';
+
+.adyen-checkout__payto-component {
+  &--loading{
+    @include index.adyen-checkout-component-loading;
+  }
+}
\ No newline at end of file
diff --git a/packages/lib/src/components/PayTo/components/PayToComponent.tsx b/packages/lib/src/components/PayTo/components/PayToComponent.tsx
index 8f3c89b306..cbe722a19e 100644
--- a/packages/lib/src/components/PayTo/components/PayToComponent.tsx
+++ b/packages/lib/src/components/PayTo/components/PayToComponent.tsx
@@ -9,6 +9,8 @@ import { useCoreContext } from '../../../core/Context/CoreProvider';
 import { ComponentMethodsRef, UIElementStatus } from '../../internal/UIElement/types';
 import { PayToData, PayToPlaceholdersType } from '../types';
 import { PayButtonProps } from '../../internal/PayButton/PayButton';
+import classNames from 'classnames';
+import './PayToComponent.scss';
 
 export type PayToInputOption = 'payid-option' | 'bsb-option';
 
@@ -59,7 +61,12 @@ export default function PayToComponent(props: PayToComponentProps) {
 
     return (
         <LoadingWrapper>
-            <div className="adyen-checkout__payto-component">
+            <div
+                className={classNames({
+                    'adyen-checkout__payto-component': true,
+                    'adyen-checkout__payto-component--loading': status === 'loading'
+                })}
+            >
                 <SegmentedControl selectedValue={selectedInput} options={inputOptions} onChange={setSelectedInput} />
                 {selectedInput === 'payid-option' && (
                     <PayIDInput

From faf27f29df5b25a83a4c4ef501532c2ebd2f3673 Mon Sep 17 00:00:00 2001
From: antoniof <m1aw@users.noreply.github.com>
Date: Wed, 19 Feb 2025 16:36:38 +0100
Subject: [PATCH 20/20] remove loading wrapper

---
 .../PayTo/components/PayToComponent.tsx       | 61 +++++++++----------
 1 file changed, 29 insertions(+), 32 deletions(-)

diff --git a/packages/lib/src/components/PayTo/components/PayToComponent.tsx b/packages/lib/src/components/PayTo/components/PayToComponent.tsx
index cbe722a19e..a663fee829 100644
--- a/packages/lib/src/components/PayTo/components/PayToComponent.tsx
+++ b/packages/lib/src/components/PayTo/components/PayToComponent.tsx
@@ -1,5 +1,4 @@
 import { h } from 'preact';
-import LoadingWrapper from '../../internal/LoadingWrapper';
 import SegmentedControl from '../../internal/SegmentedControl';
 import { useState } from 'preact/hooks';
 import { SegmentedControlOptions } from '../../internal/SegmentedControl/SegmentedControl';
@@ -60,37 +59,35 @@ export default function PayToComponent(props: PayToComponentProps) {
     };
 
     return (
-        <LoadingWrapper>
-            <div
-                className={classNames({
-                    'adyen-checkout__payto-component': true,
-                    'adyen-checkout__payto-component--loading': status === 'loading'
-                })}
-            >
-                <SegmentedControl selectedValue={selectedInput} options={inputOptions} onChange={setSelectedInput} />
-                {selectedInput === 'payid-option' && (
-                    <PayIDInput
-                        status={status}
-                        setStatus={setStatus}
-                        setComponentRef={props.setComponentRef}
-                        onChange={onChange}
-                        defaultData={props.data}
-                        placeholders={props.placeholders}
-                    />
-                )}
-                {selectedInput === 'bsb-option' && (
-                    <BSBInput
-                        status={status}
-                        setStatus={setStatus}
-                        setComponentRef={props.setComponentRef}
-                        onChange={onChange}
-                        defaultData={props.data}
-                        placeholders={props.placeholders}
-                    />
-                )}
+        <div
+            className={classNames({
+                'adyen-checkout__payto-component': true,
+                'adyen-checkout__payto-component--loading': status === 'loading'
+            })}
+        >
+            <SegmentedControl selectedValue={selectedInput} options={inputOptions} onChange={setSelectedInput} />
+            {selectedInput === 'payid-option' && (
+                <PayIDInput
+                    status={status}
+                    setStatus={setStatus}
+                    setComponentRef={props.setComponentRef}
+                    onChange={onChange}
+                    defaultData={props.data}
+                    placeholders={props.placeholders}
+                />
+            )}
+            {selectedInput === 'bsb-option' && (
+                <BSBInput
+                    status={status}
+                    setStatus={setStatus}
+                    setComponentRef={props.setComponentRef}
+                    onChange={onChange}
+                    defaultData={props.data}
+                    placeholders={props.placeholders}
+                />
+            )}
 
-                {props.showPayButton && props.payButton({ status, label: i18n.get('continue') })}
-            </div>
-        </LoadingWrapper>
+            {props.showPayButton && props.payButton({ status, label: i18n.get('continue') })}
+        </div>
     );
 }