Desktop QR Code Component

To use the volume component on a desktop application, you first need to initialise the volume class in the same way as with the regular Volume Component.

Follow Importing the script and Component Usage to initialise the volume class.

After initialisation, you can Inject the QR Code Component into the DOM at the given id.

Inject the QR Code Component

    // html file/generated html
    <div id="my-div-id"/>

    // javascript file
    const volume = new window.Volume({
        environment: "LIVE",
    	applicationId: "my-application-id",
    })
 
    volume.injectDesktopComponent(
        "my div 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,
        3.99, // amount
        "merchant-payment-id", // MerchantPaymentId
        "reference", // Reference
        { 
            "mydata": "myvalue" // metadata
        },
    )

Arguments to injectDesktopComponent

argument	kind	type	description
id	string		id of the element where the selector component will be rendered
country	string	ISO 3166-1 alpha-2	ISO 3166-1 alpha-2 country code
currency	string	ISO 4217	ISO 4217 currency code
amount	number	Min 0.01, up to 2 decimal places	amount to pay, ie £1.00.
merchantPaymentId	string	Max 50 chars, unique per payment	MerchantPaymentId
reference	string	Max 18 chars, Alphanumeric	reference
metadata	json object	Max 5000 chars length	metadata is an optional JSON object which will be passed back in webhooks as paymentMetadata. It can only accepts primitives (as well as dictionaries and arrays of primitives).

Making a Payment

To make a payment, simply scan the QR code with your mobile device.

Your phone web browser of choice will open with a banking app selection screen where a payment can then be made.

JavaScript SDK Selector Component