JavaScript
Info Component

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.

Volume Selector

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
keytypeexampledescription
targetIdstring"info-component-id"id of the element where the info component will be rendered
colourstring (OPTIONAL)"#000000"colour of the info component
sizenumber (OPTIONAL)35size of the component
clickListenerIdstring (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