TYPESCRIPT
async provide(props: ComponentWithRedirectManagerProps): Promise<BanksComponent | any>
Parameters
Hide Parameters
Hide Parameters
Object that provides the payment menthod type and callback functions for
handling steps, errors and validation.
Hide Properties
Hide Properties
A unique string identifier for the payment method. Supported payment methods for current client session are returned in
onAvailablePaymentMethodLoad callback.onStep
Called whenever the component emits a new step. This usually happens when calling start or submit or whenever the component collects data.
Show Parameters
Show Parameters
BanksLoading
A type representing the loading of the bank list.
Show Properties
Show Properties
The name of this component step.
BanksRetrieved
A type representing the list of retrieved banks.
Show Properties
Show Properties
The name of this component step.
Called to indicate that a PrimerError occurred during the component’s operation.
Show Parameters
Show Parameters
PrimerError
The specific
PrimerError that occurred during the component’s operation.Show child attributes
Show child attributes
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.
onInvalid
Called to indicate that the component data was considered invalid during validation.
xx
Show Parameters
Show Parameters
Interface that indicates that the data has been considered invalid after validation.
Show Properties
Show Properties
data
The data that failed validation.
Show child attributes
Show child attributes
A list of
PrimerValidationError explaining why the data is considered invalid.onValid
Called to indicate that the component data was successfully validated.
Show Parameters
Show Parameters
Interface that indicates that the data has been successfully validated.
Show Properties
Show Properties
data
Show child attributes
Show child attributes
onValidating
Called to indicate that the component data is in the process of being validated.
Show Parameters
Show Parameters
Interface that indicates that data is currently in the process of being validated.
Show Properties
Show Properties
data
The data being validated.
Show child attributes
Show child attributes
onValidationError
Called to indicated an error that occurred during component data validation.
Show Parameters
Show Parameters
Interface that represents an error that occurred during the validation process.
Show Properties
Show Properties
data
The data for which an error ocurred during validation.
Show child attributes
Show child attributes
The
PrimerError that ocurred during the validation attempt.PrimerError
Show Properties
Show Properties
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
Hide Supported payment method types
Hide Supported payment method types
| Type | paymentMethodType |
|---|---|
| BanksComponent | ADYEN_IDEAL |
Returns
An instance of a component, depending on thepaymentMethodType:
Hide Common API and available components
Hide Common API and available components
Hide Common API
Hide Common API
Hide Supported types
Hide Supported types
BanksComponent
Show API
Show API
handleBankChange(bankId: string)
Update component with the selected bank id.To validate the collected data, you can refer to the appropriate
ComponentWithRedirectManagerProps
callback functions.
handleBankFilterChange(filter: string)
Update component with the given bank filter. Doing so will cause a call to onStep with the filtered bank list.To validate the collected data, you can refer to the appropriate
ComponentWithRedirectManagerProps
callback functions.
Example
TYPESCRIPT
// 👇 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<BanksValidatableData>) => {
// Data was considered invalid during validation.
switch (data.data.validatableDataName) {
case "bankListFilter":
// ...
break;
case "bankId":
// ...
break;
}
},
onValid: (data: PrimerValidComponentData<BanksValidatableData>) => {
// Data was successfully validated.
switch (data.data.validatableDataName) {
case "bankListFilter":
// ...
break;
case "bankId":
// ...
break;
}
},
onValidating: (data: PrimerValidatingComponentData<BanksValidatableData>) => {
// Data is in the process of being validated.
switch (data.data.validatableDataName) {
case "bankListFilter":
// ...
break;
case "bankId":
// ...
break;
}
},
onValidationError: (
data: PrimerComponentDataValidationError<BanksValidatableData>
) => {
// 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);