Domain URL:

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

PROD-SANDBOX:

https://card-webview-sandbox.card91.io/view-card?templateId=xoltt&platform=ios

PROD-LIVE:

https://card-webview.card91.io/view-card?templateId=xoltt&platform=ios

Requirement fields:

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

cardholder name
cardId
customerId
token
last4digits

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>
   .container {
     position: relative;
     background: url('./card-default.png') no-repeat; // put Image URl or path here
     background-size: 328px 208px;
     height: 208px;
     width: 328px;
   }
 
   .cardWrapper {
     height: 208px;
     width: 328px;
     background: transparent;
   }
 
   iframe {
     height: 100%;
     width: 100%;
   }
 </style>
</head>
<body>
 <div class="container">
   <div class="cardWrapper">
     <script>
    	 window.addEventListener(
            "message",
            (e) => {
              console.log("e,", e);
              if (e.data.type === "C91_CARD_VIEWER_INITIALISED") {
                cardView();
              }
            },
            false,
          );
       function cardView() {
         try {
           var ORIGIN = "https://card-webview.card91.io";  
           var params = {
             "payload": {
               "cardHolderName": "xxxxxxx",
               "cardId": "xxxxxxxx",
               "customerId": "xxxxx",
               "last4digits": "xxxxx",
               "token": "xxxxxxxxxx"
             },
             "type": "C91_CARD_SET_PARAMS"
           }
           document.getElementById("cardView").contentWindow.postMessage(JSON.stringify(params), ORIGIN);
         } catch (error) {
             console.log(error);
         }
       }
     </script>
     <iframe src="https://card-webview.card91.io/view-card?templateId=xoltt&platform=ios"
       frameborder="0" id="cardView"></iframe>
   </div>
 </div>
</body>
</html>