Domain URL:

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

PROD-SANDBOX:

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

PROD-LIVE:

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

For print Card takes the following props:

Input props

Name	Type	Required	Description
templateId	string	true	Use to indicate key for design template
environment	string	false	Use "sandbox" for production sandbox environment and "live" for production environment .
cardId	string	true	Need to pass card holder cardId
customerId	string	true	Need to pass card holder customerId
organizationId	string	true	Need to pass organisation business id
uniqueId	string	true	Need to pass secret key auth url validation
authUrl	string	true	Auth Url from client need pass in responses attached with token
mobile	string	true	Need to pass customer mobile number with prefix '91'

The events are as follows:

Event Name	Description
C91_PRINT_CARD_SCREEN_INITIALISED	The Print card screen has been initialised.
C91_PRINT_CARD_API_SUCCESS	The API request related to the print card screen was successful.
C91_PRINT_CARD_API_FAILURE	The API request related to the print card screen has failed.
C91_PRINT_CARD_AUTHENTICATION_FAILURE	Authentication for the print card screen has failed.
C91_PRINT_CARD_SERVER_FAILURE	The server encountered an error while processing the print card request.
C91_PRINT_CARD_MISSING_PARAMETER	A required parameter is missing in the print card request.
C91_PRINT_CARD_TOKEN_API_SUCCESS	The API request for retrieving a token related to the print card was successful.
C91_PRINT_CARD_TOKEN_API_FAILURE	The API request for retrieving a token related to the print card has failed.
C91_PRINT_CARD_EXTERNAL_SERVER_FAILURE	An external server encountered an error while processing the print card request.
C91_PRINT_CARD_EXTERNAL_MISSING_PARAMETER	A required parameter is missing in the external print card request.
C91_PRINT_CARD_EXTERNAL_AUTHENTICATION_FAILURE	Authentication for the external print card request has failed.
C91_FETCH_ADDRESS_API_FAILURE	The API request related to the fetch address has failed.

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: 100vh;
      width: 100%;
    }
  </style>

</head>

<body>
  <script>
    document.addEventListener("message",
            (e) => {
              console.log("e,", e);
              if (e.data.type === "C91_PRINT_CARD_SCREEN_INITIALISED") {
                printPage();
              }
            },
            false,
          );
    const childWindow = document.getElementById('print-card-page').contentWindow;
    window.addEventListener('message', message => {
      console.log(message);
    });
    function printPage() {
      try {
        
        var ORIGIN = "https://card-webview-sandbox.card91.io";
        var params = {
          "payload": {
            /* Stag Sandbox*/
            organizationId: "230526135544169ID1OID4070270", // Organization Id
            cardId: "230817121106326ID1CARD7938913", // Card holder cardid
            customerId: "230817121106284ID1CUSTID8614395", // Card holder customer id
            uniqueId: "string",
            mobile: "918882077435", /// card holder mobile number 
            authUrl: "https://integrations.card91.io/api:3aL900Rl/auth/token",
          },
          "type": "C91_PRINT_CARD_SET_PARAMS"
        }
        document.getElementById("print-card-page").contentWindow.postMessage(JSON.stringify(params), ORIGIN);
      } catch (error) {
        console.log(error);
      }
    }

  </script>
  <iframe src="https://card-webview-sandbox.card91.io/print-card?templateId=transasia&platform=ios"
    frameborder="0" allow="midi" id="print-card-page"></iframe>
  <div>

  </div>
  </div>
</body>

</html>