- ${this.showNavigation ? `
-
- ${this.hideBackToHost ? "" : `
-
- `}
-
-
- ` : ""}
-
-
- We need access to your camera so that we can take selfie and proof-of-life images.
-
-
-
-
- ${this.hideAttribution ? "" : `
-
- `}
-
-
-
-
- ${this.showNavigation ? `
-
-
-
- ` : ""}
-
Review Selfie
-
-
-
-
-
-
-
- Is this clear enough?
-
-
-
- Make sure your face is clear enough and the photo is not blurry
-
-
-
-
-
-
- ${this.hideAttribution ? "" : `
-
- `}
-
-
-
- ${this.showNavigation ? `
-
-
-
-
- ` : ""}
-
-
-
-
-
-
Check the lighting
-
- Take your ID document image in a well-lit environment where it is easy to read, and free from glare on the card.
-
-
-
-
-
-
-
Make sure it's in focus
-
- Ensure the photo of the ID document you submit is not blurry: you should be able to read the text on the document.
-
-
-
-
-
- ${this.supportBothCaptureModes || this.documentCaptureModes === "camera" ? `
-
- ` : ""}
- ${this.supportBothCaptureModes || this.documentCaptureModes === "upload" ? `
-
- ` : ""}
-
- ${this.hideAttribution ? "" : `
-
- `}
-
-
-
- ${this.showNavigation ? `
-
-
-
-
- ` : ""}
-
-
-
-
-
-
Check the lighting
-
- Take your ID document image in a well-lit environment where it is easy to read, and free from glare on the card.
-
-
-
-
-
-
-
Make sure it's in focus
-
- Ensure the photo of the ID document you submit is not blurry: you should be able to read the text on the document.
-
-
-
-
-
-
- ${!this.documentType ? `
-
- ` : ""}
- ${this.supportBothCaptureModes || this.documentCaptureModes === "camera" ? `
-
- ` : ""}
- ${this.supportBothCaptureModes || this.documentCaptureModes === "upload" ? `
-
- ` : ""}
-
- ${this.hideAttribution ? "" : `
-
- `}
-
-
-
-
-
-
-
-
-
-
-
-
-
- This consent screen is for illustrative purposes only. Demo App does not collect personal ID data.
-
-
-
- ${this.partnerName}
- wants to access your
- ${this.idTypeLabel}
- information
-
-
- This will allow ${this.partnerName} to:
-
-
-
-
- -
-
-
- Process your personal details
-
-
-
-
- -
-
-
- Process your contact information
-
-
-
-
- -
-
-
- Process your document information
-
-
-
-
-
-
-
- You can view ${this.partnerName}'s privacy policy
- here
-
-
-
- By choosing "Allow",
- you grant
- ${this.partnerName}
- consent to process your personal data
- to offer you this service
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Consent Denied
-
-
-
- We cannot verify you without your consent
-
-
-
- Wish to correct that?
-
-
-
-
-
-
-
-
- Powered by SmileID
-
-
-
- `;
- }
- var EndUserConsent = class extends HTMLElement {
- constructor() {
- super();
- this.idRequiresTotpConsent = ["BVN_MFA"];
- this.templateString = templateString.bind(this);
- this.render = () => {
- return this.templateString();
- };
- this.attachShadow({ mode: "open" });
- }
- connectedCallback() {
- this.pages = [];
- const template = document.createElement("template");
- template.innerHTML = this.render();
- this.shadowRoot.appendChild(template.content.cloneNode(true));
- this.consentScreen = this.shadowRoot.querySelector("#consent-screen");
- this.totpConsentApp = this.shadowRoot.querySelector("totp-consent-app");
- this.consentRejectedScreen = this.shadowRoot.querySelector(
- "#consent-rejected-screen"
- );
- this.allowButton = this.shadowRoot.querySelector("#allow");
- this.rejectButton = this.shadowRoot.querySelector("#cancel");
- this.backToConsentButton = this.shadowRoot.querySelector("#back-to-consent");
- this.confirmConsentRejectionButton = this.shadowRoot.querySelector(
- "#confirm-consent-rejection"
- );
- this.backButton = this.shadowRoot.querySelector("#back-button");
- const CloseIframeButtons = this.shadowRoot.querySelectorAll(".close-iframe");
- this.allowButton.addEventListener(
- "click",
- (e) => this.handleConsentGrant(e)
- );
- this.rejectButton.addEventListener(
- "click",
- (e) => this.handleConsentGrant(e)
- );
- this.backToConsentButton.addEventListener(
- "click",
- () => this.setActiveScreen(this.consentScreen)
- );
- this.confirmConsentRejectionButton.addEventListener(
- "click",
- (e) => this.handleConsentRejection(e)
- );
- this.totpConsentApp.addEventListener(
- "SmileIdentity::ConsentDenied::TOTP::ContactMethodsOutdated",
- (e) => this.handleTotpConsentEvents(e)
- );
- this.totpConsentApp.addEventListener(
- "SmileIdentity::ConsentGranted::TOTP",
- (e) => this.handleTotpConsentEvents(e)
- );
- this.totpConsentApp.addEventListener(
- "SmileIdentity::ConsentDenied::Back",
- (e) => this.handleBackEvents(e)
- );
- this.backButton.addEventListener("click", (e) => {
- this.handleBackEvents(e);
- });
- CloseIframeButtons.forEach((button) => {
- button.addEventListener(
- "click",
- () => {
- this.closeWindow();
- },
- false
- );
- });
- this.activeScreen = this.consentScreen;
- }
- setActiveScreen(screen) {
- this.activeScreen.hidden = true;
- screen.hidden = false;
- this.activeScreen = screen;
- }
- get baseUrl() {
- return this.getAttribute("base-url");
- }
- get country() {
- return this.getAttribute("country");
- }
- get demoMode() {
- return !!this.hasAttribute("demo-mode");
- }
- get hideBack() {
- return this.hasAttribute("hide-back-to-host");
- }
- get idHint() {
- return this.getAttribute("id-hint") || "Your BVN should be 11 digits long";
- }
- get idRegex() {
- return this.getAttribute("id-regex");
- }
- get idType() {
- return this.getAttribute("id-type");
- }
- get idTypeLabel() {
- return this.getAttribute("id-type-label");
- }
- get partnerId() {
- return this.getAttribute("partner-id");
- }
- get partnerName() {
- return this.getAttribute("partner-name");
- }
- get partnerLogoURL() {
- return this.getAttribute("partner-logo");
- }
- get partnerPolicyURL() {
- return this.getAttribute("policy-url");
- }
- get themeColor() {
- return this.getAttribute("theme-color") || "#043C93";
- }
- get token() {
- return this.getAttribute("token");
- }
- handleConsentGrant(e) {
- const granted = e.target === this.allowButton;
- if (granted) {
- if (this.idRequiresTotpConsent.includes(this.idType)) {
- this.setActiveScreen(this.totpConsentApp);
- this.pages.push(this.consentScreen);
- } else {
- this.dispatchEvent(
- new CustomEvent("SmileIdentity::ConsentGranted", {
- detail: {
- consented: {
- personal_details: granted,
- contact_information: granted,
- document_information: granted
- }
- }
- })
- );
- }
- } else {
- this.setActiveScreen(this.consentRejectedScreen);
- }
- }
- handleConsentRejection() {
- this.dispatchEvent(new CustomEvent("SmileIdentity::ConsentDenied"));
- }
- handleTotpConsentEvents(e) {
- const customEvent = new CustomEvent(e.type, {
- detail: {
- ...e.detail
- }
- });
- this.dispatchEvent(customEvent);
- }
- handleBackEvents() {
- const page = this.pages.pop();
- if (page) {
- this.setActiveScreen(page);
- } else {
- this.dispatchEvent(new CustomEvent("SmileIdentity::Exit"));
- }
- }
- closeWindow() {
- const referenceWindow = window.parent;
- referenceWindow.postMessage("SmileIdentity::Close", "*");
- }
- };
- var ConsentScreen_default = EndUserConsent;
-
- // src/js/components/TotpConsentApp.js
- var import_validate = __toESM(require_validate(), 1);
- function postData(url, data) {
- return fetch(url, {
- method: "POST",
- mode: "cors",
- cache: "no-cache",
- headers: {
- Accept: "application/json",
- "Content-Type": "application/json"
- },
- body: JSON.stringify(data)
- });
- }
- function markup() {
- return `
-
-
-