Update Bank Details

This feature allows users to update their own bank details.

Update bank details feature

This page displays a simple form that users can use to update their bank details. Different countries require different information, so the form will vary depending on the country.

On this page, users can update their bank details.

Here is what that looks like in an app:

Storybook

How to generate bank details form

Inside the app.config.ts file, you can find the setUpDirectDebitInstructionInputFieldsWithValidation object. This object contains the form fields and the necessary form validations required to generate the bank details form. For example, the fields required by the UK are:

• account holder
• branch code
• account number

In France, the required fields are:

• account holder
• IBAN

To generate a bank details form that can be used in France, you can use the following configuration inside appConfig:

import { isValidIBAN } from 'ibantools';


export const prepareIban = (value: string) => {
    if (value) {
        return value.replaceAll(' ', '').toUpperCase();
    }
    return value;
};

const appConfig = {
...
payments: {
    ...
  setUpDirectDebitInstructionInputFieldsWithValidation: [
            {
                id: 'accountHolder',
                initialValue: '',
                validationType: 'string',
                validations: [
                    {
                        type: 'required',
                        messageCode: 'account-holder-required-message',
                    },
                ],
            },
            {
                id: 'iban',
                initialValue: '',
                validationType: 'string',
                validations: [
                    {
                        type: 'required',
                        messageCode: 'iban-required-message',
                    },
                    {
                        messageCode: 'iban-invalid-message',
                        type: 'test',
                        params: [
                            (value: string) =>
                                value ? isValidIBAN(prepareIban(value)) : false,
                        ],
                    },
                ],
            },
        ],
    }
    ...
}

Then, within the app, you can use the createValidationForInputField function from the blueprint-utils package to generate the form fields with validations.

📣 Note: The createValidationForInputField function is a utility function that generates form fields with validations. Since this function is used in different countries with varying requirements, you may need to provide validations for fields that are not necessary in your country. This is because the validationMessageTranslations prop is typed, and you need to provide all possible validation messages that can be used in the form.

type TBankDetails = {
    accountHolder: string;
    iban: string;
    branchCode: string;
    accountNumber: string;
};

const initialValues: Partial<Record<keyof Partial<TBankDetails>, string>> =
        {};

const schema: Partial<Record<keyof TBankDetails, any>> = {};
const directDebitFormFieldData =
    appConfig.payments.setUpDirectDebitInstructionInputFieldsWithValidation;
...

directDebitFormFieldData.forEach((formFieldItem) => {
        initialValues[formFieldItem.id] = '';
        inputFields.push(formFieldItem.id);
        createValidationForInputField({
            schema,
            formFieldItem,
            validationMessageTranslations: {
                'account-holder-required-message': "Account holder is required",
                'branch-code-required-message': "Branch code is required",
                'branch-code-length-check-message': "Branch code must be 6 digits",
                'account-number-required-message': "Account number is required",
                'account-number-length-check-message': "Account number must be 8 digits",
                'iban-required-message': "IBAN is required",
                'iban-invalid-message': "Invalid IBAN",
            },
        });
    });