Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@persona-js/verify
Advanced tools
@persona-js/verify - npm Package Compare versions
Comparing version 0.4.0 to 0.4.1
@@ -1,1 +0,1 @@ | ||
| !function(){"use strict";var e,n=function(){return(n=Object.assign||function(e){for(var n,o=1,t=arguments.length;o<t;o++)for(var r in n=arguments[o])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e}).apply(this,arguments)},o=["allow-same-origin","allow-scripts","allow-forms","allow-popups","allow-modals","allow-top-navigation-by-user-activation"];!function(e){e.Start="start",e.Complete="complete",e.Fail="fail",e.Load="load",e.Exit="exit"}(e||(e={}));var t=function(t){var r={start:[],complete:[],fail:[],load:[],exit:[]},i=n({},t.prefill),a=n(n({},t),{prefill:null}),l=function(){return[Object.entries(a).filter((function(e){return null!==e[1]&&"host"!==e[0]})).reduce((function(e,n){var o=n[0],t=n[1];return e+"&"+o+"="+encodeURIComponent(t)}),"?client=something"),Object.entries(i).filter((function(e){return void 0!==e[1]})).map((function(e){var n=e[0],o=e[1];return"prefill["+(n.replace(/([a-z0-9])([A-Z])/g,"$1-$2").replace(/([A-Z])([A-Z])(?=[a-z])/g,"$1-$2").toLowerCase()+"]=")+encodeURIComponent(o)})).join("&")].join("&")},d=function(){var e=document.createElement("div");e.id="persona-js-embedded-flow";var n=document.createElement("style");return n.className="backdrop",n.innerText="\n div#persona-js-embedded-flow {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n width: 100%;\n height: 100vh;\n background-color: #000000AA;\n overflow-y: scroll;\n transition: background-color .2s ease-out;\n }\n\n div#persona-js-embedded-flow iframe {\n position: absolute;\n width: 100%;\n height: 100%;\n margin-right: auto;\n margin-left: auto;\n margin-bottom: 10%;\n left: 0;\n right: 0;\n border-radius: 4px;\n border: none;\n background: white;\n\n }\n\n @media only screen and (min-width: 600px) and (min-height: 600px) {\n div#persona-js-embedded-flow iframe {\n margin-top: 64px;\n max-width: 400px;\n max-height: 650px;\n box-shadow: 0 12px 40px 2px rbga(0, 0, 0, 0.4);\n transition: margin-top .25s ease-out;\n }\n }\n".replace(/^\s+/g,"").replace(/\n/g,""),e.appendChild(n),e},s=function(e){var n=document.createElement("style");return n.className="veil",n.innerText="\n div#persona-js-embedded-flow {\n visibility: hidden;\n background-color: #00000000;\n }\n\n @media only screen and (min-width: 600px) and (min-height: 600px) {\n div#persona-js-embedded-flow iframe {\n margin-top: 68px;\n }\n }\n".replace(/^\s+/g,"").replace(/\n/g,""),e.appendChild(n),n},u=function(){var e=document.createElement("iframe");return e.allow="camera",e.src="https://"+t.host+"/widget"+l()+"&iframe-origin="+encodeURIComponent(window.location.origin),e.setAttribute("sandbox",o.join(" ")),e},c={getHostedFlowUrl:function(){return"https://"+t.host+"/verify"+l()},on:function(e,n){return r[e].push(n),c},prefill:function(e){i=n(n({},i),e)},preload:function(){return new Promise((function(e){var n=d();s(n);var o=function(n){n.origin.includes("//"+t.host)&&"load"===n.data.name&&(window.removeEventListener("message",o),e())};window.addEventListener("message",o),document.body.appendChild(n),n.appendChild(u())}))},start:function(){var n,o,i,a=null!==(n=document.getElementById("persona-js-embedded-flow"))&&void 0!==n?n:d(),l=null!==(o=a.querySelector("style.veil"))&&void 0!==o?o:s(a),c=null!==(i=a.querySelector("iframe"))&&void 0!==i?i:u(),p=function(n){var o=function(){window.removeEventListener("message",p),a.remove()};if(n.origin.includes("//"+t.host))switch(n.data.name){case"load":l.remove();break;case"start":r[e.Start].forEach((function(e,o){try{e(n.data.metadata.inquiryId)}catch(e){console.error("[@persona-js/verify]","Failed to run 'start' event listener #"+o)}}));break;case"complete":r[e.Complete].forEach((function(e,o){try{e(n.data.metadata.inquiryId)}catch(e){console.error("[@persona-js/verify]","Failed to run 'complete' event listener #"+o)}})),o();break;case"fail":r[e.Fail].forEach((function(e,o){try{e(n.data.metadata.inquiryId)}catch(e){console.error("[@persona-js/verify]","Failed to run 'fail' event listener #"+o)}}));break;case"exit":r[e.Exit].forEach((function(e,o){var t;try{e(null!==(t=n.data.metadata.inquiryId)&&void 0!==t?t:null)}catch(e){console.error("[@persona-js/verify]","Failed to run 'exit' event listener #"+o)}})),o()}};window.addEventListener("message",p),document.getElementById("persona-js-embedded-flow")?l.remove():(document.body.appendChild(a),a.appendChild(c))}};return c},r=Object.freeze({__proto__:null,get EventType(){return e},newInquiry:function(e,n){var o,r,i,a,l,d;return t({"template-id":e,host:null!==(o=null==n?void 0:n.host)&&void 0!==o?o:"withpersona.com",language:null!==(r=null==n?void 0:n.language)&&void 0!==r?r:null,environment:null!==(i=null==n?void 0:n.environment)&&void 0!==i?i:"sandbox","reference-id":null!==(a=null==n?void 0:n.referenceId)&&void 0!==a?a:null,"account-id":null!==(l=null==n?void 0:n.accountId)&&void 0!==l?l:null,prefill:null!==(d=null==n?void 0:n.prefill)&&void 0!==d?d:null})},resumeInquiry:function(e,n){var o,r,i,a;return t({"inquiry-id":e,host:null!==(o=null==n?void 0:n.host)&&void 0!==o?o:"withpersona.com",language:null!==(r=null==n?void 0:n.language)&&void 0!==r?r:null,"session-token":null!==(i=null==n?void 0:n.sessionToken)&&void 0!==i?i:null,prefill:null!==(a=null==n?void 0:n.prefill)&&void 0!==a?a:null})}});window&&(window.Persona=r)}(); | ||
| !function(){"use strict";var e,n=function(){return(n=Object.assign||function(e){for(var n,o=1,t=arguments.length;o<t;o++)for(var i in n=arguments[o])Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i]);return e}).apply(this,arguments)},o=["allow-same-origin","allow-scripts","allow-forms","allow-popups","allow-modals","allow-top-navigation-by-user-activation"];!function(e){e.Start="start",e.Complete="complete",e.Fail="fail",e.Load="load",e.Exit="exit"}(e||(e={}));var t=function(t){var i={start:[],complete:[],fail:[],load:[],exit:[]},r=n({},t.prefill),a=n(n({},t),{prefill:null}),l=function(){return[Object.entries(a).filter((function(e){return null!==e[1]&&"host"!==e[0]})).reduce((function(e,n){var o=n[0],t=n[1];return e+"&"+o+"="+encodeURIComponent(t)}),"?client=something"),Object.entries(r).filter((function(e){return void 0!==e[1]})).map((function(e){var n=e[0],o=e[1];return"prefill["+(n.replace(/([a-z0-9])([A-Z])/g,"$1-$2").replace(/([A-Z])([A-Z])(?=[a-z])/g,"$1-$2").toLowerCase()+"]=")+encodeURIComponent(o)})).join("&")].join("&")},d=function(){var e=document.createElement("div");e.id="persona-js-embedded-flow";var n=document.createElement("style");return n.className="backdrop",n.innerText="div#persona-js-embedded-flow{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100vh;background-color:#000000AA;overflow-y:scroll;transition:background-color .2s ease-out}div#persona-js-embedded-flow iframe{position:absolute;width:100%;height:100%;margin-right:auto;margin-left:auto;margin-bottom:10%;left:0;right:0;border-radius:4px;border:none;background:#fff}@media only screen and (min-width:600px) and (min-height:600px){div#persona-js-embedded-flow iframe{margin-top:64px;max-width:400px;max-height:650px;box-shadow:0 12px 40px 2px rbga(0,0,0,.4);transition:margin-top .25s ease-out}}",e.appendChild(n),e},u=function(e){var n=document.createElement("style");return n.className="veil",n.innerText="div#persona-js-embedded-flow{visibility:hidden;background-color:#00000000}@media only screen and (min-width:600px) and (min-height:600px){div#persona-js-embedded-flow iframe{margin-top:68px}}",e.appendChild(n),n},s=function(){var e=document.createElement("iframe");return e.allow="camera",e.src="https://"+t.host+"/widget"+l()+"&iframe-origin="+encodeURIComponent(window.location.origin),e.setAttribute("sandbox",o.join(" ")),e},c={getHostedFlowUrl:function(){return"https://"+t.host+"/verify"+l()},on:function(e,n){return i[e].push(n),c},prefill:function(e){r=n(n({},r),e)},preload:function(){return new Promise((function(e){var n=d();u(n);var o=function(n){n.origin.includes("//"+t.host)&&"load"===n.data.name&&(window.removeEventListener("message",o),e())};window.addEventListener("message",o),document.body.appendChild(n),n.appendChild(s())}))},start:function(){var n,o,r,a=null!==(n=document.getElementById("persona-js-embedded-flow"))&&void 0!==n?n:d(),l=null!==(o=a.querySelector("style.veil"))&&void 0!==o?o:u(a),c=null!==(r=a.querySelector("iframe"))&&void 0!==r?r:s(),m=function(n){var o=function(){window.removeEventListener("message",m),a.remove()};if(n.origin.includes("//"+t.host))switch(n.data.name){case"load":l.remove();break;case"start":i[e.Start].forEach((function(e,o){try{e(n.data.metadata.inquiryId)}catch(e){console.error("[@persona-js/verify]","Failed to run 'start' event listener #"+o)}}));break;case"complete":i[e.Complete].forEach((function(e,o){try{e(n.data.metadata.inquiryId)}catch(e){console.error("[@persona-js/verify]","Failed to run 'complete' event listener #"+o)}})),o();break;case"fail":i[e.Fail].forEach((function(e,o){try{e(n.data.metadata.inquiryId)}catch(e){console.error("[@persona-js/verify]","Failed to run 'fail' event listener #"+o)}}));break;case"exit":i[e.Exit].forEach((function(e,o){var t;try{e(null!==(t=n.data.metadata.inquiryId)&&void 0!==t?t:null)}catch(e){console.error("[@persona-js/verify]","Failed to run 'exit' event listener #"+o)}})),o()}};window.addEventListener("message",m),document.getElementById("persona-js-embedded-flow")?l.remove():(document.body.appendChild(a),a.appendChild(c))}};return c},i=Object.freeze({__proto__:null,get EventType(){return e},newInquiry:function(e,n){var o,i,r,a,l,d;return t({"template-id":e,host:null!==(o=null==n?void 0:n.host)&&void 0!==o?o:"withpersona.com",language:null!==(i=null==n?void 0:n.language)&&void 0!==i?i:null,environment:null!==(r=null==n?void 0:n.environment)&&void 0!==r?r:"sandbox","reference-id":null!==(a=null==n?void 0:n.referenceId)&&void 0!==a?a:null,"account-id":null!==(l=null==n?void 0:n.accountId)&&void 0!==l?l:null,prefill:null!==(d=null==n?void 0:n.prefill)&&void 0!==d?d:null})},resumeInquiry:function(e,n){var o,i,r,a;return t({"inquiry-id":e,host:null!==(o=null==n?void 0:n.host)&&void 0!==o?o:"withpersona.com",language:null!==(i=null==n?void 0:n.language)&&void 0!==i?i:null,"session-token":null!==(r=null==n?void 0:n.sessionToken)&&void 0!==r?r:null,prefill:null!==(a=null==n?void 0:n.prefill)&&void 0!==a?a:null})}});window&&(window.Persona=i)}(); |
@@ -39,4 +39,4 @@ 'use strict'; | ||
| ]; | ||
| var BACKDROP_SEAL_STYLE = "\n div#persona-js-embedded-flow {\n visibility: hidden;\n background-color: #00000000;\n }\n\n @media only screen and (min-width: 600px) and (min-height: 600px) {\n div#persona-js-embedded-flow iframe {\n margin-top: 68px;\n }\n }\n"; | ||
| var BACKDROP_STYLE = "\n div#persona-js-embedded-flow {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n width: 100%;\n height: 100vh;\n background-color: #000000AA;\n overflow-y: scroll;\n transition: background-color .2s ease-out;\n }\n\n div#persona-js-embedded-flow iframe {\n position: absolute;\n width: 100%;\n height: 100%;\n margin-right: auto;\n margin-left: auto;\n margin-bottom: 10%;\n left: 0;\n right: 0;\n border-radius: 4px;\n border: none;\n background: white;\n\n }\n\n @media only screen and (min-width: 600px) and (min-height: 600px) {\n div#persona-js-embedded-flow iframe {\n margin-top: 64px;\n max-width: 400px;\n max-height: 650px;\n box-shadow: 0 12px 40px 2px rbga(0, 0, 0, 0.4);\n transition: margin-top .25s ease-out;\n }\n }\n"; | ||
| var BACKDROP_SEAL_STYLE = 'div#persona-js-embedded-flow{visibility:hidden;background-color:#00000000}@media only screen and (min-width:600px) and (min-height:600px){div#persona-js-embedded-flow iframe{margin-top:68px}}'; | ||
| var BACKDROP_STYLE = 'div#persona-js-embedded-flow{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100vh;background-color:#000000AA;overflow-y:scroll;transition:background-color .2s ease-out}div#persona-js-embedded-flow iframe{position:absolute;width:100%;height:100%;margin-right:auto;margin-left:auto;margin-bottom:10%;left:0;right:0;border-radius:4px;border:none;background:#fff}@media only screen and (min-width:600px) and (min-height:600px){div#persona-js-embedded-flow iframe{margin-top:64px;max-width:400px;max-height:650px;box-shadow:0 12px 40px 2px rbga(0,0,0,.4);transition:margin-top .25s ease-out}}'; | ||
| var camelToKebab = function (camel) { | ||
@@ -96,3 +96,3 @@ return camel | ||
| style.className = 'backdrop'; | ||
| style.innerText = BACKDROP_STYLE.replace(/^\s+/g, '').replace(/\n/g, ''); | ||
| style.innerText = BACKDROP_STYLE; | ||
| backdrop.appendChild(style); | ||
@@ -104,3 +104,3 @@ return backdrop; | ||
| seal.className = 'veil'; | ||
| seal.innerText = BACKDROP_SEAL_STYLE.replace(/^\s+/g, '').replace(/\n/g, ''); | ||
| seal.innerText = BACKDROP_SEAL_STYLE; | ||
| backdrop.appendChild(seal); | ||
@@ -107,0 +107,0 @@ return seal; |
| { | ||
| "name": "@persona-js/verify", | ||
| "version": "0.4.0", | ||
| "version": "0.4.1", | ||
| "description": "An unofficial Persona client to verify customers", | ||
@@ -17,3 +17,3 @@ "main": "./dist/index.js", | ||
| ], | ||
| "gitHead": "d33efb97c506bab2da77a9c8e25e2d953f468d7b" | ||
| "gitHead": "abc7b9a5a78ac12963e2f52eb4768f92abac270a" | ||
| } |
@@ -5,5 +5,5 @@ # @persona-js/verify | ||
| A vanilla JavaScript module to run embedded/hosted flow without any dependencies, against [the official npm module](https://www.npmjs.com/package/persona) which has some dependencies in both internally/externally. | ||
| A vanilla JavaScript module to run embedded/hosted flow without any dependencies, against [the official npm module](https://www.npmjs.com/package/persona) which has some dependencies in both internally/externally. Its bundle size is much lighter, interface is more flexible. | ||
| ⚠️ This package is still in beta and missing some features of official module, so still not recommended using in production. | ||
| ⚠️ This package is still in beta and missing some features of the official module and thus, still not recommended using in production. | ||
@@ -16,25 +16,72 @@ ## Install | ||
| or load CDN version on the fly. This defines `window.Persona` where `newInquiry`, `resumeInquiry` belongs to. | ||
| ```html | ||
| <script defer src="https://unpkg.com/@persona-js/verify@x.y.z/dist/cdn.js"></script> | ||
| ``` | ||
| ## Usage | ||
| ### Start a new inquiry | ||
| #### Embedded flow | ||
| ```ts | ||
| import { newInquiry } from '@persona-js/verify' | ||
| const TEMPLATE_ID = 'tmpl_xyzxyzxyz' | ||
| const verificationWithPersona = newInquiry('tmpl_xyzxyzxyz') | ||
| verificationWithPersona.start() | ||
| ``` | ||
| const verificationWithPersona = newInquiry(TEMPLATE_ID) | ||
| #### Hosted flow | ||
| // prefilling | ||
| ```ts | ||
| import { newInquiry } from '@persona-js/verify' | ||
| const verificationWithPersona = newInquiry('tmpl_xyzxyzxyz') | ||
| const url = verificationWithPersona.getHostedFlowUrl() //=> Returns URL for the hosted flow | ||
| window.open(url) | ||
| ``` | ||
| ### Resume a incompleted inquiry | ||
| ```ts | ||
| import { resumeInquiry } from `@persona-js/veerify` | ||
| const verificationWithPersona = resumeInquiry('inq_abcabcabc') | ||
| verificationWithPersona.start() | ||
| ``` | ||
| ### Prefilling | ||
| ```ts | ||
| import { newInquiry } from '@persona-js/verify' | ||
| const verificationWithPersona = newInquiry('tmpl_xyzxyzxyz') | ||
| verificationWithPersona.prefill({ nameFirst: 'Kengo' }) | ||
| ``` | ||
| // Also constructor function can accepts prefiling | ||
| newInquiry(TEMPLATE_ID, { prefill: { nameFirst: 'Kengo' } }) | ||
| #### Also constructor function can accepts prefiling | ||
| // Event listening | ||
| verificationWIthPersona.on('start', (inquiryId) => { /* what I want to do on starting inquiry flow */ }) | ||
| ```ts | ||
| import { newInquiry } from '@persona-js/verify' | ||
| verificationWithPersona.getHostedFlowUrl() //=> Returns URL for the hosted flow | ||
| verificationWithPersona.start() //=> Embedded flow starts on current window | ||
| newInquiry('tmpl_xyzxyzxyz', { prefill: { nameFirst: 'Kengo' } }) | ||
| ``` | ||
| // Can chain | ||
| newInquiry(TEMPLATE_ID) | ||
| ### Event listening | ||
| ```ts | ||
| import { newInquiry } from '@persona-js/verify' | ||
| const verificationWithPersona = newInquiry('tmpl_xyzxyzxyz') | ||
| verificationWithPersona.on('start', (inquiryId) => { /* what I want to do on starting inquiry flow */ }) | ||
| ``` | ||
| ### `.prefill`, `.on` is chainnable | ||
| ```ts | ||
| import { newInquiry } from '@persona-js/verify' | ||
| newInquiry('tmpl_xyzxyzxyz') | ||
| .prefill({ nameLast: 'Hamasaki' }) | ||
@@ -44,7 +91,22 @@ .on('complete', (inquiryId) => { /* what I want to do on completing embedded flow */ }) | ||
| .on('exit', () => { /* what I want to do on exiting embedded flow */ }) | ||
| .start() | ||
| ``` | ||
| ### Preloading | ||
| ```ts | ||
| import { newInquiry } from '@persona-js/verify' | ||
| const verificationWithPersona = newInquiry('tmpl_xyzxyzxyz') | ||
| const preload = verificationWithPersona.preload() | ||
| ... | ||
| // preload is resolved if Persona's content is ready for starting embedded flow without any wait | ||
| preload.then(() => verificationWithPersona.start()) | ||
| ``` | ||
| ## License | ||
| MIT | ||
| MIT, Copyright 2021 Kengo Hamasaki <k.hamasaki@gmail.com> | ||
@@ -57,3 +119,3 @@ ## ToDo | ||
| - Like `verification-change`, `country-select`...etc | ||
| - Support insertion into a specific element on HTML? | ||
| - Support insertion into a specific element on HTML (inline flow)? | ||
| - Throw exceptions on unintentional parameters/arguments | ||
@@ -60,0 +122,0 @@ - a11y |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.07%
21820
- Number of lines in readme file
- increased by92.54%
129
No dependency changes