Volume Selector Component
The Volume Selector Component is a component that allows you to indicate to your customers which banks are available to them.
This is suitable to be placed in the checkout flow of your application if you for example have multiple pages with radio buttons.
Usage
Install and initialize the volume class in exacty the same way as with the regular Volume Component
Followed by using the injectSelectorComponent(id, country, currency, height)
method to inject the selector component into the DOM at the given id.
const volume = new window.Volume({
environment: "LIVE",
applicationId: "my-application-id",
})
volume.injectSelectorComponent(
"selector-component-id", // id of the element where the selector component will be rendered
"GB", // ISO 3166-1 alpha-2 country code
"GBP", // ISO 4217 currency code,
100 // height of the selector component: default is 100
)
Html where you wish to render the selector component:
<div id="selector-component-id"/>
Selector Height
The .injectSelector()
method accepts a fourth optional parameter height
which is the height of the selector component. By default the height is set to 100
which means the selector wiill take up 100px.
Why Currency and Country
We show banks based on the country and currency of the payment.
Only banks that support the given currency and country will be shown.