@payrails/web-sdk 1.1.7 → 1.1.9

package/index.js

@@ -1 +1,17 @@
-!function(){"use strict";var t;exports.ElementType=void 0,(t=exports.ElementType||(exports.ElementType={})).CARD_NUMBER="CARD_NUMBER",t.CARDHOLDER_NAME="CARDHOLDER_NAME",t.CVV="CVV",t.EXPIRATION_MONTH="EXPIRATION_MONTH",t.EXPIRATION_YEAR="EXPIRATION_YEAR";class e{constructor(t,{id:e="",className:i=""}={}){this.subElements=[];const o=document.createElement(t);e&&(this.id=e,o.setAttribute("id",e)),i&&o.setAttribute("class",i),this.element=o}get parentElement(){return this.element.parentElement}mount(t){const e=document.querySelector(t);if(!e)throw new Error(`Element with selector "${t}" not found in in the DOM`);e.appendChild(this.element),this.subElements.forEach((t=>{if(!this.id)throw new Error("Sub elements can not be rendered, please set id for the element");t.mount(`#${this.id}`)}))}unmount(){var t;this.subElements.forEach((t=>t.unmount())),null===(t=this.parentElement)||void 0===t||t.removeChild(this.element)}}const{CARD_NUMBER:i,CVV:o,CARDHOLDER_NAME:n,EXPIRATION_MONTH:s,EXPIRATION_YEAR:a}=exports.ElementType,r={base:{border:"none",padding:"10px 16px",color:"#1d1d1d",backgroundColor:"#fff"},invalid:{backgroundColor:"#f9e1e1",borderColor:"#f25226",border:"1px solid"}},l=[{type:n,placeholder:"Card holder",styles:Object.assign(Object.assign({},r),{base:Object.assign(Object.assign({},r.base),{border:"1px solid #eae8ee",padding:"10px 16px",borderTopLeftRadius:"4px",borderTopRightRadius:"4px"})})},{type:i,placeholder:"1234 1234 1234 1234",styles:Object.assign(Object.assign({},r),{base:Object.assign(Object.assign({},r.base),{border:"1px solid #eae8ee",padding:"10px 16px",borderTopLeftRadius:"4px",borderTopRightRadius:"4px",textIndent:"0"}),cardIcon:{position:"absolute",right:"8px",height:"24px",bottom:"calc(50% - 12px)"}})},{type:s,placeholder:"MM",styles:Object.assign(Object.assign({},r),{base:Object.assign(Object.assign({},r.base),{borderBottom:"1px solid #eae8ee",borderLeft:"1px solid #eae8ee",borderRight:"1px solid #eae8ee",borderBottomLeftRadius:"4px"})})},{type:a,placeholder:"YY",format:"YY",styles:Object.assign(Object.assign({},r),{base:Object.assign(Object.assign({},r.base),{borderBottom:"1px solid #eae8ee",borderRight:"1px solid #eae8ee"})})},{type:o,placeholder:"CVC",styles:Object.assign(Object.assign({},r),{base:Object.assign(Object.assign({},r.base),{borderBottom:"1px solid #eae8ee",borderRight:"1px solid #eae8ee",borderBottomRightRadius:"4px"})})}];class d extends e{constructor(t,e){var i,o,n,s,a,r;super("div",{id:"payrails-card-form"}),this.collectContainer=t,this.options=e,this.storeCardCheckbox=null,this.formFields=[],l.forEach((({type:t,styles:i,format:o,placeholder:n,label:s})=>{var a,r,l,d,c;if(!(null===(a=this.options)||void 0===a?void 0:a.showCardHolderName)&&t===exports.ElementType.CARDHOLDER_NAME)return;const h=this.prepareStyles(i,t),v=new u(this.collectContainer,{type:t,label:s,placeholder:(null===(l=null===(r=null==e?void 0:e.translations)||void 0===r?void 0:r.placeholders)||void 0===l?void 0:l[t])||n,inputStyles:h,format:o,events:{onFocus:null===(c=null===(d=this.options)||void 0===d?void 0:d.events)||void 0===c?void 0:c.onFocus,onChange:this.onChange.bind(this)}});this.formFields.push(v)})),this.subElements.push(this.collectContainer),(null===(i=this.options)||void 0===i?void 0:i.showStoreInstrumentCheckbox)&&(this.storeCardCheckbox=new c({label:null===(s=null===(n=null===(o=this.options)||void 0===o?void 0:o.translations)||void 0===n?void 0:n.labels)||void 0===s?void 0:s.saveCreditCard,styles:null===(r=null===(a=this.options)||void 0===a?void 0:a.styles)||void 0===r?void 0:r.storeCardCheckbox}),this.subElements.push(this.storeCardCheckbox))}show(){this.element.style.display="flex"}hide(){this.element.style.display="none"}prepareStyles(t,e){var i;let o=JSON.parse(JSON.stringify(t));return(null===(i=this.options)||void 0===i?void 0:i.showCardHolderName)&&e===exports.ElementType.CARD_NUMBER&&(this.element.setAttribute("class","with-card-holder"),o=Object.assign(Object.assign({},t),{base:Object.assign(Object.assign({},r.base),{border:"1px solid #eae8ee",borderTop:"none",padding:"10px 16px"})})),["base","complete","empty","focus","invalid","cardIcon","copyIcon"].forEach((t=>{var i,n,s,a,r,l,d;o[t]=Object.assign(Object.assign(Object.assign({},o[t]),null===(a=null===(s=null===(n=null===(i=this.options)||void 0===i?void 0:i.styles)||void 0===n?void 0:n.inputFields)||void 0===s?void 0:s.all)||void 0===a?void 0:a[t]),null===(d=null===(l=null===(r=this.options)||void 0===r?void 0:r.styles)||void 0===l?void 0:l.inputFields)||void 0===d?void 0:d[e])})),o}get isValid(){return this.formFields.reduce(((t,e)=>t&&e.isValid),!0)}onChange(){var t,e,i,o;(null===(e=null===(t=this.options)||void 0===t?void 0:t.events)||void 0===e?void 0:e.onChange)&&(null===(o=null===(i=this.options)||void 0===i?void 0:i.events)||void 0===o||o.onChange({isValid:this.isValid}))}async collectValues(){var t,e;return{tokenizedCardData:await this.collectContainer.collect(),storeInstrument:(null===(t=this.storeCardCheckbox)||void 0===t?void 0:t.isChecked)||(null===(e=this.options)||void 0===e?void 0:e.alwaysStoreInstrument)}}}class c extends e{constructor(t){super("span",{id:"payrails-store-card"});const e="payrails-store-card-checkbox",i=(null==t?void 0:t.label)||"Save credit card for future payments";this.element.innerHTML=`<label for="${e}"}"><input type="checkbox" id="${e}" name="${e}" >${i}</label>`,Object.keys((null==t?void 0:t.styles)||{}).forEach((e=>{var i;this.element.style[e]=null===(i=null==t?void 0:t.styles)||void 0===i?void 0:i[e]})),this.element.addEventListener("change",(t=>{t.stopPropagation(),t.stopImmediatePropagation()}))}get isChecked(){var t;return null===(t=this.element.querySelector("input"))||void 0===t?void 0:t.checked}}class u{constructor(t,e){this.isValid=!1;const{type:i,label:o,placeholder:n,inputStyles:s,events:a,format:r}=e,l=t.createCollectElement({type:i,label:o,placeholder:n,format:r,inputStyles:s});(null==a?void 0:a.onFocus)&&l.on("FOCUS",a.onFocus),l.on("CHANGE",(t=>{const{isEmpty:e,isValid:i}=t;this.isValid=!e&&i,(null==a?void 0:a.onChange)&&a.onChange(this)}))}}class h extends e{constructor(t,e){super("div",{id:"payrails-card-list"}),this.workflowExecution=t,this.listItems=[],this.workflowExecution.savedCreditCards.forEach((t=>{const i=new v((()=>{(null==e?void 0:e.onCardChange)&&e.onCardChange(t)}),t);this.listItems.push(i),this.subElements.push(i)}))}reset(){this.element.querySelectorAll("input").forEach((t=>t.checked=!1))}}class v extends e{constructor(t,e){super("div",{className:"payrails-card-list-item",id:`payrails-card-list-item-${e.id}`});const{id:i}=e,o=this.createCardLabel(e),n=document.createElement("label");n.setAttribute("for",i),n.addEventListener("click",t);const s=document.createElement("input");s.setAttribute("type","radio"),s.setAttribute("name","payment-option"),s.setAttribute("id",i),s.setAttribute("value",i),n.appendChild(s);const a=document.createElement("span");a.innerText=o,n.appendChild(a),this.element.appendChild(n)}createCardLabel({data:{suffix:t}}){return`****${t}`}}let p;const m=new Uint8Array(16);function y(){if(!p&&(p="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!p))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return p(m)}const g=[];for(let t=0;t<256;++t)g.push((t+256).toString(16).slice(1));var b,C={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function f(t,e,i){if(C.randomUUID&&!e&&!t)return C.randomUUID();const o=(t=t||{}).random||(t.rng||y)();if(o[6]=15&o[6]|64,o[8]=63&o[8]|128,e){i=i||0;for(let t=0;t<16;++t)e[i+t]=o[t];return e}return function(t,e=0){return(g[t[e+0]]+g[t[e+1]]+g[t[e+2]]+g[t[e+3]]+"-"+g[t[e+4]]+g[t[e+5]]+"-"+g[t[e+6]]+g[t[e+7]]+"-"+g[t[e+8]]+g[t[e+9]]+"-"+g[t[e+10]]+g[t[e+11]]+g[t[e+12]]+g[t[e+13]]+g[t[e+14]]+g[t[e+15]]).toLowerCase()}(o)}!function(t){t.GET="GET",t.POST="POST"}(b||(b={}));const x=async({url:t,method:e=b.GET,token:i,body:o})=>{const n={method:e,headers:Object.assign(Object.assign({},k()),_(i))};e===b.POST&&(n.body=JSON.stringify(o||{}));const s=await fetch(t,n),a=await s.json();if([401,403].includes(s.status))throw new w(t,e);if(!s.ok)throw new E(t,e,a);return{ok:s.ok,req:Object.assign({url:t},n),res:a}};class w extends Error{constructor(t,e){super(`[${e}] ${t} unauthorized`)}}class E extends Error{constructor(t,e,i){super(`[${e}] ${t} unsuccessful`),this.res=i}}const _=t=>({authorization:`Bearer ${t}`}),k=()=>({"x-idempotency-key":f()});class A{constructor(t,e){this.sdkConfig=t,this.execution=e}async pay(t){const e=(await this.authorize(t)).res.links.execution;return await this.pollForAuthorizationResult(e)}async authorize(t){if(!this.execution.authorizeLink||!this.sdkConfig.amount)throw new Error("SDK was not initialized with workflow execution");return x({url:this.execution.authorizeLink,method:b.POST,token:this.sdkConfig.token,body:{amount:this.sdkConfig.amount,paymentComposition:t,returnInfo:{success:"https://www.bootstrap.payrails.io/success"}}})}async pollForAuthorizationResult(t){const e=(await this.getExecution(t)).res,i=e.status,o=["authorizePending","authorizeSuccessful","authorizeFailed"],n=i.find((({code:t})=>"authorizeRequested"===t));if(!n)return await new Promise((t=>setTimeout(t,300))),this.pollForAuthorizationResult(t);let s=i.find((({code:t,time:e})=>o.includes(t)&&new Date(e)>new Date(n.time)));if(!s){const{res:e}=await this.getExecution(t,void 0,n.time);return s=e.status.find((({code:t,time:e})=>o.includes(t)&&new Date(e)>new Date(n.time))),{finalState:s,response:e}}return{finalState:s,response:e}}async getExecution(t,e,i){const o=new URLSearchParams;e&&e.length>0&&o.append("waitWhile[status]",`[${e.map((t=>`"${t}"`)).join(",")}]`),i&&o.append("waitWhile[lastStatusTime]",i);const n=`${t}${o.toString()?"?":""}${o.toString()}`;return x({url:n,token:this.sdkConfig.token})}}var P,S;!function(t){t.CARD="card",t.GOOGLE_PAY="googlePay"}(P||(P={})),function(t){t.ENABLED="enabled",t.CREATED="created"}(S||(S={}));class O{constructor(t){this.executionResponse=t}get lookup(){return this.executionResponse.initialResults.find((({body:{name:t}})=>"lookup"===t))}get holderReference(){return this.executionResponse.holderReference}get savedCreditCards(){const t=this.availablePaymentMethods.find((({paymentMethodCode:t})=>t===P.CARD));return(null==t?void 0:t.paymentInstruments)||[]}get googlePayConfig(){const t=this.availablePaymentMethods.find((({paymentMethodCode:t})=>t===P.GOOGLE_PAY));if(!t)throw new Error("trying to initialize google pay without config");return t?[t.config]:[]}get url(){return this.response.links.self}get response(){return this.executionResponse}get meta(){return this.executionResponse.meta}get availablePaymentMethods(){var t;return(null===(t=this.lookup)||void 0===t?void 0:t.body.data.paymentCompositionOptions)||[]}get authorizeLink(){var t;return null===(t=this.lookup)||void 0===t?void 0:t.body.links.authorize.href}update(t){this.executionResponse=t}}class B extends e{constructor(t,e,i){var o;super("button",{id:"payrails-card-payment-button"}),this.sdkConfig=t,this.execution=e,this.options=i,this.selectedCard=null,this.storeInstrument=!1,this.element.innerText=(null===(o=null==i?void 0:i.translations)||void 0===o?void 0:o.label)||"Pay",this.element.addEventListener("click",this.onPay.bind(this)),this.element.addEventListener("mouseenter",(()=>{var t;this.element.classList.add("hover"),this.setStyles((null===(t=this.options.styles)||void 0===t?void 0:t.hover)||{})})),this.element.addEventListener("mouseleave",(()=>{var t;this.element.classList.remove("hover"),this.removeStyles((null===(t=this.options.styles)||void 0===t?void 0:t.hover)||{})})),this.paymentExecutor=new A(this.sdkConfig,this.execution)}setDisabled(t){var e,i,o;this.element.disabled=t,t?(this.element.classList.add("disabled"),(null===(e=this.options.styles)||void 0===e?void 0:e.disabled)&&this.setStyles(this.options.styles.disabled)):(this.element.classList.remove("disabled"),this.removeStyles((null===(i=this.options.styles)||void 0===i?void 0:i.disabled)||{}),(null===(o=this.options.styles)||void 0===o?void 0:o.base)&&this.setStyles(this.options.styles.base))}setStyles(t){var e;const i=Object.assign(Object.assign({},null===(e=this.options.styles)||void 0===e?void 0:e.base),t);Object.keys(i).forEach((t=>{this.element.style[t]=i[t]}))}removeStyles(t){var e;const i=Object.keys((null===(e=this.options.styles)||void 0===e?void 0:e.base)||{});Object.keys(t).forEach((t=>{var e,o;i.includes(t)?this.element.style[t]=null===(o=null===(e=this.options.styles)||void 0===e?void 0:e.base)||void 0===o?void 0:o[t]:this.element.style[t]=""}))}setLabel(t){this.element.innerText=t}setCardForm(t){this.cardForm=t}triggerLoading(t){var e,i,o,n;const s=this.element.offsetWidth;this.element.style.minWidth=`${s}px`,t?(this.element.innerHTML='<div class="dot-flashing"></div>',this.element.classList.add("loading"),(null===(e=this.options.styles)||void 0===e?void 0:e.loading)&&this.setStyles(this.options.styles.loading)):(this.element.innerText=(null===(o=null===(i=this.options)||void 0===i?void 0:i.translations)||void 0===o?void 0:o.label)||"Pay",this.element.classList.remove("loading"),this.removeStyles((null===(n=this.options.styles)||void 0===n?void 0:n.loading)||{}))}onAuthorizationFailed(){var t,e;this.setDisabled(!1),this.triggerLoading(!1),(null===(t=this.options.events)||void 0===t?void 0:t.onAuthorizeFailed)&&(null===(e=this.options.events)||void 0===e||e.onAuthorizeFailed())}async onPay(){var t,e,i,o;if(this.setDisabled(!0),this.triggerLoading(!0),null===(t=this.options.events)||void 0===t?void 0:t.onPaymentButtonClicked){if(!1===await(null===(e=this.options.events)||void 0===e?void 0:e.onPaymentButtonClicked()))return void this.onAuthorizationFailed()}try{let t=null===(i=this.selectedCard)||void 0===i?void 0:i.id;if(!t){t=(await this.tokenizeCard()).res.id}const e=[{paymentMethodCode:P.CARD,integrationType:"api",amount:this.sdkConfig.amount,paymentInstrumentId:t,storeInstrument:this.storeInstrument}],o=await this.paymentExecutor.pay(e);this.handleAuthorizationResult(o)}catch(t){t instanceof w&&(null===(o=this.options.events)||void 0===o?void 0:o.onPaymentSessionExpired)&&this.options.events.onPaymentSessionExpired(),this.onAuthorizationFailed()}}handleAuthorizationResult(t){var e,i,o;switch(null===(e=null==t?void 0:t.finalState)||void 0===e?void 0:e.code){case"authorizeSuccessful":this.triggerLoading(!1),(null===(i=this.options.events)||void 0===i?void 0:i.onAuthorizeSuccess)&&this.options.events.onAuthorizeSuccess();break;case"authorizePending":"3ds"===(null===(o=null==t?void 0:t.response)||void 0===o?void 0:o.actionRequired)&&this.handle3ds(t);break;default:this.onAuthorizationFailed()}}handle3ds(t){var e,i;const o=null===(e=null==t?void 0:t.response)||void 0===e?void 0:e.links["3ds"];if(o){const t=[[250,400],[390,400],[500,600],[600,400]],e=screen.width,n=t.reduce(((t,i)=>e>i[0]?i:t),[250,400]),s=document.createElement("iframe");s.setAttribute("id","payrails-3ds-frame"),s.setAttribute("src",o),s.setAttribute("width",n[0].toString()),s.setAttribute("height",n[1].toString());const a=document.createElement("div");a.setAttribute("id","payrails-3ds-challenge"),a.appendChild(s);const r=document.createElement("div");r.addEventListener("click",(async()=>{r.remove()})),r.setAttribute("id","payrails-3ds-popup-background"),r.appendChild(a);const l=async t=>{var e,i,o;if(t.data&&'{"type":"3DS-challenge-completed"}'===t.data){window.removeEventListener("message",l),r.remove();if(!(await this.paymentExecutor.getExecution(this.execution.url)).res.status.find((({code:t})=>"authorizeSuccessful"===t))&&(null===(e=this.options.events)||void 0===e?void 0:e.onAuthorizeFailed))return void this.onAuthorizationFailed();if(null===(i=this.options.events)||void 0===i?void 0:i.onAuthorizeSuccess)return void(null===(o=this.options.events)||void 0===o||o.onAuthorizeSuccess())}};null===(i=document.querySelector("body"))||void 0===i||i.appendChild(r),window.addEventListener("message",l),a.style.width=`${n[0]+4}px`,a.style.height=`${n[1]+4}px`}}async tokenizeCard(){if(!this.cardForm)throw new Error("Trying to tokenize non-existent card form");const{tokenizedCardData:t,storeInstrument:e}=await this.cardForm.collectValues();this.storeInstrument=Boolean(e);const{instrumentId:i,card_number:o,cardholder_name:n,expiry_month:s,expiry_year:a}=t;return(({url:t,token:e,instrumentId:i,holderReference:o,providerId:n,providerConfigId:s,meta:a,storeInstrument:r=!1})=>x({url:t,token:e,method:b.POST,body:{holderReference:o,storeInstrument:r,paymentMethod:"card",token:{providerId:n,providerConfigId:s,reference:i,type:"vault",meta:a}}}))({url:this.sdkConfig.vaultConfiguration.links.saveInstrument.href,token:this.sdkConfig.token,instrumentId:i,holderReference:this.execution.holderReference,providerId:this.sdkConfig.vaultConfiguration.providerId,providerConfigId:this.sdkConfig.vaultConfiguration.providerConfigId,meta:{skyflow_id:i,card_number:o,cardholder_name:n,expiry_month:s,expiry_year:a},storeInstrument:this.storeInstrument})}}class R extends e{constructor(t="Authorization failed, please try again."){super("div",{id:"authorization-failed-message"}),this.element.innerText=t,this.element.innerHTML=`\n      <div>\n        <svg class="checkmark-cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">\n          <circle class="checkmark-cross_circle" cx="26" cy="26" r="25" fill="none"/>\n          <path class="checkmark-cross_check" fill="none" d="M14.1 14.1l23.8 23.8 m0,-23.8 l-23.8,23.8"/>\n        </svg>\n      </div>\n      <div>${t}</div>`,this.element.addEventListener("click",(t=>{t.stopImmediatePropagation(),t.stopPropagation(),this.unmount()}))}}class F extends e{constructor(t){var e;super("div",{id:"payrails-authorization-success-msg"}),this.element.innerHTML=`\n      <div class="checkmark-wrapper">\n        <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">\n          <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>\n            <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>\n          </svg>\n      </div>\n      <div id="payrails-authorization-success">${(null===(e=null==t?void 0:t.translations)||void 0===e?void 0:e.label)||"Payment successful"}</div`}}class z extends e{constructor(t,e,i){super("div",{id:t,className:"payrails-dropin-item"}),this.events=i,this.isActive=!1;const o=`payrails-dropin-item-${t}`,n=document.createElement("label");n.setAttribute("for",o);const s=document.createElement("input");s.setAttribute("type","radio"),s.setAttribute("name","payment-option"),s.setAttribute("id",o),s.setAttribute("value",o),this.input=s,n.appendChild(s),this.label=n;const a=document.createElement("span");n.appendChild(a),a.innerText=e,this.element.appendChild(n)}get identifier(){return`payrails-dropin-item-${this.id}`}deactivate(){var t,e;this.isActive&&(this.isActive=!1,this.label.style.marginBottom="0",null===(t=this.component)||void 0===t||t.unmount(),(null===(e=this.events)||void 0===e?void 0:e.onDeactivate)&&this.events.onDeactivate())}activate(){var t,e;this.isActive||(null===(t=this.component)||void 0===t||t.mount(`#${this.id}`),this.label.style.marginBottom="8px",this.isActive=!0,(null===(e=this.events)||void 0===e?void 0:e.onActivate)&&this.events.onActivate())}}class I extends z{constructor(t,e){super("payrails-credit-card-wrapper","Card"),this.cardForm=t,this.paymentButton=e,this.cardFormShown=!1,this.component=new T(t,e)}activate(){var t,e;this.cardFormShown||(this.cardFormShown=!0,null===(t=this.component)||void 0===t||t.mount(`#${this.id}`)),this.isActive||(this.paymentButton.selectedCard=null,this.paymentButton.mount(`#${this.id}`),this.paymentButton.setDisabled(!this.cardForm.isValid),this.paymentButton.mount("#payrails-card-form"),this.input.checked=!0,this.cardForm.show(),this.isActive=!0,(null===(e=this.events)||void 0===e?void 0:e.onActivate)&&this.events.onActivate())}deactivate(){var t;this.isActive&&(this.paymentButton.unmount(),this.cardForm.hide(),this.isActive=!1,(null===(t=this.events)||void 0===t?void 0:t.onDeactivate)&&this.events.onDeactivate())}}class T extends e{constructor(t,e){super("div",{id:"payrails-form-container"}),this.subElements.push(t,e)}}const L={apiVersion:2,apiVersionMinor:0};class D extends e{constructor(t,e,i){super("div",{id:"payrails-google-pay-button"}),this.sdkConfig=t,this.execution=e,this.options=i,this.client=null,this.googleButton=null,this.loadScript=null,this.paymentExecutor=new A(t,e)}async sdkLoaded(){var t,e,i,o,n,s,a,r;this.client=new google.payments.api.PaymentsClient({environment:this.options.environment||"TEST"});try{const l=Object.assign({},L);if(l.allowedPaymentMethods=this.execution.googlePayConfig,!this.client)throw new Error("Google pay client can not be initialized");const{result:d}=await this.client.isReadyToPay(l);if(!d)return;const c=(null===(e=null===(t=this.options)||void 0===t?void 0:t.styles)||void 0===e?void 0:e.buttonColor)||"black",u=(null===(o=null===(i=this.options)||void 0===i?void 0:i.styles)||void 0===o?void 0:o.buttonType)||"long",h=(null===(s=null===(n=this.options)||void 0===n?void 0:n.styles)||void 0===s?void 0:s.buttonSizeMode)||"fill",v=(null===(r=null===(a=this.options)||void 0===a?void 0:a.styles)||void 0===r?void 0:r.buttonLocale)||void 0;this.googleButton=this.client.createButton({buttonColor:c,buttonType:u,buttonSizeMode:h,buttonLocale:v,onClick:async()=>{var t,e,i;if(null===(e=null===(t=this.options)||void 0===t?void 0:t.events)||void 0===e?void 0:e.onPaymentButtonClicked){if(!await(null===(i=this.options)||void 0===i?void 0:i.events.onPaymentButtonClicked()))return}this.onPaymentButtonClicked()},allowedPaymentMethods:this.execution.googlePayConfig}),this.element.appendChild(this.googleButton)}catch(t){throw console.error("Google pay can not be initialized",t),new Error(t.message)}}async onLoadPaymentData(t){var e,i,o,n;const s=[{paymentMethodCode:"googlePay",integrationType:"api",paymentInstrumentData:{paymentToken:t.paymentMethodData.tokenizationData.token},amount:this.sdkConfig.amount}],a=await this.paymentExecutor.pay(s);(null===(i=null===(e=this.options)||void 0===e?void 0:e.events)||void 0===i?void 0:i.onAuthorizeSuccess)&&(null===(n=null===(o=this.options)||void 0===o?void 0:o.events)||void 0===n||n.onAuthorizeSuccess(a))}async onPaymentButtonClicked(){var t,e,i,o,n;const s=Object.assign({},L);if(s.allowedPaymentMethods=this.execution.googlePayConfig,s.transactionInfo={totalPriceStatus:"FINAL",totalPrice:null===(t=this.sdkConfig.amount)||void 0===t?void 0:t.value,currencyCode:null===(e=this.sdkConfig.amount)||void 0===e?void 0:e.currency,countryCode:null===(n=null===(o=null===(i=this.execution.meta)||void 0===i?void 0:i.customer)||void 0===o?void 0:o.country)||void 0===n?void 0:n.code},!this.client)throw new Error("Google pay client is not initialized");this.client.loadPaymentData(s).then((t=>{this.onLoadPaymentData(t)})).catch((t=>{var e,i,o;(null===(i=null===(e=this.options)||void 0===e?void 0:e.events)||void 0===i?void 0:i.onAuthorizeFailed)&&(null===(o=this.options)||void 0===o||o.events.onAuthorizeFailed(t))}))}mount(t){super.mount(t),this.loadScript?this.googleButton&&this.element.appendChild(this.googleButton):(this.loadScript=new j(this.sdkLoaded.bind(this)),this.loadScript.mount("body"))}unmount(){var t;this.googleButton&&(null===(t=this.googleButton.parentElement)||void 0===t||t.removeChild(this.googleButton)),super.unmount()}}class j extends e{constructor(t){super("script"),this.loaded=!1,this.loaded||(this.element.setAttribute("async","async"),this.element.setAttribute("src","https://pay.google.com/gp/p/js/pay.js"),this.element.setAttribute("onload","onPayrailsGpayLoaded()"),window.onPayrailsGpayLoaded=()=>{this.loaded||(this.loaded=!0,t())})}}class M extends z{constructor(t,e,i){var o;super("google-pay-dropin",(null===(o=i.translations)||void 0===o?void 0:o.label)||"Google Pay"),this.component=new D(t,e,i)}}class N extends z{constructor(t,e,i){super(`card-${t.id}`,`****${t.data.suffix}`,{onActivate:()=>{i(t),this.component.setDisabled(!1)}}),this.component=e}}class $ extends e{constructor(t,e,i,o){var n,s;super("fieldset",{id:"payrails-dropin-component"}),this.collectContainer=t,this.dropinConfig=e,this.execution=i,this.sdkConfig=o;const a=!1===(null===(s=null===(n=this.dropinConfig.paymentMethodsConfiguration)||void 0===n?void 0:n.cards)||void 0===s?void 0:s.showExistingCards),r=new Map;this.execution.availablePaymentMethods.forEach((({paymentMethodCode:t})=>{if(t===P.CARD)a||this.execution.savedCreditCards.forEach((t=>{var e;this.cardPaymentButton=this.createCardPaymentButton(null===(e=this.dropinConfig.translations)||void 0===e?void 0:e.cardPaymentButton);const i=new N(t,this.cardPaymentButton,(t=>{this.cardPaymentButton&&(this.cardPaymentButton.selectedCard=t)}));r.set(i.identifier,i)}))})),this.execution.availablePaymentMethods.forEach((({paymentMethodCode:t})=>{var e,i;switch(t){case P.CARD:this.creditCard=new I(this.createCardForm(),this.createCardPaymentButton(null===(e=this.dropinConfig.translations)||void 0===e?void 0:e.cardPaymentButton)),r.set(this.creditCard.identifier,this.creditCard);break;case P.GOOGLE_PAY:this.googlePay=new M(this.sdkConfig,this.execution,{events:{onAuthorizeSuccess:t=>{var e;if(t)if("authorizeSuccessful"===(null===(e=null==t?void 0:t.finalState)||void 0===e?void 0:e.code))this.onAuthorizeSuccess();else this.onAuthorizeFailed()},onAuthorizeFailed:this.onAuthorizeFailed.bind(this),onPaymentButtonClicked:this.dropinConfig.events.onPaymentButtonClicked},styles:null===(i=this.dropinConfig.styles)||void 0===i?void 0:i.googlePayButton}),r.set(this.googlePay.identifier,this.googlePay)}})),this.element.addEventListener("change",(t=>{var e,i;const o=(null===(e=null==t?void 0:t.target)||void 0===e?void 0:e.value)||"";r.forEach((t=>{t.deactivate()})),null===(i=r.get(o))||void 0===i||i.activate()})),this.subElements.push(...Array.from(r.values()))}createCardForm(){var t,e;if(!this.cardForm){const i=null===(t=this.dropinConfig.paymentMethodsConfiguration)||void 0===t?void 0:t.cards,o=Boolean(null==i?void 0:i.showStoreInstrumentCheckbox),n=Boolean(null==i?void 0:i.showCardHolderName),s=Boolean(null==i?void 0:i.alwaysStoreInstrument);this.cardForm=new d(this.collectContainer,{showStoreInstrumentCheckbox:o,showCardHolderName:n,alwaysStoreInstrument:s,translations:null===(e=this.dropinConfig.translations)||void 0===e?void 0:e.cardForm,events:{onFocus:()=>{var t;null===(t=this.creditCard)||void 0===t||t.activate()},onChange:({isValid:t})=>{var e;null===(e=this.cardPaymentButton)||void 0===e||e.setDisabled(!t)}}})}return this.cardPaymentButton&&this.cardPaymentButton.setCardForm(this.cardForm),this.cardForm}createCardPaymentButton(t){return this.cardPaymentButton||(this.cardPaymentButton=new B(this.sdkConfig,this.execution,{translations:t,events:{onAuthorizeSuccess:this.onAuthorizeSuccess.bind(this),onAuthorizeFailed:this.onAuthorizeFailed.bind(this),onPaymentButtonClicked:this.dropinConfig.events.onPaymentButtonClicked}})),this.cardForm&&this.cardPaymentButton.setCardForm(this.cardForm),this.cardPaymentButton}onAuthorizeSuccess(){var t,e,i,o;this.subElements.forEach((t=>t.unmount())),new F({translations:{label:null===(i=null===(e=null===(t=this.dropinConfig)||void 0===t?void 0:t.translations)||void 0===e?void 0:e.paymentResult)||void 0===i?void 0:i.success}}).mount(`#${this.id}`),(null===(o=this.dropinConfig.events)||void 0===o?void 0:o.onAuthorizeSuccess)&&this.dropinConfig.events.onAuthorizeSuccess()}onAuthorizeFailed(){var t,e,i;new R(null===(e=null===(t=this.dropinConfig.translations)||void 0===t?void 0:t.paymentResult)||void 0===e?void 0:e.fail).mount(`#${this.id}`),this.dropinConfig.events.onAuthorizeFailed&&(null===(i=this.dropinConfig.events)||void 0===i||i.onAuthorizeFailed())}}var V=require("skyflow-js").default;class H{constructor(t,e){this.__container=t.container(V.ContainerType.COMPOSABLE,e)}get elementToFieldMap(){return new Map([[exports.ElementType.CARD_NUMBER,"card_number"],[exports.ElementType.CARDHOLDER_NAME,"cardholder_name"],[exports.ElementType.CVV,"security_code"],[exports.ElementType.EXPIRATION_MONTH,"expiry_month"],[exports.ElementType.EXPIRATION_YEAR,"expiry_year"]])}createCollectElement(t){return this.__container.create(Object.assign({table:"cards",labelStyles:{},errorTextStyles:{},column:this.elementToFieldMap.get(t.type)},t),{format:t.format})}mount(t){const e="payrails-container-wrapper";this.element=document.createElement("span"),this.element.setAttribute("id",e);const i=document.querySelector(t);if(!i)throw new Error(`Element with selector ${t} does not exist`);i.appendChild(this.element),window.setTimeout((()=>{this.__container.mount(`#${e}`)}),50)}unmount(){this.element&&this.element.remove()}async collect(){const{records:t}=await this.__container.collect(),{skyflow_id:e,card_number:i,cardholder_name:o,expiry_month:n,expiry_year:s}=t[0].fields;return{instrumentId:e,card_number:i,cardholder_name:o,expiry_month:n,expiry_year:s}}}var U=require("skyflow-js").default;class G{static init(t,e){const i=JSON.parse(atob(t.data)),{vaultConfiguration:{vaultId:o,vaultUrl:n,token:s},execution:a}=i,r=U.init({vaultID:o,vaultURL:n,getBearerToken:()=>Promise.resolve(s)});return new G(i,r,new O(a),e)}update(t,e){this.execution.update(t),this.sdkConfiguration.amount=e}collectContainer(t){if(!t.layout)throw new Error("Layout configuration is required");return this.__container=new H(this.vaultClient,t),this.__container}googlePayButton(t){var e;if(!this.execution)throw new Error("SDK was not initialized with workflow execution");return new D(this.sdkConfiguration,this.execution,Object.assign({environment:null===(e=this.options)||void 0===e?void 0:e.environment},t))}cardList(t){return this.__cardList||(this.__cardList=new h(this.execution,{onCardChange:e=>{this.__cardPaymentButton&&(this.__cardPaymentButton.selectedCard=e,this.__cardPaymentButton.setDisabled(!1)),null==t||t.onCardChange(e)}})),this.__cardList}cardForm(t){var e,i;if(!this.__cardForm){const o=this.getContainerLayout(null==t?void 0:t.showCardHolderName);this.__container=this.collectContainer(Object.assign(Object.assign({layout:o,errorTextStyles:{base:{display:"none"}}},null===(e=null==t?void 0:t.styles)||void 0===e?void 0:e.errorTextStyles),{styles:{base:null===(i=null==t?void 0:t.styles)||void 0===i?void 0:i.base}})),this.__cardForm=new d(this.__container,Object.assign(Object.assign({},t),{events:Object.assign(Object.assign({},null==t?void 0:t.events),{onChange:e=>{var i;this.__cardPaymentButton&&(this.__cardPaymentButton.selectedCard=null,this.__cardForm&&this.__cardPaymentButton.setDisabled(!this.__cardForm.isValid)),(null===(i=null==t?void 0:t.events)||void 0===i?void 0:i.onChange)&&t.events.onChange(e)},onFocus:()=>{var e;this.__cardList&&this.__cardList.reset(),this.__cardPaymentButton&&(this.__cardPaymentButton.selectedCard=null,this.__cardForm&&this.__cardPaymentButton.setDisabled(!this.__cardForm.isValid)),(null===(e=null==t?void 0:t.events)||void 0===e?void 0:e.onFocus)&&t.events.onFocus()}})}))}return this.__cardPaymentButton&&this.__cardPaymentButton.setCardForm(this.__cardForm),this.__cardForm}constructor(t,e,i,o){var n;this.sdkConfiguration=t,this.vaultClient=e,this.execution=i,this.options=o,(null===(n=null==o?void 0:o.events)||void 0===n?void 0:n.onClientInitialized)&&o.events.onClientInitialized(this.execution)}dropin(t){var e,i;const o=this.getContainerLayout(null===(i=null===(e=t.paymentMethodsConfiguration)||void 0===e?void 0:e.cards)||void 0===i?void 0:i.showCardHolderName);return this.__container=this.collectContainer({layout:o,errorTextStyles:{base:{display:"none"}}}),new $(this.__container,t,this.execution,this.sdkConfiguration)}getContainerLayout(t){return t?[1,1,3]:[1,3]}paymentButton(t){return this.__cardPaymentButton||(this.__cardPaymentButton=new B(this.sdkConfiguration,this.execution,t)),this.__cardPaymentButton.setDisabled(!0),this.__cardForm&&this.__cardPaymentButton.setCardForm(this.__cardForm),this.__cardPaymentButton}}exports.Payrails=G}();
+!function(){"use strict";var t;exports.ElementType=void 0,(t=exports.ElementType||(exports.ElementType={})).CARD_NUMBER="CARD_NUMBER",t.CARDHOLDER_NAME="CARDHOLDER_NAME",t.CVV="CVV",t.EXPIRATION_MONTH="EXPIRATION_MONTH",t.EXPIRATION_YEAR="EXPIRATION_YEAR";class e{constructor(t,{id:e="",className:i=""}={}){this.subElements=[];const o=document.createElement(t);e&&(this.id=e,o.setAttribute("id",e)),i&&o.setAttribute("class",i),this.element=o}get parentElement(){return this.element.parentElement}get selector(){if(!this.id)throw new Error("Element id is not set");return`#${this.id}`}mount(t){const e=document.querySelector(t);if(!e)throw new Error(`Element with selector "${t}" not found in in the DOM`);e.appendChild(this.element),this.subElements.forEach((t=>{if(!this.id)throw new Error("Sub elements can not be rendered, please set id for the element");t.mount(this.selector)}))}unmount(){var t;this.subElements.forEach((t=>t.unmount())),null===(t=this.parentElement)||void 0===t||t.removeChild(this.element)}}const{CARD_NUMBER:i,CVV:o,CARDHOLDER_NAME:n,EXPIRATION_MONTH:s,EXPIRATION_YEAR:a}=exports.ElementType,r={base:{border:"none",padding:"10px 16px",color:"#1d1d1d",backgroundColor:"#fff"},invalid:{backgroundColor:"#f9e1e1",borderColor:"#f25226",border:"1px solid"}},l=[{type:n,placeholder:"Card holder",styles:Object.assign(Object.assign({},r),{base:Object.assign(Object.assign({},r.base),{border:"1px solid #eae8ee",padding:"10px 16px",borderTopLeftRadius:"4px",borderTopRightRadius:"4px"})})},{type:i,placeholder:"1234 1234 1234 1234",styles:Object.assign(Object.assign({},r),{base:Object.assign(Object.assign({},r.base),{border:"1px solid #eae8ee",padding:"10px 16px",borderTopLeftRadius:"4px",borderTopRightRadius:"4px",textIndent:"0"}),cardIcon:{position:"absolute",right:"8px",height:"24px",bottom:"calc(50% - 12px)"}})},{type:s,placeholder:"MM",styles:Object.assign(Object.assign({},r),{base:Object.assign(Object.assign({},r.base),{borderBottom:"1px solid #eae8ee",borderLeft:"1px solid #eae8ee",borderRight:"1px solid #eae8ee",borderBottomLeftRadius:"4px"})})},{type:a,placeholder:"YY",format:"YY",styles:Object.assign(Object.assign({},r),{base:Object.assign(Object.assign({},r.base),{borderBottom:"1px solid #eae8ee",borderRight:"1px solid #eae8ee"})})},{type:o,placeholder:"CVC",styles:Object.assign(Object.assign({},r),{base:Object.assign(Object.assign({},r.base),{borderBottom:"1px solid #eae8ee",borderRight:"1px solid #eae8ee",borderBottomRightRadius:"4px"})})}];class d extends e{constructor(t,e){var i,o,n,s,a,r;super("div",{id:"payrails-card-form"}),this.collectContainer=t,this.options=e,this.storeCardCheckbox=null,this.formFields=[],l.forEach((({type:t,styles:i,format:o,placeholder:n,label:s})=>{var a,r,l,d,u;if(!(null===(a=this.options)||void 0===a?void 0:a.showCardHolderName)&&t===exports.ElementType.CARDHOLDER_NAME)return;const h=this.prepareStyles(i,t),v=new c(this.collectContainer,{type:t,label:s,placeholder:(null===(l=null===(r=null==e?void 0:e.translations)||void 0===r?void 0:r.placeholders)||void 0===l?void 0:l[t])||n,inputStyles:h,format:o,events:{onFocus:null===(u=null===(d=this.options)||void 0===d?void 0:d.events)||void 0===u?void 0:u.onFocus,onChange:this.onChange.bind(this)}});this.formFields.push(v)})),this.subElements.push(this.collectContainer),(null===(i=this.options)||void 0===i?void 0:i.showStoreInstrumentCheckbox)&&(this.storeCardCheckbox=new u({label:null===(s=null===(n=null===(o=this.options)||void 0===o?void 0:o.translations)||void 0===n?void 0:n.labels)||void 0===s?void 0:s.saveCreditCard,styles:null===(r=null===(a=this.options)||void 0===a?void 0:a.styles)||void 0===r?void 0:r.storeCardCheckbox}),this.subElements.push(this.storeCardCheckbox))}show(){this.element.style.display="flex"}hide(){this.element.style.display="none"}prepareStyles(t,e){var i;let o=JSON.parse(JSON.stringify(t));return(null===(i=this.options)||void 0===i?void 0:i.showCardHolderName)&&e===exports.ElementType.CARD_NUMBER&&(this.element.setAttribute("class","with-card-holder"),o=Object.assign(Object.assign({},t),{base:Object.assign(Object.assign({},r.base),{border:"1px solid #eae8ee",borderTop:"none",padding:"10px 16px"})})),["base","complete","empty","focus","invalid","cardIcon","copyIcon"].forEach((t=>{var i,n,s,a,r,l,d;o[t]=Object.assign(Object.assign(Object.assign({},o[t]),null===(a=null===(s=null===(n=null===(i=this.options)||void 0===i?void 0:i.styles)||void 0===n?void 0:n.inputFields)||void 0===s?void 0:s.all)||void 0===a?void 0:a[t]),null===(d=null===(l=null===(r=this.options)||void 0===r?void 0:r.styles)||void 0===l?void 0:l.inputFields)||void 0===d?void 0:d[e])})),o}get isValid(){return this.formFields.reduce(((t,e)=>t&&e.isValid),!0)}onChange(){var t,e,i,o;(null===(e=null===(t=this.options)||void 0===t?void 0:t.events)||void 0===e?void 0:e.onChange)&&(null===(o=null===(i=this.options)||void 0===i?void 0:i.events)||void 0===o||o.onChange({isValid:this.isValid}))}async collectValues(){var t,e;return{tokenizedCardData:await this.collectContainer.collect(),storeInstrument:(null===(t=this.storeCardCheckbox)||void 0===t?void 0:t.isChecked)||(null===(e=this.options)||void 0===e?void 0:e.alwaysStoreInstrument)}}}class u extends e{constructor(t){super("span",{id:"payrails-store-card"});const e="payrails-store-card-checkbox",i=(null==t?void 0:t.label)||"Save credit card for future payments";this.element.innerHTML=`<label for="${e}"}"><input type="checkbox" id="${e}" name="${e}" >${i}</label>`,Object.keys((null==t?void 0:t.styles)||{}).forEach((e=>{var i;this.element.style[e]=null===(i=null==t?void 0:t.styles)||void 0===i?void 0:i[e]})),this.element.addEventListener("change",(t=>{t.stopPropagation(),t.stopImmediatePropagation()}))}get isChecked(){var t;return null===(t=this.element.querySelector("input"))||void 0===t?void 0:t.checked}}class c{constructor(t,e){this.isValid=!1;const{type:i,label:o,placeholder:n,inputStyles:s,events:a,format:r}=e,l=t.createCollectElement({type:i,label:o,placeholder:n,format:r,inputStyles:s});(null==a?void 0:a.onFocus)&&l.on("FOCUS",a.onFocus),l.on("CHANGE",(t=>{const{isEmpty:e,isValid:i}=t;this.isValid=!e&&i,(null==a?void 0:a.onChange)&&a.onChange(this)}))}}class h extends e{constructor(t,e){super("div",{id:"payrails-card-list"}),this.workflowExecution=t,this.listItems=[],this.workflowExecution.savedCreditCards.forEach((t=>{const i=new v((()=>{(null==e?void 0:e.onCardChange)&&e.onCardChange(t)}),t);this.listItems.push(i),this.subElements.push(i)}))}reset(){this.element.querySelectorAll("input").forEach((t=>t.checked=!1))}}class v extends e{constructor(t,e){super("div",{className:"payrails-card-list-item",id:`payrails-card-list-item-${e.id}`});const{id:i}=e,o=this.createCardLabel(e),n=document.createElement("label");n.setAttribute("for",i),n.addEventListener("click",t);const s=document.createElement("input");s.setAttribute("type","radio"),s.setAttribute("name","payment-option"),s.setAttribute("id",i),s.setAttribute("value",i),n.appendChild(s);const a=document.createElement("span");a.innerText=o,n.appendChild(a),this.element.appendChild(n)}createCardLabel({data:{suffix:t}}){return`****${t}`}}let p;const m=new Uint8Array(16);function y(){if(!p&&(p="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!p))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return p(m)}const g=[];for(let t=0;t<256;++t)g.push((t+256).toString(16).slice(1));var f,b={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function C(t,e,i){if(b.randomUUID&&!e&&!t)return b.randomUUID();const o=(t=t||{}).random||(t.rng||y)();if(o[6]=15&o[6]|64,o[8]=63&o[8]|128,e){i=i||0;for(let t=0;t<16;++t)e[i+t]=o[t];return e}return function(t,e=0){return(g[t[e+0]]+g[t[e+1]]+g[t[e+2]]+g[t[e+3]]+"-"+g[t[e+4]]+g[t[e+5]]+"-"+g[t[e+6]]+g[t[e+7]]+"-"+g[t[e+8]]+g[t[e+9]]+"-"+g[t[e+10]]+g[t[e+11]]+g[t[e+12]]+g[t[e+13]]+g[t[e+14]]+g[t[e+15]]).toLowerCase()}(o)}!function(t){t.GET="GET",t.POST="POST"}(f||(f={}));const w=async({url:t,method:e=f.GET,token:i,body:o})=>{const n={method:e,headers:Object.assign(Object.assign({},k()),A(i))};e===f.POST&&(n.body=JSON.stringify(o||{}));const s=await fetch(t,n),a=await s.json();if([401,403].includes(s.status))throw new E(t,e);if(!s.ok)throw new x(t,e,a);return{ok:s.ok,req:Object.assign({url:t},n),res:a}};class E extends Error{constructor(t,e){super(`[${e}] ${t} unauthorized`)}}class x extends Error{constructor(t,e,i){super(`[${e}] ${t} unsuccessful`),this.res=i}}const A=t=>({authorization:`Bearer ${t}`}),k=()=>({"x-idempotency-key":C()});class P{constructor(t,e){this.sdkConfig=t,this.execution=e}async pay(t){const e=(await this.authorize(t)).res.links.execution;return await this.pollForAuthorizationResult(e)}async authorize(t){if(!this.execution.authorizeLink||!this.sdkConfig.amount)throw new Error("SDK was not initialized with workflow execution");return w({url:this.execution.authorizeLink,method:f.POST,token:this.sdkConfig.token,body:{amount:this.sdkConfig.amount,paymentComposition:t,returnInfo:{success:"https://www.bootstrap.payrails.io/success",cancel:"https://www.bootstrap.payrails.io/cancel",error:"https://www.bootstrap.payrails.io/error"}}})}async confirm(t,e={}){const i=await w({url:t,method:f.POST,token:this.sdkConfig.token,body:{data:e}});return this.pollForAuthorizationResult(i.res.links.execution)}async pollForAuthorizationResult(t,e=0){const i=(await this.getExecution(t)).res,o=i.status,n=["authorizePending","authorizeSuccessful","authorizeFailed"],s=o.find((({code:t})=>"authorizeRequested"===t));if(!s&&e<10)return await new Promise((t=>setTimeout(t,300))),this.pollForAuthorizationResult(t,e+1);if(!s)throw new Error("Authorization was not requested");const a=o.find((({code:t,time:e})=>"confirmRequested"===t&&new Date(e)>new Date(s.time))),r=a?a.time:s.time;let l=o.find((({code:t,time:e})=>n.includes(t)&&new Date(e)>new Date(r)));if(!l){const{res:e}=await this.getExecution(t,void 0,r);return l=e.status.find((({code:t,time:e})=>n.includes(t)&&new Date(e)>new Date(r))),{finalState:l,response:e}}return{finalState:l,response:i}}async getExecution(t,e,i){const o=new URLSearchParams;e&&e.length>0&&o.append("waitWhile[status]",`[${e.map((t=>`"${t}"`)).join(",")}]`),i&&o.append("waitWhile[lastStatusTime]",i);const n=`${t}${o.toString()?"?":""}${o.toString()}`;return w({url:n,token:this.sdkConfig.token})}}var _,S;!function(t){t.CARD="card",t.GOOGLE_PAY="googlePay",t.PAYPAL="payPal"}(_||(_={})),function(t){t.ENABLED="enabled",t.CREATED="created"}(S||(S={}));class O{constructor(t){this.executionResponse=t}get lookup(){return this.executionResponse.initialResults.find((({body:{name:t}})=>"lookup"===t))}get holderReference(){return this.executionResponse.holderReference}get savedCreditCards(){const t=this.availablePaymentMethods.find((({paymentMethodCode:t})=>t===_.CARD));return(null==t?void 0:t.paymentInstruments)||[]}get paypalConfig(){const t=this.availablePaymentMethods.find((({paymentMethodCode:t})=>t===_.PAYPAL));if(!t)throw new Error("trying to initialize paypal without config");return t.config}get googlePayConfig(){const t=this.availablePaymentMethods.find((({paymentMethodCode:t})=>t===_.GOOGLE_PAY));if(!t)throw new Error("trying to initialize google pay without config");return t?[t.config]:[]}get url(){return this.response.links.self}get response(){return this.executionResponse}get meta(){return this.executionResponse.meta}get availablePaymentMethods(){var t;return(null===(t=this.lookup)||void 0===t?void 0:t.body.data.paymentCompositionOptions)||[]}get authorizeLink(){var t;return null===(t=this.lookup)||void 0===t?void 0:t.body.links.authorize.href}}class B extends e{constructor(t,e,i){var o;super("button",{id:"payrails-card-payment-button"}),this.sdkConfig=t,this.execution=e,this.options=i,this.selectedCard=null,this.storeInstrument=!1,this.element.innerText=(null===(o=null==i?void 0:i.translations)||void 0===o?void 0:o.label)||"Pay",this.element.addEventListener("click",this.onPay.bind(this)),this.element.addEventListener("mouseenter",(()=>{var t;this.element.classList.contains("disabled")||(this.element.classList.add("hover"),this.setStyles((null===(t=this.options.styles)||void 0===t?void 0:t.hover)||{}))})),this.element.addEventListener("mouseleave",(()=>{var t;this.element.classList.contains("disabled")||(this.element.classList.remove("hover"),this.removeStyles((null===(t=this.options.styles)||void 0===t?void 0:t.hover)||{}))})),this.paymentExecutor=new P(this.sdkConfig,this.execution)}setDisabled(t){var e,i,o;this.element.disabled=t,t?(this.element.classList.add("disabled"),(null===(e=this.options.styles)||void 0===e?void 0:e.disabled)&&this.setStyles(this.options.styles.disabled)):(this.element.classList.remove("disabled"),this.removeStyles((null===(i=this.options.styles)||void 0===i?void 0:i.disabled)||{}),(null===(o=this.options.styles)||void 0===o?void 0:o.base)&&this.setStyles(this.options.styles.base))}setStyles(t){var e;const i=Object.assign(Object.assign({},null===(e=this.options.styles)||void 0===e?void 0:e.base),t);Object.keys(i).forEach((t=>{this.element.style[t]=i[t]}))}removeStyles(t){var e;const i=Object.keys((null===(e=this.options.styles)||void 0===e?void 0:e.base)||{});Object.keys(t).forEach((t=>{var e,o;i.includes(t)?this.element.style[t]=null===(o=null===(e=this.options.styles)||void 0===e?void 0:e.base)||void 0===o?void 0:o[t]:this.element.style[t]=""}))}setLabel(t){this.element.innerText=t}setCardForm(t){this.cardForm=t}triggerLoading(t){var e,i,o,n;const s=this.element.offsetWidth;this.element.style.minWidth=`${s}px`,t?(this.element.innerHTML='<div class="dot-flashing"></div>',this.element.classList.add("loading"),(null===(e=this.options.styles)||void 0===e?void 0:e.loading)&&this.setStyles(this.options.styles.loading)):(this.element.innerText=(null===(o=null===(i=this.options)||void 0===i?void 0:i.translations)||void 0===o?void 0:o.label)||"Pay",this.element.classList.remove("loading"),this.removeStyles((null===(n=this.options.styles)||void 0===n?void 0:n.loading)||{}))}onAuthorizationFailed(){var t,e;this.setDisabled(!1),this.triggerLoading(!1),(null===(t=this.options.events)||void 0===t?void 0:t.onAuthorizeFailed)&&(null===(e=this.options.events)||void 0===e||e.onAuthorizeFailed())}async onPay(){var t,e,i,o;if(this.setDisabled(!0),this.triggerLoading(!0),null===(t=this.options.events)||void 0===t?void 0:t.onPaymentButtonClicked){if(!1===await(null===(e=this.options.events)||void 0===e?void 0:e.onPaymentButtonClicked()))return void this.onAuthorizationFailed()}try{let t=null===(i=this.selectedCard)||void 0===i?void 0:i.id;if(!t){t=(await this.tokenizeCard()).res.id}const e=[{paymentMethodCode:_.CARD,integrationType:"api",amount:this.sdkConfig.amount,paymentInstrumentId:t,storeInstrument:this.storeInstrument}],o=await this.paymentExecutor.pay(e);this.handleAuthorizationResult(o)}catch(t){t instanceof E&&(null===(o=this.options.events)||void 0===o?void 0:o.onPaymentSessionExpired)&&this.options.events.onPaymentSessionExpired(),this.onAuthorizationFailed()}}handleAuthorizationResult(t){var e,i,o;switch(null===(e=null==t?void 0:t.finalState)||void 0===e?void 0:e.code){case"authorizeSuccessful":this.triggerLoading(!1),(null===(i=this.options.events)||void 0===i?void 0:i.onAuthorizeSuccess)&&this.options.events.onAuthorizeSuccess();break;case"authorizePending":"3ds"===(null===(o=null==t?void 0:t.response)||void 0===o?void 0:o.actionRequired)&&this.handle3ds(t);break;default:this.onAuthorizationFailed()}}handle3ds(t){var e,i;const o=null===(e=null==t?void 0:t.response)||void 0===e?void 0:e.links["3ds"];if(o){const t=[[250,400],[390,400],[500,600],[600,400]],e=screen.width,n=t.reduce(((t,i)=>e>i[0]?i:t),[250,400]),s=document.createElement("iframe");s.setAttribute("id","payrails-3ds-frame"),s.setAttribute("src",o),s.setAttribute("width",n[0].toString()),s.setAttribute("height",n[1].toString());const a=document.createElement("div");a.setAttribute("id","payrails-3ds-challenge"),a.appendChild(s);const r=document.createElement("div");r.addEventListener("click",(async()=>{r.remove()})),r.setAttribute("id","payrails-3ds-popup-background"),r.appendChild(a);const l=async t=>{var e,i,o;if(t.data&&'{"type":"3DS-challenge-completed"}'===t.data){window.removeEventListener("message",l),r.remove();if(!(await this.paymentExecutor.getExecution(this.execution.url)).res.status.find((({code:t})=>"authorizeSuccessful"===t))&&(null===(e=this.options.events)||void 0===e?void 0:e.onAuthorizeFailed))return void this.onAuthorizationFailed();if(null===(i=this.options.events)||void 0===i?void 0:i.onAuthorizeSuccess)return void(null===(o=this.options.events)||void 0===o||o.onAuthorizeSuccess())}};null===(i=document.querySelector("body"))||void 0===i||i.appendChild(r),window.addEventListener("message",l),a.style.width=`${n[0]+4}px`,a.style.height=`${n[1]+4}px`}}async tokenizeCard(){if(!this.cardForm)throw new Error("Trying to tokenize non-existent card form");const{tokenizedCardData:t,storeInstrument:e}=await this.cardForm.collectValues();this.storeInstrument=Boolean(e);const{instrumentId:i,card_number:o,cardholder_name:n,expiry_month:s,expiry_year:a}=t;return(({url:t,token:e,instrumentId:i,holderReference:o,providerId:n,providerConfigId:s,meta:a,storeInstrument:r=!1})=>w({url:t,token:e,method:f.POST,body:{holderReference:o,storeInstrument:r,paymentMethod:"card",token:{providerId:n,providerConfigId:s,reference:i,type:"vault",meta:a}}}))({url:this.sdkConfig.vaultConfiguration.links.saveInstrument.href,token:this.sdkConfig.token,instrumentId:i,holderReference:this.execution.holderReference,providerId:this.sdkConfig.vaultConfiguration.providerId,providerConfigId:this.sdkConfig.vaultConfiguration.providerConfigId,meta:{skyflow_id:i,card_number:o,cardholder_name:n,expiry_month:s,expiry_year:a},storeInstrument:this.storeInstrument})}}class z extends e{constructor(t="Authorization failed, please try again."){super("div",{id:"authorization-failed-message"}),this.element.innerText=t,this.element.innerHTML=`\n      <div>\n        <svg class="checkmark-cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">\n          <circle class="checkmark-cross_circle" cx="26" cy="26" r="25" fill="none"/>\n          <path class="checkmark-cross_check" fill="none" d="M14.1 14.1l23.8 23.8 m0,-23.8 l-23.8,23.8"/>\n        </svg>\n      </div>\n      <div>${t}</div>`,this.element.addEventListener("click",(t=>{t.preventDefault(),t.stopImmediatePropagation(),t.stopPropagation(),this.unmount()}))}}class F extends e{constructor(t){var e;super("div",{id:"payrails-authorization-success-msg"}),this.element.innerHTML=`\n      <div class="checkmark-wrapper">\n        <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">\n          <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>\n            <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>\n          </svg>\n      </div>\n      <div id="payrails-authorization-success">${(null===(e=null==t?void 0:t.translations)||void 0===e?void 0:e.label)||"Payment successful"}</div`}}class I extends e{constructor(t,e,i){super("div",{id:t,className:"payrails-dropin-item"}),this.events=i,this.isActive=!1;const o=`payrails-dropin-item-${t}`,n=document.createElement("label");n.setAttribute("for",o);const s=document.createElement("input");s.setAttribute("type","radio"),s.setAttribute("name","payment-option"),s.setAttribute("id",o),s.setAttribute("value",o),this.input=s,n.appendChild(s),this.label=n;const a=document.createElement("span");n.appendChild(a),a.innerText=e,this.element.appendChild(n)}get identifier(){return`payrails-dropin-item-${this.id}`}deactivate(){var t,e;this.isActive&&(this.isActive=!1,this.label.style.marginBottom="0",null===(t=this.component)||void 0===t||t.unmount(),(null===(e=this.events)||void 0===e?void 0:e.onDeactivate)&&this.events.onDeactivate())}activate(){var t,e;this.isActive||(null===(t=this.component)||void 0===t||t.mount(this.selector),this.label.style.marginBottom="8px",this.isActive=!0,(null===(e=this.events)||void 0===e?void 0:e.onActivate)&&this.events.onActivate())}}class R extends I{constructor(t,e){super("payrails-credit-card-wrapper","Card"),this.cardForm=t,this.paymentButton=e,this.cardFormShown=!1,this.component=new L(t,e)}activate(){var t,e;this.label.style.marginBottom="8px",this.cardFormShown||(this.cardFormShown=!0,null===(t=this.component)||void 0===t||t.mount(this.selector)),this.isActive||(this.paymentButton.selectedCard=null,this.paymentButton.mount(this.selector),this.paymentButton.setDisabled(!this.cardForm.isValid),this.paymentButton.mount("#payrails-card-form"),this.input.checked=!0,this.cardForm.show(),this.isActive=!0,(null===(e=this.events)||void 0===e?void 0:e.onActivate)&&this.events.onActivate())}deactivate(){var t;this.isActive&&(this.label.style.marginBottom="0",this.paymentButton.unmount(),this.cardForm.hide(),this.isActive=!1,(null===(t=this.events)||void 0===t?void 0:t.onDeactivate)&&this.events.onDeactivate())}}class L extends e{constructor(t,e){super("div",{id:"payrails-form-container"}),this.subElements.push(t,e)}}class j{constructor(t){this.loadFunction=t,this.loadScript()}get loader(){return this.loadingPromise||(this.loadingPromise=this.loadScript()),this.loadingPromise}async loadScript(){return this.loadingPromise||(this.loadingPromise=new Promise(((t,e)=>{this.loadFunction().then((i=>{i?t(i):e()}),e)}))),this.loadingPromise}}const T={apiVersion:2,apiVersionMinor:0};class D extends e{constructor(t,e,i){super("div",{id:"payrails-google-pay-button"}),this.sdkConfig=t,this.execution=e,this.options=i,this.googleButton=null,this.paymentExecutor=new P(t,e),this.loadScript=new j((async()=>{const t=document.createElement("script");return t.src="https://pay.google.com/gp/p/js/pay.js",new Promise(((e,i)=>{t.onload=()=>{const t=new google.payments.api.PaymentsClient({environment:this.options.environment||"TEST"}),o=Object.assign(Object.assign({},T),{allowedPaymentMethods:this.execution.googlePayConfig});t.isReadyToPay(o).then((o=>{var n,s,a;o?(null===(a=null===(s=null===(n=this.options)||void 0===n?void 0:n.events)||void 0===s?void 0:s.onGooglePayAvailable)||void 0===a||a.call(s),e(t)):i()}),i)},t.onerror=()=>{i()},document.body.appendChild(t)}))}))}async sdkLoaded(t){var e,i,o,n,s,a,r,l;try{const d=(null===(i=null===(e=this.options)||void 0===e?void 0:e.styles)||void 0===i?void 0:i.buttonColor)||"black",u=(null===(n=null===(o=this.options)||void 0===o?void 0:o.styles)||void 0===n?void 0:n.buttonType)||"long",c=(null===(a=null===(s=this.options)||void 0===s?void 0:s.styles)||void 0===a?void 0:a.buttonSizeMode)||"fill",h=(null===(l=null===(r=this.options)||void 0===r?void 0:r.styles)||void 0===l?void 0:l.buttonLocale)||void 0;return this.googleButton=t.createButton({buttonColor:d,buttonType:u,buttonSizeMode:c,buttonLocale:h,onClick:async()=>{var t,e,i;if(null===(e=null===(t=this.options)||void 0===t?void 0:t.events)||void 0===e?void 0:e.onPaymentButtonClicked){if(!await(null===(i=this.options)||void 0===i?void 0:i.events.onPaymentButtonClicked()))return}await this.onPaymentButtonClicked()},allowedPaymentMethods:this.execution.googlePayConfig}),this.element.appendChild(this.googleButton),this.googleButton}catch(t){throw console.error("Google pay can not be initialized",t),new Error(t.message)}}async onLoadPaymentData(t){var e,i,o,n;const s=[{paymentMethodCode:"googlePay",integrationType:"api",paymentInstrumentData:{paymentToken:t.paymentMethodData.tokenizationData.token},amount:this.sdkConfig.amount}],a=await this.paymentExecutor.pay(s);(null===(i=null===(e=this.options)||void 0===e?void 0:e.events)||void 0===i?void 0:i.onAuthorizeSuccess)&&(null===(n=null===(o=this.options)||void 0===o?void 0:o.events)||void 0===n||n.onAuthorizeSuccess(a))}async onPaymentButtonClicked(){var t,e,i,o,n;const s=Object.assign({},T);s.allowedPaymentMethods=this.execution.googlePayConfig,s.transactionInfo={totalPriceStatus:"FINAL",totalPrice:null===(t=this.sdkConfig.amount)||void 0===t?void 0:t.value,currencyCode:null===(e=this.sdkConfig.amount)||void 0===e?void 0:e.currency,countryCode:null===(n=null===(o=null===(i=this.execution.meta)||void 0===i?void 0:i.customer)||void 0===o?void 0:o.country)||void 0===n?void 0:n.code};(await this.loadScript.loader).loadPaymentData(s).then((t=>{this.onLoadPaymentData(t)})).catch((t=>{var e,i,o;(null===(i=null===(e=this.options)||void 0===e?void 0:e.events)||void 0===i?void 0:i.onAuthorizeFailed)&&(null===(o=this.options)||void 0===o||o.events.onAuthorizeFailed(t))}))}mount(t){super.mount(t),(async()=>{try{const t=await this.loadScript.loader,e=await this.sdkLoaded(t);this.element.appendChild(e)}catch(t){}})()}unmount(){var t;this.googleButton&&(null===(t=this.googleButton.parentElement)||void 0===t||t.removeChild(this.googleButton)),super.unmount()}}class M extends I{constructor(){super(...arguments),this.buttonShown=!1}activate(){if(!this.buttonShown)return super.activate(),void(this.buttonShown=!0);this.label.style.marginBottom="8px",this.isActive=!0,this.element.querySelector(this.component.selector).style.display="block"}deactivate(){this.isActive&&(this.isActive=!1,this.label.style.marginBottom="0",this.element.querySelector(this.component.selector).style.display="none")}mountAfterAvailable(){super.mount(`#${this.loadElementId}`)}mount(t){const e=document.querySelector(t);if(!e)throw new Error(`Element with selector "${t}" not found in in the DOM`);const i=document.createElement("div");i.setAttribute("id",this.loadElementId),i.setAttribute("style","width: 100%;"),e.appendChild(i)}unmount(){var t;super.unmount(),null===(t=document.querySelector(`#${this.loadElementId}`))||void 0===t||t.remove()}}class N extends M{constructor(t,e,i){var o;super("google-pay-dropin",(null===(o=i.translations)||void 0===o?void 0:o.label)||"Google Pay"),this.loadElementId="google-pay-dropin-load-element",this.component=new D(t,e,Object.assign(Object.assign({},i),{events:Object.assign(Object.assign({},i.events),{onGooglePayAvailable:()=>{this.mountAfterAvailable()}})}))}mount(t){const e=document.querySelector(t);if(!e)throw new Error(`Element with selector "${t}" not found in in the DOM`);const i=document.createElement("div");i.setAttribute("id",this.loadElementId),i.setAttribute("style","width: 100%;"),e.appendChild(i)}}
+/*!
+ * paypal-js v5.1.4 (2022-11-29T23:08:21.847Z)
+ * Copyright 2020-present, PayPal, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */function $(t){var e="https://www.paypal.com/sdk/js";t.sdkBaseURL&&(e=t.sdkBaseURL,delete t.sdkBaseURL),function(t){var e=t["merchant-id"],i=t["data-merchant-id"],o="",n="";Array.isArray(e)?e.length>1?(o="*",n=e.toString()):o=e.toString():"string"==typeof e&&e.length>0?o=e:"string"==typeof i&&i.length>0&&(o="*",n=i);t["merchant-id"]=o,t["data-merchant-id"]=n}(t);var i=Object.keys(t).filter((function(e){return void 0!==t[e]&&null!==t[e]&&""!==t[e]})).reduce((function(e,i){var o=t[i].toString();return"data-"===i.substring(0,5)?e.dataAttributes[i]=o:e.queryParams[i]=o,e}),{queryParams:{},dataAttributes:{}}),o=i.queryParams,n=i.dataAttributes;return{url:"".concat(e,"?").concat(V(o)),dataAttributes:n}}function V(t){var e="";return Object.keys(t).forEach((function(i){0!==e.length&&(e+="&"),e+=i+"="+t[i]})),e}function U(t,e){void 0===e&&(e={});var i=document.createElement("script");return i.src=t,Object.keys(e).forEach((function(t){i.setAttribute(t,e[t]),"data-csp-nonce"===t&&i.setAttribute("nonce",e["data-csp-nonce"])})),i}function q(t,e){if(void 0===e&&(e=H()),Y(t,e),"undefined"==typeof window)return e.resolve(null);var i=$(t),o=i.url,n=i.dataAttributes,s=n["data-namespace"]||"paypal",a=G(s);return function(t,e){var i=document.querySelector('script[src="'.concat(t,'"]'));if(null===i)return null;var o=U(t,e),n=i.cloneNode();if(delete n.dataset.uidAuto,Object.keys(n.dataset).length!==Object.keys(o.dataset).length)return null;var s=!0;return Object.keys(n.dataset).forEach((function(t){n.dataset[t]!==o.dataset[t]&&(s=!1)})),s?i:null}(o,n)&&a?e.resolve(a):function(t,e){void 0===e&&(e=H());Y(t,e);var i=t.url,o=t.attributes;if("string"!=typeof i||0===i.length)throw new Error("Invalid url.");if(void 0!==o&&"object"!=typeof o)throw new Error("Expected attributes to be an object.");return new e((function(t,e){if("undefined"==typeof window)return t();!function(t){var e=t.url,i=t.attributes,o=t.onSuccess,n=t.onError,s=U(e,i);s.onerror=n,s.onload=o,document.head.insertBefore(s,document.head.firstElementChild)}({url:i,attributes:o,onSuccess:function(){return t()},onError:function(){var t=new Error('The script "'.concat(i,'" failed to load.'));return window.fetch?fetch(i).then((function(i){return 200===i.status&&e(t),i.text()})).then((function(t){var i=function(t){var e=t.split("/* Original Error:")[1];return e?e.replace(/\n/g,"").replace("*/","").trim():t}(t);e(new Error(i))})).catch((function(t){e(t)})):e(t)}})}))}({url:o,attributes:n},e).then((function(){var t=G(s);if(t)return t;throw new Error("The window.".concat(s," global variable is not available."))}))}function H(){if("undefined"==typeof Promise)throw new Error("Promise is undefined. To resolve the issue, use a Promise polyfill.");return Promise}function G(t){return window[t]}function Y(t,e){if("object"!=typeof t||null===t)throw new Error("Expected an options object.");if(void 0!==e&&"function"!=typeof e)throw new Error("Expected PromisePonyfill to be a function.")}class X extends e{constructor(t,e,i){super("div",{id:"payrails-paypal-button"}),this.sdkConfig=t,this.execution=e,this.options=i,this.paypalLoader=null,this.createOrder=async()=>{var t,e,i,o,n,s,a;const r=[{paymentMethodCode:"payPal",integrationType:"api",amount:this.sdkConfig.amount,paymentInstrumentData:{providerData:{merchantId:this.execution.paypalConfig.merchantId}},savePaymentInstrument:!1}],l=await this.paymentExecutor.pay(r),d=null===(i=null===(e=null===(t=l.response.links.confirm)||void 0===t?void 0:t.action)||void 0===e?void 0:e.parameters)||void 0===i?void 0:i.orderId;if(!d)throw null===(s=null===(n=null===(o=this.options)||void 0===o?void 0:o.events)||void 0===n?void 0:n.onAuthorizeFailed)||void 0===s||s.call(n),new J("No order id returned");return this.confirmLink=null===(a=l.response.links.confirm)||void 0===a?void 0:a.href,d},this.paymentExecutor=new P(t,e),this.paypalLoader=new j(this.loadPaypal.bind(this))}async loadPaypal(){const t=this.execution.paypalConfig,e=await q({"client-id":t.clientId,components:"buttons,funding-eligibility",intent:"authorize",currency:this.sdkConfig.amount.currency});if(e){return await this.createPaypalButton(e)}throw new Error("Paypal not available")}async createPaypalButton(t){var e,i,o,n,s,a,r,l,d,u,c,h,v;if(!t.Buttons)throw new Error("Paypal button not available");const p=await t.Buttons({fundingSource:"paypal",style:{color:(null===(i=null===(e=this.options)||void 0===e?void 0:e.styles)||void 0===i?void 0:i.color)||"gold",height:(null===(n=null===(o=this.options)||void 0===o?void 0:o.styles)||void 0===n?void 0:n.height)||40,label:(null===(a=null===(s=this.options)||void 0===s?void 0:s.styles)||void 0===a?void 0:a.label)||"paypal",shape:(null===(l=null===(r=this.options)||void 0===r?void 0:r.styles)||void 0===l?void 0:l.shape)||"rect",tagline:(null===(u=null===(d=this.options)||void 0===d?void 0:d.styles)||void 0===u?void 0:u.tagline)||!1},createOrder:this.createOrder.bind(this),onApprove:this.onApprove.bind(this),onError:t=>{var e,i;(null===(i=null===(e=this.options)||void 0===e?void 0:e.events)||void 0===i?void 0:i.onAuthorizeFailed)&&this.options.events.onAuthorizeFailed(t)},onClick:async(t,e)=>{var i,o;if(null===(o=null===(i=this.options)||void 0===i?void 0:i.events)||void 0===o?void 0:o.onPaymentButtonClicked){return await this.options.events.onPaymentButtonClicked()?e.resolve():e.reject()}}});return p.isEligible()?(null===(v=null===(h=null===(c=this.options)||void 0===c?void 0:c.events)||void 0===h?void 0:h.onPaypalAvailable)||void 0===v||v.call(h),p):null}async onApprove(){var t,e,i,o,n,s,a;if(!this.confirmLink)throw new J("No confirm link");"authorizeSuccessful"===(null===(t=(await this.paymentExecutor.confirm(this.confirmLink)).finalState)||void 0===t?void 0:t.code)?null===(o=null===(i=null===(e=this.options)||void 0===e?void 0:e.events)||void 0===i?void 0:i.onAuthorizeSuccess)||void 0===o||o.call(i):null===(a=null===(s=null===(n=this.options)||void 0===n?void 0:n.events)||void 0===s?void 0:s.onAuthorizeFailed)||void 0===a||a.call(s)}mount(t){super.mount(t),(async()=>{this.paypalLoader||(this.paypalLoader=new j(this.loadPaypal.bind(this)));const t=await this.paypalLoader.loader;try{await(null==t?void 0:t.render("#payrails-paypal-button"))}catch(t){throw new W(t.message)}})()}unmount(){var t;null===(t=this.button)||void 0===t||t.close(),this.paypalLoader=null,super.unmount()}}class J extends Error{constructor(t){super(`PaypalOrderError: ${t}`),this.name="PaypalOrderError"}}class W extends Error{constructor(t){super(`PaypalButtonError: ${t}`),this.name="PaypalButtonError"}}class K extends M{constructor(t,e,i){var o;super("payrails-paypal-button-dropin",(null===(o=null==i?void 0:i.translations)||void 0===o?void 0:o.label)||"PayPal"),this.loadElementId="paypal-dropin-load-element",this.component=new X(t,e,Object.assign(Object.assign({},i),{events:Object.assign(Object.assign({},null==i?void 0:i.events),{onPaypalAvailable:()=>{this.mountAfterAvailable()}})}))}}class Q extends I{constructor(t,e,i){super(`card-${t.id}`,`****${t.data.suffix}`,{onActivate:()=>{i(t),this.component.setDisabled(!1)}}),this.component=e}}class Z extends e{constructor(t,e,i,o){var n,s;super("fieldset",{id:"payrails-dropin-component"}),this.collectContainer=t,this.dropinConfig=e,this.execution=i,this.sdkConfig=o;const a=!1===(null===(s=null===(n=this.dropinConfig.paymentMethodsConfiguration)||void 0===n?void 0:n.cards)||void 0===s?void 0:s.showExistingCards),r=new Map;this.execution.availablePaymentMethods.forEach((({paymentMethodCode:t})=>{if(t===_.CARD)a||this.execution.savedCreditCards.forEach((t=>{var e;this.cardPaymentButton=this.createCardPaymentButton(null===(e=this.dropinConfig.translations)||void 0===e?void 0:e.cardPaymentButton);const i=new Q(t,this.cardPaymentButton,(t=>{this.cardPaymentButton&&(this.cardPaymentButton.selectedCard=t)}));r.set(i.identifier,i)}))})),this.execution.availablePaymentMethods.forEach((({paymentMethodCode:t})=>{var e,i;switch(t){case _.PAYPAL:this.paypal=new K(this.sdkConfig,this.execution,{events:{onAuthorizeSuccess:this.onAuthorizeSuccess.bind(this),onAuthorizeFailed:this.onAuthorizeFailed.bind(this)}}),r.set(this.paypal.identifier,this.paypal);break;case _.CARD:this.creditCard=new R(this.createCardForm(),this.createCardPaymentButton(null===(e=this.dropinConfig.translations)||void 0===e?void 0:e.cardPaymentButton)),r.set(this.creditCard.identifier,this.creditCard);break;case _.GOOGLE_PAY:this.googlePay=new N(this.sdkConfig,this.execution,{events:{onAuthorizeSuccess:t=>{var e;if(t)if("authorizeSuccessful"===(null===(e=null==t?void 0:t.finalState)||void 0===e?void 0:e.code))this.onAuthorizeSuccess();else this.onAuthorizeFailed()},onAuthorizeFailed:this.onAuthorizeFailed.bind(this),onPaymentButtonClicked:this.dropinConfig.events.onPaymentButtonClicked},styles:null===(i=this.dropinConfig.styles)||void 0===i?void 0:i.googlePayButton}),r.set(this.googlePay.identifier,this.googlePay)}})),this.element.addEventListener("change",(t=>{var e,i;const o=(null===(e=null==t?void 0:t.target)||void 0===e?void 0:e.value)||"";r.forEach((t=>{t.deactivate()})),null===(i=r.get(o))||void 0===i||i.activate()})),this.subElements.push(...Array.from(r.values()))}createCardForm(){var t,e;if(!this.cardForm){const i=null===(t=this.dropinConfig.paymentMethodsConfiguration)||void 0===t?void 0:t.cards,o=Boolean(null==i?void 0:i.showStoreInstrumentCheckbox),n=Boolean(null==i?void 0:i.showCardHolderName),s=Boolean(null==i?void 0:i.alwaysStoreInstrument);this.cardForm=new d(this.collectContainer,{showStoreInstrumentCheckbox:o,showCardHolderName:n,alwaysStoreInstrument:s,translations:null===(e=this.dropinConfig.translations)||void 0===e?void 0:e.cardForm,events:{onFocus:()=>{var t;null===(t=this.creditCard)||void 0===t||t.activate()},onChange:({isValid:t})=>{var e;null===(e=this.cardPaymentButton)||void 0===e||e.setDisabled(!t)}}})}return this.cardPaymentButton&&this.cardPaymentButton.setCardForm(this.cardForm),this.cardForm}createCardPaymentButton(t){return this.cardPaymentButton||(this.cardPaymentButton=new B(this.sdkConfig,this.execution,{translations:t,events:{onAuthorizeSuccess:this.onAuthorizeSuccess.bind(this),onAuthorizeFailed:this.onAuthorizeFailed.bind(this),onPaymentButtonClicked:this.dropinConfig.events.onPaymentButtonClicked}})),this.cardForm&&this.cardPaymentButton.setCardForm(this.cardForm),this.cardPaymentButton}onAuthorizeSuccess(){var t,e,i,o;this.subElements.forEach((t=>t.unmount())),new F({translations:{label:null===(i=null===(e=null===(t=this.dropinConfig)||void 0===t?void 0:t.translations)||void 0===e?void 0:e.paymentResult)||void 0===i?void 0:i.success}}).mount(this.selector),(null===(o=this.dropinConfig.events)||void 0===o?void 0:o.onAuthorizeSuccess)&&this.dropinConfig.events.onAuthorizeSuccess()}onAuthorizeFailed(){var t,e,i;new z(null===(e=null===(t=this.dropinConfig.translations)||void 0===t?void 0:t.paymentResult)||void 0===e?void 0:e.fail).mount(this.selector),this.dropinConfig.events.onAuthorizeFailed&&(null===(i=this.dropinConfig.events)||void 0===i||i.onAuthorizeFailed())}}var tt=require("skyflow-js").default;class et{constructor(t,e){this.__container=t.container(tt.ContainerType.COMPOSABLE,e)}get elementToFieldMap(){return new Map([[exports.ElementType.CARD_NUMBER,"card_number"],[exports.ElementType.CARDHOLDER_NAME,"cardholder_name"],[exports.ElementType.CVV,"security_code"],[exports.ElementType.EXPIRATION_MONTH,"expiry_month"],[exports.ElementType.EXPIRATION_YEAR,"expiry_year"]])}createCollectElement(t){return this.__container.create(Object.assign({table:"cards",labelStyles:{},errorTextStyles:{},column:this.elementToFieldMap.get(t.type)},t),{format:t.format})}mount(t){const e="payrails-container-wrapper";this.element=document.createElement("span"),this.element.setAttribute("id",e);const i=document.querySelector(t);if(!i)throw new Error(`Element with selector ${t} does not exist`);i.appendChild(this.element),window.setTimeout((()=>{this.__container.mount(`#${e}`)}),50)}unmount(){this.element&&this.element.remove()}async collect(){const{records:t}=await this.__container.collect(),{skyflow_id:e,card_number:i,cardholder_name:o,expiry_month:n,expiry_year:s}=t[0].fields;return{instrumentId:e,card_number:i,cardholder_name:o,expiry_month:n,expiry_year:s}}}var it=require("skyflow-js").default;class ot{static init(t,e){const i=JSON.parse(atob(t.data)),{vaultConfiguration:{vaultId:o,vaultUrl:n,token:s},execution:a}=i,r=it.init({vaultID:o,vaultURL:n,getBearerToken:()=>Promise.resolve(s)});return new ot(i,r,new O(a),e)}update(t){this.sdkConfiguration.amount=t}collectContainer(t){if(!t.layout)throw new Error("Layout configuration is required");return this.__container=new et(this.vaultClient,t),this.__container}googlePayButton(t){var e;if(!this.execution)throw new Error("SDK was not initialized with workflow execution");return new D(this.sdkConfiguration,this.execution,Object.assign({environment:null===(e=this.options)||void 0===e?void 0:e.environment},t))}cardList(t){return this.__cardList||(this.__cardList=new h(this.execution,{onCardChange:e=>{this.__cardPaymentButton&&(this.__cardPaymentButton.selectedCard=e,this.__cardPaymentButton.setDisabled(!1)),null==t||t.onCardChange(e)}})),this.__cardList}cardForm(t){var e,i;if(!this.__cardForm){const o=this.getContainerLayout(null==t?void 0:t.showCardHolderName);this.__container=this.collectContainer(Object.assign(Object.assign({layout:o,errorTextStyles:{base:{display:"none"}}},null===(e=null==t?void 0:t.styles)||void 0===e?void 0:e.errorTextStyles),{styles:{base:null===(i=null==t?void 0:t.styles)||void 0===i?void 0:i.base}})),this.__cardForm=new d(this.__container,Object.assign(Object.assign({},t),{events:Object.assign(Object.assign({},null==t?void 0:t.events),{onChange:e=>{var i;this.__cardPaymentButton&&(this.__cardPaymentButton.selectedCard=null,this.__cardForm&&this.__cardPaymentButton.setDisabled(!this.__cardForm.isValid)),(null===(i=null==t?void 0:t.events)||void 0===i?void 0:i.onChange)&&t.events.onChange(e)},onFocus:()=>{var e;this.__cardList&&this.__cardList.reset(),this.__cardPaymentButton&&(this.__cardPaymentButton.selectedCard=null,this.__cardForm&&this.__cardPaymentButton.setDisabled(!this.__cardForm.isValid)),(null===(e=null==t?void 0:t.events)||void 0===e?void 0:e.onFocus)&&t.events.onFocus()}})}))}return this.__cardPaymentButton&&this.__cardPaymentButton.setCardForm(this.__cardForm),this.__cardForm}constructor(t,e,i,o){var n;this.sdkConfiguration=t,this.vaultClient=e,this.execution=i,this.options=o,(null===(n=null==o?void 0:o.events)||void 0===n?void 0:n.onClientInitialized)&&o.events.onClientInitialized(this.execution)}dropin(t){var e,i;const o=this.getContainerLayout(null===(i=null===(e=t.paymentMethodsConfiguration)||void 0===e?void 0:e.cards)||void 0===i?void 0:i.showCardHolderName);return this.__container=this.collectContainer({layout:o,errorTextStyles:{base:{display:"none"}}}),new Z(this.__container,t,this.execution,this.sdkConfiguration)}getContainerLayout(t){return t?[1,1,3]:[1,3]}paymentButton(t){return this.__cardPaymentButton||(this.__cardPaymentButton=new B(this.sdkConfiguration,this.execution,t)),this.__cardPaymentButton.setDisabled(!0),this.__cardForm&&this.__cardPaymentButton.setCardForm(this.__cardForm),this.__cardPaymentButton}paypalButton(t){return new X(this.sdkConfiguration,this.execution,t)}}exports.Payrails=ot}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payrails/web-sdk",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "SDK providing tokenization options on the client for merchants",
   "main": "index.js",
   "types": "payrails.d.ts",

package/payrails-styles.css

@@ -226,6 +226,7 @@
   align-items: center;
   justify-content: center;
   gap: 8px;
+  z-index: 10000;
 }
 
 #authorization-failed-message .checkmark-cross {

package/payrails.d.ts

@@ -25,6 +25,7 @@ declare class PayrailsElement implements Mountable {
     readonly id: string | undefined;
     constructor(elementType: string, { id, className }?: ElementOptions);
     get parentElement(): HTMLElement | null;
+    get selector(): string;
     mount(location: string): void;
     unmount(): void;
 }
@@ -129,7 +130,8 @@ interface CardFieldStyles {
 
 declare enum PAYMENT_METHOD_CODES {
     'CARD' = "card",
-    'GOOGLE_PAY' = "googlePay"
+    'GOOGLE_PAY' = "googlePay",
+    'PAYPAL' = "payPal"
 }
 declare enum PAYMENT_INSTRUMENT_STATUS {
     'ENABLED' = "enabled",
@@ -156,6 +158,10 @@ declare class WorkflowExecution {
     } | undefined;
     get holderReference(): string;
     get savedCreditCards(): SavedCreditCard[];
+    get paypalConfig(): {
+        clientId: string;
+        merchantId: string;
+    };
     get googlePayConfig(): {
         parameters: {
             allowedAuthMethods: string[];
@@ -181,7 +187,6 @@ declare class WorkflowExecution {
     };
     get availablePaymentMethods(): (GooglePayCompositionOption | CardCompositionOption)[];
     get authorizeLink(): string | undefined;
-    update(response: ExecutionResponse): void;
 }
 interface ExecutionResponse {
     id: string;
@@ -216,6 +221,14 @@ interface ExecutionResponse {
         };
     }>;
     links: {
+        confirm?: {
+            href: string;
+            action?: {
+                parameters?: {
+                    orderId?: string;
+                };
+            };
+        };
         '3ds'?: string;
         self: string;
     };
@@ -299,7 +312,9 @@ declare class CardPaymentButton extends PayrailsElement {
 
 interface GooglePayButtonOptions {
     environment?: 'TEST' | 'PRODUCTION';
-    events?: PaymentEvents;
+    events?: PaymentEvents & {
+        onGooglePayAvailable?: () => void;
+    };
     styles?: {
         buttonColor?: google.payments.api.ButtonColor;
         buttonType?: google.payments.api.ButtonType;
@@ -311,7 +326,6 @@ declare class GooglePayButton extends PayrailsElement {
     private sdkConfig;
     private execution;
     private options;
-    private client;
     private googleButton;
     private paymentExecutor;
     private loadScript;
@@ -329,6 +343,41 @@ interface GooglePayDropinOptions extends GooglePayButtonOptions {
     };
 }
 
+interface PaypalButtonOptions {
+    events?: PaymentEvents & {
+        onPaypalAvailable?: () => void;
+    };
+    styles?: {
+        color?: 'gold' | 'blue' | 'silver' | 'white' | 'black';
+        height?: number;
+        label?: 'paypal' | 'checkout' | 'buynow' | 'pay' | 'installment' | 'subscribe' | 'donate';
+        shape?: 'rect' | 'pill';
+        tagline?: boolean;
+    };
+}
+declare class PaypalButton extends PayrailsElement {
+    private sdkConfig;
+    private execution;
+    private options?;
+    private paymentExecutor;
+    private button;
+    private paypalLoader;
+    private confirmLink;
+    constructor(sdkConfig: SdkConfiguration, execution: WorkflowExecution, options?: PaypalButtonOptions | undefined);
+    private loadPaypal;
+    private createPaypalButton;
+    private createOrder;
+    private onApprove;
+    mount(location: string): void;
+    unmount(): void;
+}
+
+interface PaypalDropinOptions extends PaypalButtonOptions {
+    translations?: {
+        label?: string;
+    };
+}
+
 declare class Dropin extends PayrailsElement {
     private collectContainer;
     private readonly dropinConfig;
@@ -338,6 +387,7 @@ declare class Dropin extends PayrailsElement {
     private creditCard;
     private googlePay;
     private cardForm;
+    private paypal;
     constructor(collectContainer: CollectContainer, dropinConfig: DropinConfiguration, execution: WorkflowExecution, sdkConfig: SdkConfiguration);
     private createCardForm;
     private createCardPaymentButton;
@@ -367,6 +417,7 @@ interface DropinConfiguration {
             success?: string;
             fail?: string;
         };
+        paypalButton?: PaypalDropinOptions['translations'];
     };
     styles?: {
         googlePayButton?: GooglePayButtonOptions['styles'];
@@ -389,7 +440,7 @@ declare class Payrails {
     private __cardList;
     private __cardPaymentButton;
     static init(initResponse: InitOptions, options?: PayrailsClientOptions): Payrails;
-    update(execution: ExecutionResponse, amount: PayrailsAmount): void;
+    update(amount: PayrailsAmount): void;
     collectContainer(containerOptions: CollectContainerOptions): CollectContainer;
     googlePayButton(options: GooglePayButtonOptions): GooglePayButton;
     cardList(options?: CardListOptions): CardList;
@@ -398,6 +449,7 @@ declare class Payrails {
     dropin(options: DropinConfiguration): Dropin;
     private getContainerLayout;
     paymentButton(options: CardPaymentButtonOptions): CardPaymentButton;
+    paypalButton(options?: PaypalButtonOptions): PaypalButton;
 }
 interface InitOptions {
     version: string;
@@ -411,7 +463,7 @@ interface PaymentEvents {
 }
 interface SdkConfiguration {
     token: string;
-    amount?: PayrailsAmount;
+    amount: PayrailsAmount;
     vaultConfiguration: {
         token: string;
         vaultId: string;