React Web Component - desktop version

When Volume React web component is rendered in a desktop mode it looks and behaves differently.

It allows and encourages the users to navigate to their mobile device, where their banking application allow them to seamlessly and safely perform the payment.

UI

Desktop version of the Volume Component contains a QR code which contains a URL that can be opened by the user by scanning the code.

React Desktop

Payment flow

In this scenario the payment flow contains of two lanes - one for the destkop UI and another for the mobile UI opened by scanning the QR code.

React Desktop Flow

⚠️

Merchant Callback redirection happens ONLY on the mobile device, on which the user performs the payment.

Payment status callback

A callback function called each time a payment status has changed.
This callback can be used as a UI notification mechanism.
For more details, please see Payment status callback

    <Volume
      ...
      paymentStatusCallback={
          (paymentStatus: PaymentStatusResponse) => {
              console.log("I've got a new status: " + JSON.stringify(paymentStatus));
          }
      }
      ...
    />
}

Volume event callback

This callback function is triggered each time an internal Volume event occurs.
In the desktop mode of the component only one event is emitted - PaymentIdGenerated.
For more details, please see Volume event callback

React Web Component Info Component