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
},
{ // merchantProvidedPayerDetails (optional)
email: "john.doe@example.com",
name: "John Doe",
dateOfBirth: "1990-01-31",
nationality: "GB",
residentialAddress: "10 Downing Street, London, SW1A 2AA",
},
"Invoice 42", // reasonForPayment (optional)
{ // ultimateBeneficiary (optional)
fullName: "Jane Roe",
currency: "GBP",
country: "GB",
},
)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). |
| merchantProvidedPayerDetails | object (Optional) | Same as in createPayment | Payer details, including dateOfBirth, nationality and residentialAddress |
| reasonForPayment | string (Optional) | Max 100 chars | Why the payer is paying |
| ultimateBeneficiary | object (Optional) | fullName, currency, country | The party that finally receives the funds, when it is not the merchant |
Formats and limits are the same as in Compliance Details. If your application requires compliance details, pass them here, or the payment is rejected. The three arguments are optional: calls without them work as before.
The details travel inside the QR code. The QR code grows from 150 px to 200 px when they are long, so phone cameras can still read it.
Available countries
| Country | Country code | Currency |
|---|---|---|
| United Kingdom | GB | GBP |
| Germany | DE | EUR |
| France | FR | EUR |
| Netherlands | NL | EUR |
| Spain | ES | EUR |
| Belgium | BE | EUR |
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.