Mobile Apps (JavaScript)

If you'd like to implement VR pay secure in your mobile app, there is a solution if your app is based on JavaScript code.

First of all, you will need to Create a VR pay secure Gateway. You will get an URL for your VR pay secure gateway. Display this URL in an iFrame.

For the examples below, the iFrame must include the id="vr-pay-secure" attribute.
After that, you will need to add an event listener on the window that will forward all pushed messages from VR pay secure Gateway iFrame to the function handleMessage.

JavaScript

window.addEventListener('message', handleMessage(this), false);

Now, add a function handleMessage to check whether the transaction has been completed or not:

JavaScript

function handleMessage(e) {
  if (typeof e.data === 'string') {
    try {
      var data = JSON.parse(e.data);
    } catch (e) {}
    if (data && data.vrpaysecure) {
      jQuery.each(data.vrpaysecure, function(name, value) {
        switch (name) {
          case 'transaction':
            if (typeof value === 'object') {
              if (value.status === 'confirmed') {
                //handling success
              } else {
                //handling failure
              }
            }
            break;
        }
      });
    }
  }
}

At this point, the iFrame won't have the rights to push any message to its parent (your mobile app).
Therefore, you will need the following code snippet. It will be called each time the iFrame content is being loaded.

JavaScript

function showFrame() {
    var iFrame = document.getElementById('vr-pay-secure');
    iFrame.contentWindow.postMessage(
        JSON.stringify({
            origin: window.location.origin
        }),
        iFrame.src
    )
}

This will transmit to your VR pay secure Gateway the origin of the parent (mostly NULL for web apps). Yet, it is necessary to pass this information to the VR pay secure page, in order to push messages to your main window.