@authvia/merchant-customers-web-component
v1.2.3
Published
Web component exporting of the @authvia/merchant-customers vue 3 module.
Downloads
34
Maintainers
francomanfredi
nidhisahay
ayadav_c
paragtyagi
ravialgo
abhishek_paliwal
akaraizada
naveenjain01
zehqresh
matt-filion
authvia.com
gitlab-ci-authvia
mohit07
jeff-authvia
anjuauthvia
akibrkKeywords
Readme
@authvia/merchant-customers-web-component
All elements required a token attribute, or no data can be loaded. Variant can be provided to change the default rendering.
For each view between the square brackets are additional parameters. A * denotes required.
- av-customer-view [customer, agent]
- av-customer-view-no-theme [customer, agent]
Vuetify + Material Design Icons
These components are built with Vuteify 3 and Material Design icons, include this in the context of your application to get the out of the box styling.
Vanilla JS Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Component in Vanilla JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<link href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<!-- The custom message component will be rendered here -->
</div>
<script>
function start() {
document.addEventListener('DOMContentLoaded', function() {
const app = document.getElementById('app');
const variants = ['filled', 'outlined', 'plain', 'underlined', 'solo', 'solo-inverted', 'solo-filled'];
async function initializeComponent() {
const urlParams = new URLSearchParams(window.location.search);
const jwt = urlParams.get('jwt');
const variant = urlParams.get('variant') || 'filled';
const ref = urlParams.get('ref');
let token;
if (jwt) {
token = jwt;
console.log('Using JWT from query string:', token);
} else {
const response = await fetch('https://script.googleusercontent.com/macros/echo?user_content_key=-RDFpI-yeTEysntKEVd5sIWiwhWwcxMcJLtbiiZGhHaWbpqsTPvneWAt86aHHiDeiSXAlUEVNxFH5ixQmtj3DKxuxBJCLLvtOJmA1Yb3SEsKFZqtv3DaNYcMrmhZHmUMWojr9NvTBuBLhyHCd5hHa6JU74eumvPRqCftPGxsfevkJLsFs1OGfA6zSaks54U6gi1sCjVZKkaqr_aG_CGQSeLUibw3LMmFib66jHJt7uUGwAeH4guwHy0vlmM4YvJMMdHEeif_FQ9M0mDqUmU3g75jg7X28i1bkoLIPB6M515XfzzMx7PSFQ&lib=MfZryqrTgmYQ_sKHaRwSQbwvMTxXpJf2f');
token = await response.text();
console.log('fetch response --', token);
}
const parts = token.split('.');
const payload = JSON.parse(atob(parts[1]));
const environment = payload.iss;
const merchant = payload['https://authvia.com/merchant'];
let contentHtml = `
<div style="display: flex; flex-wrap: wrap; flex-direction: row;border-bottom: 1px solid black;margin-bottom: 2em;padding: 1em;text-align: left;">
<div style="width: 100%;padding: .5em"><p>Querystring options</p>
<ul style="padding-left: 2em;">
<li>jwt - ... the jwt.</li>
<li>variant - The vuetify style, ${variants.join(', ')}</li>
<li>ref - A customer reference on this merchant.</li>
</ul>
</div>
<div style="width: 20%;padding: .5em">Env <br/><strong>${environment || 'loading'}</strong></div>
<div style="width: 20%;padding: .5em">Ref <br/><strong>${ref || ''}</strong></div>
<div style="width: 20%;padding: .5em" style="color: ${variant && !variants.includes(variant) ? 'red' : ''}">Variant <br/><strong>${variant || 'loading'}</strong></div>
<div style="width: 40%;padding: .5em">Merchant <br/><strong>${merchant || 'loading'}</strong></div>
</div>
<av-customer-view ${ref ? 'customer="' + ref +'"' : ''} token="${token}" variant="${variant}" />
`;
app.innerHTML = contentHtml;
}
initializeComponent();
});
}
</script>
<script src="https://cdn.jsdelivr.net/npm/@authvia/[email protected]/dist/index.umd.js" onload="start()"></script>
</body>
</html>