> ## Documentation Index > Fetch the complete documentation index at: https://primer.io/docs/llms.txt > Use this file to discover all available pages before exploring further. # provide export const parameterType = "BanksValidatableData"; export const properties = "adyen-ideal"; export const startUrl = "/sdk/react-native/2.x.x/primerHeadlessUniversalCheckout/componentWithRedirect/componentWithRedirectManagerProvide#common-api-and-available-components-common-api.start()"; export const submitUrl = "/sdk/react-native/2.x.x/primerHeadlessUniversalCheckout/componentWithRedirect/componentWithRedirectManagerProvide#common-api-and-available-components-common-api.submit()"; export const parameters = "adyen-ideal"; This method allows you get a new instance of a component implementation. ```typescript TYPESCRIPT theme={"dark"} async provide(props: ComponentWithRedirectManagerProps): Promise ``` ## Parameters Object that provides the payment menthod type and callback functions for handling steps, errors and validation. A unique string identifier for the payment method. Supported payment methods for current client session are returned in `onAvailablePaymentMethodLoad` callback. void`}> Called whenever the component emits a new step. This usually happens when calling start or submit or whenever the component collects data. A type representing the loading of the bank list. The name of this component step. A type representing the list of retrieved banks. The name of this component step. The bank's identifier. The bank's name. The bank's icon url. A boolean representing the bank's state. Called to indicate that a [PrimerError](/docs/sdk/react-native/v2.x.x/common-objects/PrimerError) occurred during the component's operation. The specific `PrimerError` that occurred during the component's operation. A unique error identifier. A unique error code. A error description. A recovery suggestion for the given error. In case it's present, use it to try to recover from error. A unique diagnostics id for the given error. ) => void`}> Called to indicate that the component data was considered invalid during validation. xx `}> Interface that indicates that the data has been considered invalid after validation. The data that failed validation. The name of this component-validatable data. The id of the selected bank. The name of this component-validatable data. The text to filter the bank list by. A list of `PrimerValidationError` explaining why the data is considered invalid. A unique error identifier. A error description. A unique diagnostics id for the given error. ) => void`}> Called to indicate that the component data was successfully validated. `}> Interface that indicates that the data has been successfully validated. The name of this component-validatable data. The id of the selected bank. The name of this component-validatable data. The text to filter the bank list by. ) => void`}> Called to indicate that the component data is in the process of being validated. `}> Interface that indicates that data is currently in the process of being validated. The data being validated. The name of this component-validatable data. The id of the selected bank. The name of this component-validatable data. The text to filter the bank list by. ) => void`}> Called to indicated an error that occurred during component data validation. `}> Interface that represents an error that occurred during the validation process. The data for which an error ocurred during validation. The name of this component-validatable data. The id of the selected bank. The name of this component-validatable data. The text to filter the bank list by. The `PrimerError` that ocurred during the validation attempt. A unique error identifier. A unique error code. A error description. A recovery suggestion for the given error. In case it's present, use it to try to recover from error. A unique diagnostics id for the given error. ## Supported payment method types

Type	paymentMethodType
BanksComponent	ADYEN\_IDEAL

## Returns An instance of a component, depending on the `paymentMethodType`: Initialize the component by calling the `start` function. This method should be called only once. Call `submit` function in order to process collected data and move component to next state. Update component with the selected bank id. To validate the collected data, you can refer to the appropriate [ComponentWithRedirectManagerProps](#param-props) callback functions. Update component with the given bank filter. Doing so will cause a call to [onStep](#param-on-step) with the filtered bank list. To validate the collected data, you can refer to the appropriate [ComponentWithRedirectManagerProps](#param-props) callback functions. ## Example ```typescript TYPESCRIPT theme={"dark"} // 👇 Add this const componentWithRedirectManagerProps: ComponentWithRedirectManagerProps = { paymentMethodType: "ADYEN_IDEAL", onStep: (data: BanksStep) => { switch (data.stepName) { case "banksLoading": // Show loading indicator break; case "banksRetrieved": // Render banks break; } }, onError: (error: PrimerError) => { // An error that occurred during the component's operation. }, onInvalid: (data: PrimerInvalidComponentData) => { // Data was considered invalid during validation. switch (data.data.validatableDataName) { case "bankListFilter": // ... break; case "bankId": // ... break; } }, onValid: (data: PrimerValidComponentData) => { // Data was successfully validated. switch (data.data.validatableDataName) { case "bankListFilter": // ... break; case "bankId": // ... break; } }, onValidating: (data: PrimerValidatingComponentData) => { // Data is in the process of being validated. switch (data.data.validatableDataName) { case "bankListFilter": // ... break; case "bankId": // ... break; } }, onValidationError: ( data: PrimerComponentDataValidationError ) => { // Error occurred during data validation. switch (data.data.validatableDataName) { case "bankListFilter": // ... break; case "bankId": // ... break; } }, }; const componentWithRedirectManager = new ComponentWithRedirectManager(); const banksComponent: BanksComponent = await componentWithRedirectManager.provide(componentWithRedirectManagerProps); ```