Volume Info Component
The Volume Info Component is a component that allows you to provide additional information about the Volume payment method.
This is suitable to be placed in the checkout flow of your application if you for example have multiple payment options available to your customers and you wish to explain to them what Volume is.
Usage
Install and initialize the volume class in exacty the same way as with the regular Volume Component
Followed by using the injectInfoIconComponent({targetId,colour,size,clickListenerId})
method to inject the info component.
const volume = new window.Volume({
environment: "LIVE",
applicationId: "my-application-id",
})
volume.injectInfoIconComponent({
targetId: "info-component-id", // id of the element where the info component will be rendered
colour: "#000000", // colour of the info component
size: 35, // size of the component
clickListenerId: "click-listener-id" // id of the element where the click listener will be attached
}
Properties
Expand the section below for a quick glance at what you need to know.
VolumeInfoComponent
key | type | example | description |
---|---|---|---|
targetId | string | "info-component-id" | id of the element where the info component will be rendered |
colour | string (OPTIONAL) | "#000000" | colour of the info component |
size | number (OPTIONAL) | 35 | size of the component |
clickListenerId | string (OPTIONAL) | "click-listener-id" | id of the element where the click listener will be attached. This is useful if you want a larger area to activate opening the info component |