Domain URL:

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

PROD-SANDBOX:

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

PROD-LIVE:

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

For WalletBalance component takes the following props:

Input props

Name	Type	Required	Description
environment	string	true	Use "sandbox" for production sandbox environment and "live" for production environment .
templateId	string	true	Use to indicate key for design template
token	string	true	Auth Token of card holder received from the Card91 APIs
cardId	string	true	id: card ID of card holder received from the Card91 APIs
backgroundImage	image type	false	Background image for the balance (optional)

The events are as follows:

Event Name	Description
C91_WALLET_SET_PARAMS	Indicates setting parameters in the wallet.
C91_WALLET_SCREEN_INITIALISED	Denotes the initialization of the wallet screen.
c91_WALLET_SCREEN_SUCCESS	Represents a successful response from a wallet API.
C91_WALLET_API_FAILURE	Indicates a failure in a wallet-related API call.
C91_WALLET_AUTHENTICATION_FAILURE	Signifies an authentication failure in the wallet.
C91_WALLET_SERVER_FAILURE	Indicates a failure related to the wallet's server.
C91_WALLET_MISSING_PARAMETER	Represents a scenario where a wallet parameter is missing.

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%;
    }

    .container {
      position: relative;
      background: url('./balance_bg.gif') no-repeat;
      background-size: 100% 160px;
      height: 160px;
      width: 100%;
    }

    .cardWrapper {
      height: 160px;
      width: 100%;
      background: transparent;
    }
  </style>

</head>

<body>
  <script>
    
     document.addEventListener("message",
      (e) => {
        console.log("e,", e);
         if (e.data.type === "C91_WALLET_SCREEN_INITIALISED") {
                walletPage();
            }
           },
          false,
        );
    
    function walletPage() {
      try {
        var ORIGIN = "https://card-webview-sandbox.card91.io";

        var params = {
          "payload": {
            "cardId": "230727093553112ID1CARD7842378", //Card holder card id
            "token": "C91CHsMZ6bSIC/g8w+75HeT++kfO5OQXzW4XG6/wv6ALfQjw=" ///card holder auth token
          },
          "type": "C91_WALLET_SET_PARAMS" // Event type
        }
        document.getElementById("walletPage").contentWindow.postMessage(JSON.stringify(params), ORIGIN);
      } catch (error) {
        console.log(error);
      }
    }
  </script>
  <div class="container">
    <div class="cardWrapper">
      <iframe src="https://card-webview-sandbox.card91.io/wallets?templateId=transasia-white&platform=ios"
        frameborder="0" allow="midi" id="walletPage"></iframe>
    </div>
  </div>

  </div>
</body>

</html>