@securecall/client-component
Version:
SecureCall Core Web Component
239 lines (204 loc) • 9.07 kB
JavaScript
// ### DEFAULT SECTION ### //
function updateEventLog(eventName, eventData) {
const eventLog = document.getElementById('event-log');
const data = {name: eventName, event: eventData};
const content = document.createElement('p');
content.innerText = (JSON.stringify(data));
eventLog.appendChild(content);
}
/* Wait for the document to be fully loaded */
document.addEventListener('DOMContentLoaded', () => {
// Define WebComponent after the document is ready
// ### ELEMENTS ### //
const secureButton = document.getElementById('secureButton');
const myComponent = document.querySelector('securecall-client');
const authorizeButton = document.getElementById('authorizeButton');
const anotherTransactionSuccess = document.getElementById('anotherTransactionSuccess');
const anotherTransactionFailure = document.getElementById('anotherTransactionFailure');
const logoutButton = document.getElementById('logoutButton');
// Call Secure method directly
secureButton.addEventListener('click', () => {
myComponent.secure().then(() => {
});
});
// listens for events emitted in response to call-secured.
myComponent.addEventListener('callSecured', (event) => {
// Handle your callSecured event here
console.log('>>>> Action Alert: callSecured:', JSON.stringify(event.detail, null, 1));
secureButton.disabled = true;
updateEventLog('callSecured', event);
});
// listens for events emitted in response to callEnded.
myComponent.addEventListener('callEnded', (event) => {
// Handle your callEnded event here
console.log('>>>> Action Alert: callEnded:', JSON.stringify(event, null, 1));
secureButton.disabled = false;
updateEventLog('callEnded', event);
});
// ### AUTH SECTION ### //
// Call auth method directly
authorizeButton.addEventListener('click', () => {
const useCookie = document.getElementById('useCookie').checked;
let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
myComponent.authenticate(username, password, useCookie).then(() => {
console.log('>>>> DEBUG: Event Stream closed');
});
});
clearButton.addEventListener('click', (event) => {
const buttonLabel = event.currentTarget.textContent;
if (buttonLabel === 'Populate') {
document.getElementById('username').value = "";
document.getElementById('password').value = "";
document.getElementById('useCookie').checked = false;
clearButton.textContent = 'Clear';
} else {
document.getElementById('username').value = "";
document.getElementById('password').value = "";
clearButton.textContent = 'Populate';
}
authorizeButton.disabled = false;
});
useCookie.addEventListener('click', () => {
if (!document.getElementById('useCookie').checked) {
document.getElementById('username').value = "";
document.getElementById('password').value = "";
}
});
// listens for events emitted in response to authenticationFailure.
myComponent.addEventListener('authenticationFailure', (event) => {
// Handle your authenticationFailure event here
console.log('>>>> Action Alert: authenticationFailure Received by host application:', JSON.stringify(event));
updateEventLog('authenticationFailure', event);
authorizeButton.disabled = false;
});
myComponent.addEventListener('authenticationSuccess', (event) => {
// Handle your authenticationSuccess event here
console.log('>>>> Action Alert: authenticationSuccess Received by host application:', JSON.stringify(event));
updateEventLog('authenticationSuccess', event);
logoutButton.disabled = false;
});
// ### CONFIGURATION SECTION ##//
setTransactionButton.addEventListener('click', async () => {
await myComponent.updateTransactionRequestFields(f => {
if(f.currency) f.currency.value = 'eur'; // If the Instance Config button hasnt been pressed then the currency field doesnt exist
f.amount.value = 13.45;
f.paymentReference.value = 'ref-' + Date.now();
})
})
setSessionButton.addEventListener('click', async () => {
await myComponent.updateSessionRequestFields(f => {
f.transactionType.value = 'tokenise'
f.transactionType.readOnly = true;
f.tokenReference.value = 'ref-' + Date.now();
})
})
setInstanceButton.addEventListener('click', async () => {
await myComponent.updateRequestFields(f => {
f.addNewField('currency', {
order: 15,
mapping: 'metadata.currency',
label: 'Currency',
component: 'select',
readOnly: false,
hidden: false,
possibleValues: {gbp: 'GBP', usd: 'USD', eur: 'EUR'}
})
f.amount.readOnly = true;
f.paymentReference.readOnly = true;
})
})
// ### PAYMENT SECTION ### //
// listens for events emitted in response to paymentSuccess.
myComponent.addEventListener('paymentSuccess', (event) => {
// Handle paymentSuccess event here
console.log('>>>> Action Alert: paymentSuccess Event Received by host application:', JSON.stringify(event.detail, null, 1));
updateEventLog('paymentSuccess', event);
});
myComponent.addEventListener('paymentFailure', (event) => {
// Handle paymentFailure event here
console.log('>>>> Action Alert: paymentFailure Event Received by host application:', JSON.stringify(event.detail, null, 1));
updateEventLog('paymentFailure', event);
});
anotherTransactionButton.addEventListener('click', () => {
const varResetPaymentDetails = document.getElementById('resetPaymentDetails').checked;
let varResetCardFields = []
if (document.getElementById('resetPAN').checked) {
varResetCardFields.push('pan')
}
if (document.getElementById('resetExpiry').checked) {
varResetCardFields.push('expiry')
}
if (document.getElementById('resetCVV').checked) {
varResetCardFields.push('cvv')
}
if (document.getElementById('resetAll').checked) {
varResetCardFields = ['all']
}
myComponent.triggerAnotherTransaction(varResetPaymentDetails, varResetCardFields)
.then(() => {
anotherTransactionButton.disabled = true;
})
.catch(err => {
console.error('triggerAnotherTransaction error: ', err);
});
});
async function handleAnotherTransactionChange() {
await myComponent.updateResponseFields(f => {
f.anotherTransaction.showOnSuccess = anotherTransactionSuccess.checked;
f.anotherTransaction.showOnFailure = anotherTransactionFailure.checked;
});
}
anotherTransactionSuccess.addEventListener('change', handleAnotherTransactionChange);
anotherTransactionFailure.addEventListener('change', handleAnotherTransactionChange);
// ### PAYMENT GATEWAY SECTION ### //
// Toggle Payment Gateway displaying of Transaction Results
const displayTransactionResultsCheckbox = document.getElementById('displayTransactionResults');
displayTransactionResultsCheckbox.addEventListener('change', () => {
myComponent.displayTransactionResult = displayTransactionResultsCheckbox.checked;
});
// Toggle Payment Gateway displaying of Transaction Errors
const displayTransactionErrorsCheckbox = document.getElementById('displayTransactionErrors');
displayTransactionErrorsCheckbox.addEventListener('change', () => {
myComponent.updateResponseFields(f => {
f.errorMessage.showOnFailure = displayTransactionErrorsCheckbox.checked;
f.errorCode.showOnFailure = displayTransactionErrorsCheckbox.checked;
});
});
// ### THEME SECTION ### //
const themeToggle = document.getElementById('themeToggle');
let isLightTheme = false;
// Function to toggle the theme and change the icon
function toggleTheme() {
isLightTheme = !isLightTheme;
const body = document.body;
const themeIcon = document.querySelector('.theme-icon');
if (isLightTheme) {
themeIcon.innerHTML = '☀️'; // Light theme icon
body.style.color = "#333";
body.style.backgroundImage = "url('../assets/light_theme_background.jpg')";
myComponent.theme = "light";
} else {
themeIcon.innerHTML = '🌙'; // Dark theme icon
body.style.color = "#fff";
body.style.backgroundImage = "url('../assets/dark_theme_background.jpg')";
myComponent.theme = "dark";
}
}
// Add a click event listener to the theme toggle button
themeToggle.addEventListener('click', toggleTheme);
// ### LOGOUT SECTION ### //
// Triggers Logout Method
logoutButton.addEventListener('click', () => {
console.debug('>>>> DEBUG: logout button clicked');
myComponent.logout();
});
// listens for events emitted in response to loggedOut
myComponent.addEventListener('loggedOut', (event) => {
console.debug('>>>> Action Required: loggedOut Received by host application:', event);
updateEventLog('loggedOut', event);
// Handle your loggedOut event here
authorizeButton.disabled = false;
logoutButton.disabled = true;
});
});