Available from v1.0.0

MoneyProtectionBanner

MoneyProtectionBanner is a configurable banner component for displaying regulatory disclaimers or deposit insurance information on financial transaction screens.

Platform availability: iOS 17.0+

When to use:

• Use MoneyProtectionBanner when displaying regulatory disclaimers or deposit insurance information on financial transaction screens.
• Consider alternative banner components when displaying general informational messages that are not related to regulatory compliance.

Import

                                                        
                                                        
                                                            import BackbaseDesignSystem
                                                        
                                                            

API reference

MoneyProtectionBanner

The MoneyProtectionBanner struct is used for displaying regulatory banners on specific screens or journeys. The banners are determined by implementing the DesignSystem.MoneyProtectionBannerDisplayable protocol.

Properties

MoneyProtectionBannerDisplayable

Protocol that identifies whether a screen should display a banner.

Methods

• getMoneyProtectionBannerView()
1. Returns a SwiftUI view representing the banner.
2. Returns: AnyView? - A SwiftUI view for the banner, or nil if no banner should be displayed
• getMoneyProtectionBannerUIView()
1. Returns a UIView that wraps the SwiftUI banner.
2. Returns: UIView? - A UIKit view wrapping the banner, or nil if no banner should be displayed

Usage

Basic usage

Implement the MoneyProtectionBannerDisplayable protocol on your journey view or configuration object:

                                                        
                                                        
                                                            DesignSystem.shared.moneyProtectionBanner.create = { bannerDisplayable in
                                                            if bannerDisplayable is SpecificJourneyScreen {
                                                                // The specific banner you wish to show for a certain journey screen.
                                                                return AnyView(SpecificBannerView())
                                                            } else {
                                                                // Or return a different banner or `nil` for all other journeys that can show a banner.
                                                                return AnyView(GenericBannerView())
                                                            }
                                                        }
                                                        
                                                            

In this example, you can check if the object passed into the function is of the type of journey screen configuration for which you want to display the banner.

Implementing the protocol

To display a banner through the DesignSystem.shared.moneyProtectionBanner.create function, conform to the MoneyProtectionBannerDisplayable protocol:

                                                        
                                                        
                                                            public protocol MoneyProtectionBannerDisplayable {
                                                            func getMoneyProtectionBannerView() -> AnyView?
                                                            func getMoneyProtectionBannerUIView() -> UIView?
                                                        }
                                                        
                                                            

The protocol provides default implementations, so nothing needs to be added when implementing this protocol. Journeys can use either function to get the banner view and place it appropriately inside their view controller. The banner view returned has an intrinsic size.

Accessibility

The MoneyProtectionBanner component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.

Accessibility configuration

Best practices

• Ensure banner text is clear and concise for screen reader users.
• Test with VoiceOver to verify the regulatory information is announced correctly.

Localization

You can override the following strings to customize the text related to the MoneyProtectionBanner on the app level:

                                                        
                                                        
                                                            "DesignSystem.moneyProtection.uninsuredLabel" = "";
                                                        "DesignSystem.moneyProtection.disclaimerLabel" = "";
                                                        
                                                            

Design tokens

Component styling is applied automatically through the design system's theming infrastructure.

JSON tokens

This component uses semantic tokens only. See Semantic tokens below.

Semantic tokens

Dependencies

• External dependencies: None
• Internal dependencies: None