@securecall/client-component
Version:
SecureCall Core Web Component
162 lines (152 loc) • 5.83 kB
HTML
<html lang="en-AU">
<head>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SecureCall</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="simple.css">
<script type="module" src="../../dist/client-component/client-component.esm.js"></script>
<script src="simple.js"></script>
<!--
This next line is only required for simplicity.
In a real application you would typically put the regional Client API URL in the api-location
property of the <securecall-client> tag
-->
<script type="text/javascript" src="https://client.securecall.cloud/client_api_location.js"></script>
</head>
<body>
<div class="grid-container">
<div class="header">
<h2>Simple Test Application</h2>
</div>
<div class="menu">
<p>Embedded Web Component</p>
<div id="web-component">
<securecall-client id="securecall" theme="dark"></securecall-client>
<!--
This assigns the api location found in the script above.
Typically, you would use the relevant regional Client API endpoint in the <securecall-client> tag above
-->
<script>document.getElementById('securecall').apiLocation = CLIENT_API_ENDPOINT</script>
</div>
<p>Event Log</p>
<div id="event-log"></div>
</div>
<div class="main">
<div class="login-group">
<div class="form-column">
<h4>External Login</h4>
</div>
<div class="form-column">
Credentials:
</div>
<div class="form-column">
<input type="text" id="username" name="username">
</div>
<div class="form-column">
<input type="text" id="password" name="password" autocomplete="off">
</div>
<div class="form-column">
<label for="useCookie">Cookie:</label>
<input type="checkbox" id="useCookie" name="useCookie">
</div>
<div class="form-column">
<button type="button" id="clearButton">Clear</button>
</div>
<div class="form-column">
<button type="button" id="authorizeButton">Authorize</button>
</div>
<div class="form-column">
<section class="logout-section">
<button type="button" id="logoutButton" disabled>Logout</button>
</section>
</div>
</div>
<div class="configProperties">
<div class="sub-title-group">
<div>
<h4>Configure Request Fields</h4>
</div>
</div>
<div class="button-group">
<div class="form-column">
<button type="button" id="setTransactionButton">Set Transaction Config</button>
</div>
<div class="form-column">
<p> </p>
</div>
<div class="form-column">
<button type="button" id="setSessionButton">Set Session Config</button>
</div>
<div class="form-column">
<p> </p>
</div>
<div class="form-column">
<button type="button" id="setInstanceButton">Set Instance Config</button>
</div>
</div>
<div class="properties-group">
<div>
Another Transaction:
<p>
<input type="checkbox" id="anotherTransactionSuccess" name="anotherTransactionSuccess" checked>
<label for="anotherTransactionSuccess">: showOnSuccess</label>
</p>
<p>
<input type="checkbox" id="anotherTransactionFailure" name="anotherTransactionFailure" checked>
<label for="anotherTransactionFailure">: showOnFailure</label>
</p>
</div>
<div>
<p>
<input type="checkbox" id="displayTransactionResults" name="displayTransactionResults" checked>
<label for="displayTransactionResults">: displayTransactionResult</label>
</p>
</div>
<div>
<p>
<input type="checkbox" id="displayTransactionErrors" name="displayTransactionErrors">
<label for="displayTransactionErrors">: displayTransactionErrors</label>
</p>
</div>
<div>
<div class="theme-icon" id="themeToggle">🌙</div>
<label for="themeToggle">: theme</label>
</div>
</div>
</div>
<div id="form_footer">
<h3>Methods</h3>
<div class="methods-group">
<div class="form-column"><button type="button" id="secureButton">secure()</button></div>
</div>
<div class="methods-group">
<div class="form-column">
<button type="button" id="anotherTransactionButton">triggerAnotherTransaction()</button>
</div>
<div class="form-column">
<p>
<label for="resetPaymentDetails">Reset Payment Details:</label>
<input type="checkbox" id="resetPaymentDetails" name="resetPaymentDetails" checked><br/>
</p>
</div>
<div class="method-column">
<p>
<label for="resetPAN">Reset PAN:</label>
<input type="checkbox" id="resetPAN" name="resetPAN"><br/>
<label for="resetExpiry">Reset Expiry:</label>
<input type="checkbox" id="resetExpiry" name="resetExpiry"><br/>
<label for="resetCVV">Reset CVV:</label>
<input type="checkbox" id="resetCVV" name="resetCVV" checked><br/>
<label for="resetAll">Reset All:</label>
<input type="checkbox" id="resetAll" name="resetAll">
</p>
</div>
</div>
</div>
</div>
</div>
<div class="page-footer"> </div>
</body>
</html>