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.