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-combobox-view
- av-blueprint-buttons-view [showCount, color, noIcon, noLabel, block]
- av-blueprint-select-view
- av-blueprint-form-view [customer*, agent, blueprint*, variant]
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.
<!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/vuetify@3.0/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/merchant-customer-web-component@1.0.0/dist/index.umd.js" onload="start()"></script>
</body>
</html>