Transaction View Iframe HTML

Transaction card view list in the iframe.

Domain URL:

Below you will find a link to view card details in the iframe.

PROD-SANDBOX:

https://card-webview-sandbox.card91.io/transactions?platform=ios  

PROD-LIVE:

https://card-webview.card91.io/transactions?platform=ios 

Requirement fields:

Access the card-view the following parameter needed, if you have trouble finding please contact card91.

  • cardId
  • phoneNumber
  • token

Sample HTML File:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>card91</title>
    <style>
        iframe {
            height: 1200px;
            width: 100%;
        }
    </style>

</head>

<body>
    <script>
      window.addEventListener(
            "message",
            (e) => {
              console.log("e,", e);
              if (e.data.type === "C91_TXN_SCREEN_INITIALISED") {
                txnPage();
              }
            },
            false,
          );
        function txnPage() {
            try {
                var ORIGIN = "https://card-webview.XXXXX.card91.io";
                var params = {
                    "payload": {
                        "cardId": "220923093511700ID1CARD8XXXXXX",
                        "token": "C91CHzdBpdF/XXXXXXXXXXXXXXXXXXXX"
                    },
                    "type": "C91_TXN_SET_PARAMS"
                }
                document.getElementById("txnPage").contentWindow.postMessage(JSON.stringify(params), ORIGIN);
            } catch (error) {
                console.log(error);
            }
        }
    </script>
    <iframe  src=" https://card-webview.XXXXX.card91.io/transactions?templateId=xoltt&platform=ios"
        frameborder="0" allow="midi" id="txnPage"></iframe>
    </div>
</body>

</html>