Domain URL:

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

PROD-SANDBOX:

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

PROD-LIVE:

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

For Issue 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 .
cardProgramId	string	true	Customer Card program id which come when you login with MPIN/Auth token
organizationId	string	true	Need to pass 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
onSubmit	string	true	Methods used to trigger submit button through web view
customFields	object	true	Fields which represent which step have to show
step	string	true	Steps indicates which represent active step of issue card form
cardMode	string	true	value should be DIGITAL_ONLY_CARD / PHYSICAL_NAMED_CARD

The events are as follows:

Event Name	Description
C91_ISSUE_CARD_SCREEN_INITIALISED	The issue card screen has been initialised.
C91_ISSUE_CARD_SCREEN_SUCCESS	The API request related to the issue card screen was successful.
C91_ISSUE_CARD_API_FAILURE	The API request related to the issue card screen has failed.
C91_ISSUE_CARD_AUTHENTICATION_FAILURE	Authentication for the issue card screen has failed.
C91_ISSUE_CARD_SERVER_FAILURE	The server encountered an error while processing the issue card request.
C91_ISSUE_CARD_MISSING_PARAMETER	A required parameter is missing in the issue card request.
C91_ISSUE_CARD_TOKEN_API_SUCCESS	The API request for retrieving a token related to the issue card was successful.
C91_ISSUE_CARD_TOKEN_API_FAILURE	The API request for retrieving a token related to the issue card has failed.
C91_ISSUE_CARD_EXTERNAL_SERVER_FAILURE	An external server encountered an error while processing the issue card request.
C91_ISSUE_CARD_EXTERNAL_MISSING_PARAMETER	A required parameter is missing in the external issue card request.
C91_ISSUE_CARD_EXTERNAL_AUTHENTICATION_FAILURE	Authentication for the external issue card request 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>
    window.addEventListener('message', message => {
      console.log(message);
    });
    function txnPage() {
      try {
        var ORIGIN = "https://card-webview-sandbox.card91.io";
        var params = {
          "payload": {
            organizationId: "230217024240504ID1OID6864550",// Org Id
            cardProgramId: "230630074826303ID1CP6003872", // Card program Id
            uniqueId: "string", // Unique id
            authUrl: `https://integrations.card91.io/api:3aL900Rl/auth/token`, // Auth web hook needs to created please refer Auth URL Config Documentation
            cardMode: 'DIGITAL_ONLY_CARD',
            customFields: {
              "step1": [ // Step define different pages for issue card form
                {
                  "name": "fullName",
                  "displayText": "Full Name",
                  "elements": {
                    "type": "text",
                    "defaultValue": "Dheerendra Singh",
                    "disabled": true // For making the non editable field pass the value as true 
                  }
                },
                {
                  "name": "mobile",
                  "displayText": "Mobile No.",
                  "elements": {
                    "type": "text",
                    "defaultValue": "9971304064",
                    "disabled": true // For making the non editable field pass the value as true 
                  }
                },
                {
                  "name": "pan",
                  "displayText": "PAN",
                  "elements": {
                    "type": "text",
                    "defaultValue": "HIYPS8243G",
                    "disabled": true // For making the non editable field pass the value as true 
                  }
                },
                {
                  "name": "nameOnCard",
                  "displayText": "Name on card",
                  "elements": {
                    "type": "text",
                    "defaultValue": "Dk Thakur",
                    "disabled": true // For making the non editable field pass the value as true 
                  }
                }
              ]
            }
          },
          "type": "C91_ISSUE_CARD_SET_PARAMS"
        }
        document.getElementById("issue-card-page").contentWindow.postMessage(JSON.stringify(params), ORIGIN);
      } catch (error) {
        console.log(error);
      }
    }
    function gotoStep(step) {
      var ORIGIN = "http://localhost:3000";
      var params = {
        "payload": {
          "step": step
        },
        "type": "C91_ISSUE_CARD_SET_FORM_STEP"
      }
      document.getElementById("issue-card-page").contentWindow.postMessage(JSON.stringify(params), ORIGIN);

    }
    function onSubmit() {
      var ORIGIN = "http://localhost:3000";
      var params = {
        "payload": null,
        "type": "C91_ISSUE_CARD_SET_SUBMIT"
      }
      document.getElementById("issue-card-page").contentWindow.postMessage(JSON.stringify(params), ORIGIN);

    }

  </script>
  <iframe onLoad="txnPage()" src="https://card-webview-sandbox.card91.io/issue-card?templateId=xoltt&platform=ios" frameborder="0"
    allow="midi" id="issue-card-page"></iframe>
  <div>
    <button type="button" id="step-1" onclick="gotoStep('step1')"> Step1</button>
    <button type="button" onclick="gotoStep('step2')">Step2</button> // If wants to move to next step if multiple steps and defined on custom field json object
    <button type="button" onclick="gotoStep('step3')">Step3</button>
    <button type="button" onclick="gotoStep('step4')">Step4</button>
    <button type="button" onclick="onSubmit()">Submit</button> // When user wants to submit the filled form for issue card

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

</html>