I'm trying to build a custom element to put a focused view of a docusign document in an elm app. It almost works, but in the app, I'm just getting an infinite spinner and a "powered by docusign" logo in the bottom right.
I wonder if the issue is upstream, as when I try to just paste the embed url in the browser directly, it just goes straight to the redirect url. Not sure where to look to figure out what's going on.
https://developers.docusign.com/docs/esign-rest-api/how-to/request-signature-focused-view/
customElements.define('docusign-signature',
class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
console.log('Connected callback triggered');
this.render();
}
attributeChangedCallback(name, oldValue, newValue) {
console.log(`Attribute changed: ${name}, Old value: ${oldValue}, New value: ${newValue}`);
this.render();
}
static get observedAttributes() {
return ['url', 'integration-key'];
}
render() {
console.log('Render method called');
const url = this.getAttribute('url');
const integrationKey = this.getAttribute('integration-key');
console.log('URL:', url);
console.log('Integration Key:', integrationKey);
if (!url || !integrationKey) {
console.log('Missing required attributes');
this.shadowRoot.innerHTML = 'Missing required attributes';
return;
}
const style = document.createElement('style');
style.textContent = `
.docusign-agreement {
width: 100%;
height: 800px;
}
`;
this.shadowRoot.appendChild(style);
const agreementDiv = document.createElement('div');
agreementDiv.className = 'docusign-agreement';
agreementDiv.id = 'agreement';
this.shadowRoot.appendChild(agreementDiv);
const script = document.createElement('script');
script.src = 'https://js.docusign.com/bundle.js';
script.onload = () => {
console.log('DocuSign script loaded');
window.DocuSign.loadDocuSign(integrationKey)
.then((docusign) => {
console.log('DocuSign loaded successfully');
const signing = docusign.signing({
url: url,
displayFormat: 'focused',
style: {
branding: {
primaryButton: {
backgroundColor: '#333',
color: '#fff'
}
},
signingNavigationButton: {
finishText: 'You have finished the document! Hooray!',
position: 'bottom-center'
}
}
});
signing.on('ready', (event) => {
console.log('UI is rendered');
});
signing.on('sessionEnd', (event) => {
console.log('sessionend', event);
});
signing.mount(this.shadowRoot.querySelector('#agreement'));
})
.catch((ex) => {
console.error('Error loading DocuSign:', ex);
});
};
this.shadowRoot.appendChild(script);
}
}
);
EDIT Adding relevant HAR file content per question below
"cache": {},
"connection": "976400",
"request": {
"method": "GET",
"url": "https://demo.docusign.net/Signing/RasterizerImage.aspx?insession=1&ti=7e2359c830454567a88c60fe6b75ce97&p=5&d=150&pid=b1aff4b7-0888-4195-a695-d1cf983cb8b6&vm=false",
"httpVersion": "HTTP/1.1",
"headers": [
{
"name": "Accept",
"value": "image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8"
},
{
"name": "Accept-Encoding",
"value": "gzip, deflate, br"
},
{
"name": "Accept-Language",
"value": "en-US,en;q=0.9"
},
{
"name": "Connection",
"value": "keep-alive"
},
{
"name": "Cookie",
"value": "drift_aid=bdd6ff22-9e95-4fb8-b904-e904955798f1; driftt_aid=bdd6ff22-9e95-4fb8-b904-e904955798f1; drift_eid=84225428-aa42-4559-8614-f3c8befbbf90; pv=DA4DFE71_7801; ssid=deg4dob3hltz3vzaefbvqjim; MemberConsoleMobile=; __RequestVerificationToken_L1NpZ25pbmc1=AUg7xNmdsECMOXs8jueYqMkB0; DSSessionAttributes=EnvelopeId:7addcbc5-ffb4-4a25-a7f2-e092fc4f73ca,SenderAccountId:0a060a89-b542-4301-90b4-d45c7d5ef06e,RecipientAccountId:cccccccc-cccc-cccc-cccc-cccccccccccc,RecipientId:0e8a037b-5627-41d7-a5f5-9b2fa47b6e40"
},
{
"name": "DNT",
"value": "1"
},
{
"name": "Host",
"value": "demo.docusign.net"
},
{
"name": "Referer",
"value": "https://demo.docusign.net/Signing/?insession=1&ti=7e2359c830454567a88c60fe6b75ce97"
},
{
"name": "Sec-Fetch-Dest",
"value": "image"
},
{
"name": "Sec-Fetch-Mode",
"value": "no-cors"
},
{
"name": "Sec-Fetch-Site",
"value": "same-origin"
},
{
"name": "User-Agent",
"value": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 OPR/107.0.0.0"
},
{
"name": "sec-ch-ua",
"value": "\"Not A(Brand\";v=\"99\", \"Opera GX\";v=\"107\", \"Chromium\";v=\"121\""
},
{
"name": "sec-ch-ua-mobile",
"value": "?0"
},
{
"name": "sec-ch-ua-platform",
"value": "\"macOS\""
}
],
"queryString": [
{
"name": "insession",
"value": "1"
},
{
"name": "ti",
"value": "7e2359c830454567a88c60fe6b75ce97"
},
{
"name": "p",
"value": "5"
},
{
"name": "d",
"value": "150"
},
{
"name": "pid",
"value": "b1aff4b7-0888-4195-a695-d1cf983cb8b6"
},
{
"name": "vm",
"value": "false"
}
],
"cookies": [
{
"name": "drift_aid",
"value": "bdd6ff22-9e95-4fb8-b904-e904955798f1",
"path": "/",
"domain": ".docusign.net",
"expires": "2025-04-11T00:46:52.772Z",
"httpOnly": false,
"secure": true,
"sameSite": "None"
},
{
"name": "driftt_aid",
"value": "bdd6ff22-9e95-4fb8-b904-e904955798f1",
"path": "/",
"domain": ".docusign.net",
"expires": "2025-04-11T00:46:52.772Z",
"httpOnly": false,
"secure": true,
"sameSite": "None"
},
{
"name": "drift_eid",
"value": "84225428-aa42-4559-8614-f3c8befbbf90",
"path": "/",
"domain": ".docusign.net",
"expires": "1969-12-31T23:59:59.000Z",
"httpOnly": false,
"secure": true,
"sameSite": "None"
},
{
"name": "pv",
"value": "DA4DFE71_7801",
"path": "/",
"domain": "demo.docusign.net",
"expires": "1969-12-31T23:59:59.000Z",
"httpOnly": true,
"secure": true,
"sameSite": "None"
},
{
"name": "ssid",
"value": "deg4dob3hltz3vzaefbvqjim",
"path": "/",
"domain": "demo.docusign.net",
"expires": "1969-12-31T23:59:59.000Z",
"httpOnly": true,
"secure": true,
"sameSite": "None"
},
{
"name": "MemberConsoleMobile",
"value": "",
"path": "/",
"domain": "demo.docusign.net",
"expires": "1969-12-31T23:59:59.000Z",
"httpOnly": false,
"secure": true,
"sameSite": "None"
},
{
"name": "__RequestVerificationToken_L1NpZ25pbmc1",
"value": "AUg7xNmdsECMOXs8jueYqMkB0",
"path": "/",
"domain": "demo.docusign.net",
"expires": "1969-12-31T23:59:59.000Z",
"httpOnly": true,
"secure": true,
"sameSite": "None"
},
{
"name": "DSSessionAttributes",
"value": "EnvelopeId:7addcbc5-ffb4-4a25-a7f2-e092fc4f73ca,SenderAccountId:0a060a89-b542-4301-90b4-d45c7d5ef06e,RecipientAccountId:cccccccc-cccc-cccc-cccc-cccccccccccc,RecipientId:0e8a037b-5627-41d7-a5f5-9b2fa47b6e40",
"path": "/",
"domain": "demo.docusign.net",
"expires": "1969-12-31T23:59:59.000Z",
"httpOnly": true,
"secure": true,
"sameSite": "None"
}
],
"headersSize": 1309,
"bodySize": 0
},
"response": {
"status": 200,
"statusText": "OK",
"httpVersion": "HTTP/1.1",
"headers": [
{
"name": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
},
{
"name": "Content-Length",
"value": "138926"
},
{
"name": "Content-Type",
"value": "image/gif"
},
{
"name": "Date",
"value": "Tue, 12 Mar 2024 18:11:07 GMT"
},
{
"name": "Referrer-Policy",
"value": "strict-origin-when-cross-origin"
},
{
"name": "Set-Cookie",
"value": "pv=DA4DFE71_7801; path=/; secure; HttpOnly; SameSite=None"
},
{
"name": "Strict-Transport-Security",
"value": "max-age=31536000; includeSubDomains; preload"
},
{
"name": "X-Content-Type-Options",
"value": "nosniff"
},
{
"name": "X-DocuSign-Node",
"value": "DA4DFE71"
},
{
"name": "X-XSS-Protection",
"value": "1; mode=block"
}
],
"cookies": [
{
"name": "pv",
"value": "DA4DFE71_7801",
"path": "/",
"domain": "demo.docusign.net",
"expires": null,
"httpOnly": true,
"secure": true,
"sameSite": "None"
}
],
"content": {
"size": 138926,
"mimeType": "image/gif",
"compression": 0,
"text": "R0lGODlh+wRyBvcAAAAAAA8PDxAQEB8fHyMfICYgFigiGCokGiwmHS4oHyAgIC8pIC4sKC8uLjAqITIsIjMuJDQuJTAtLjYwJzcxKDgzKjk0Kzo1LDw2LT04LzAwMD45MD06Oz47PD8/P10YEUA7MkE8M0I8NEQ+NUVAN0ZBOEhCOklEPExHP0xIP0BAQEVFRU5JQUtISUxJSk9PT1BLQ1JNRVROR1VQSFhTS1pWTlBQUFRUVFlWV1xXUFpXWF1YUV9fX2JdVmRfWGRgWWdjXGlkXWBgYGZkZGhlZG5qY2tram9taW9vb3BsZnJuaHRvaXFucnRxanZybHh0bnBwcHVyc3VzdHR0dHp2cHt4cXx4cn56dH9/f4B8doF+eKBeWbtaVtcoJuobGv8AAP8ODv8QEP8XF/8aGv8fH/8gIP8kJP8vL/8wMP81Nf85Of8+PutMTPdHRv9AQP9FRf9JSf9PT/9QUP9XV/9ZWf9fX+FwbvFgYP9gYP9kZP9oaP9vb/9wcP91df96ev9+foSAeoWBfIeEfoiFf4GAgoqGgYuIg42KhY+MhouLi4+Pj5CNh5GOiZCOj5GPkJOQi5WSjpCQkJeUkJSUlJiVkJuYk5uZlJ2alp6cl5+cmJ6enqCdmaOhnKKgoaakoaimoqmoo6qopKyqpqurqayqqq2rrK6sqK+vr7CuqrKvrLKwrbSyrrCwsLa0sbi2s7m3tLq4tby6t7m4ub27uL28ub6+vsC+u/+AgP+Ghv+Kiv+Pj/+QkP+Vlf+amv+env+goP+qqv+urv+wsP++vsLAvcDAwMTDwMbEwsfGx8jGw8jHxM7Aw.......(very long)
The console logs also:
Focused view library does search for the iframe where the envelope is loaded after mounting on screen. As you are registering it as a shadow root this cannot be found. I was able to find a solution for that removing the shadow root usage and registering it as a regular DOM element.
One side suggestion is to remove this.render() from attributeChangedCallback because this makes the component to re-render and invalidates the generated link (as embedded signing links can only be used once and trying to re-use a link that was previously accessed will throw another infinite spinning loading in side the loaded div).
Please check if this works for you! ;D