@payrails/web-sdk 1.1.6

package/index.js

@@ -0,0 +1 @@
+"use strict";const DEFAULT_ELEMENT_CONFIG={table:"cards",labelStyles:{},errorTextStyles:{}};var ElementType;exports.ElementType=void 0,(ElementType=exports.ElementType||(exports.ElementType={})).CARD_NUMBER="CARD_NUMBER",ElementType.CARDHOLDER_NAME="CARDHOLDER_NAME",ElementType.CVV="CVV",ElementType.EXPIRATION_MONTH="EXPIRATION_MONTH",ElementType.EXPIRATION_YEAR="EXPIRATION_YEAR";class PayrailsElement{constructor(elementType,{id:id="",className:className=""}={}){this.subElements=[];const el=document.createElement(elementType);id&&(this.id=id,el.setAttribute("id",id)),className&&el.setAttribute("class",className),this.element=el}get parentElement(){return this.element.parentElement}mount(location){const parent=document.querySelector(location);if(!parent)throw new Error(`Element with selector "${location}" not found in in the DOM`);parent.appendChild(this.element),this.subElements.forEach((el=>{if(!this.id)throw new Error("Sub elements can not be rendered, please set id for the element");el.mount(`#${this.id}`)}))}unmount(){var _a;this.subElements.forEach((i=>i.unmount())),null===(_a=this.parentElement)||void 0===_a||_a.removeChild(this.element)}}const{CARD_NUMBER:CARD_NUMBER,CVV:CVV,CARDHOLDER_NAME:CARDHOLDER_NAME,EXPIRATION_MONTH:EXPIRATION_MONTH,EXPIRATION_YEAR:EXPIRATION_YEAR}=exports.ElementType,INPUT_STYLES={base:{border:"none",padding:"10px 16px",color:"#1d1d1d",backgroundColor:"#fff"},invalid:{backgroundColor:"#f9e1e1",borderColor:"#f25226",border:"1px solid"}},FORM_FIELDS=[{type:CARDHOLDER_NAME,placeholder:"Card holder",styles:Object.assign(Object.assign({},INPUT_STYLES),{base:Object.assign(Object.assign({},INPUT_STYLES.base),{border:"1px solid #eae8ee",padding:"10px 16px",borderTopLeftRadius:"4px",borderTopRightRadius:"4px"})})},{type:CARD_NUMBER,placeholder:"1234 1234 1234 1234",styles:Object.assign(Object.assign({},INPUT_STYLES),{base:Object.assign(Object.assign({},INPUT_STYLES.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:EXPIRATION_MONTH,placeholder:"MM",styles:Object.assign(Object.assign({},INPUT_STYLES),{base:Object.assign(Object.assign({},INPUT_STYLES.base),{borderBottom:"1px solid #eae8ee",borderLeft:"1px solid #eae8ee",borderRight:"1px solid #eae8ee",borderBottomLeftRadius:"4px"})})},{type:EXPIRATION_YEAR,placeholder:"YY",format:"YY",styles:Object.assign(Object.assign({},INPUT_STYLES),{base:Object.assign(Object.assign({},INPUT_STYLES.base),{borderBottom:"1px solid #eae8ee",borderRight:"1px solid #eae8ee"})})},{type:CVV,placeholder:"CVC",styles:Object.assign(Object.assign({},INPUT_STYLES),{base:Object.assign(Object.assign({},INPUT_STYLES.base),{borderBottom:"1px solid #eae8ee",borderRight:"1px solid #eae8ee",borderBottomRightRadius:"4px"})})}];class CardForm extends PayrailsElement{constructor(collectContainer,options){var _a,_b,_c,_d,_e,_f;super("div",{id:"payrails-card-form"}),this.collectContainer=collectContainer,this.options=options,this.storeCardCheckbox=null,this.formFields=[],FORM_FIELDS.forEach((({type:type,styles:styles,format:format,placeholder:placeholder,label:label})=>{var _a,_b,_c,_d,_e;if(!(null===(_a=this.options)||void 0===_a?void 0:_a.showCardHolderName)&&type===exports.ElementType.CARDHOLDER_NAME)return;const inputStyles=this.prepareStyles(styles,type),el=new CardField(this.collectContainer,{type:type,label:label,placeholder:(null===(_c=null===(_b=null==options?void 0:options.translations)||void 0===_b?void 0:_b.placeholders)||void 0===_c?void 0:_c[type])||placeholder,inputStyles:inputStyles,format:format,events:{onFocus:null===(_e=null===(_d=this.options)||void 0===_d?void 0:_d.events)||void 0===_e?void 0:_e.onFocus,onChange:this.onChange.bind(this)}});this.formFields.push(el)})),this.subElements.push(this.collectContainer),(null===(_a=this.options)||void 0===_a?void 0:_a.showStoreInstrumentCheckbox)&&(this.storeCardCheckbox=new StoreCardCheckbox({label:null===(_d=null===(_c=null===(_b=this.options)||void 0===_b?void 0:_b.translations)||void 0===_c?void 0:_c.labels)||void 0===_d?void 0:_d.saveCreditCard,styles:null===(_f=null===(_e=this.options)||void 0===_e?void 0:_e.styles)||void 0===_f?void 0:_f.storeCardCheckbox}),this.subElements.push(this.storeCardCheckbox))}show(){this.element.style.display="flex"}hide(){this.element.style.display="none"}prepareStyles(styles,type){var _a;let inputStyles=JSON.parse(JSON.stringify(styles));return(null===(_a=this.options)||void 0===_a?void 0:_a.showCardHolderName)&&type===exports.ElementType.CARD_NUMBER&&(this.element.setAttribute("class","with-card-holder"),inputStyles=Object.assign(Object.assign({},styles),{base:Object.assign(Object.assign({},INPUT_STYLES.base),{border:"1px solid #eae8ee",borderTop:"none",padding:"10px 16px"})})),["base","complete","empty","focus","invalid","cardIcon","copyIcon"].forEach((key=>{var _a,_b,_c,_d,_e,_f,_g;inputStyles[key]=Object.assign(Object.assign(Object.assign({},inputStyles[key]),null===(_d=null===(_c=null===(_b=null===(_a=this.options)||void 0===_a?void 0:_a.styles)||void 0===_b?void 0:_b.inputFields)||void 0===_c?void 0:_c.all)||void 0===_d?void 0:_d[key]),null===(_g=null===(_f=null===(_e=this.options)||void 0===_e?void 0:_e.styles)||void 0===_f?void 0:_f.inputFields)||void 0===_g?void 0:_g[type])})),inputStyles}get isValid(){return this.formFields.reduce(((prev,curr)=>prev&&curr.isValid),!0)}onChange(){var _a,_b,_c,_d;(null===(_b=null===(_a=this.options)||void 0===_a?void 0:_a.events)||void 0===_b?void 0:_b.onChange)&&(null===(_d=null===(_c=this.options)||void 0===_c?void 0:_c.events)||void 0===_d||_d.onChange({isValid:this.isValid}))}async collectValues(){var _a,_b;return{tokenizedCardData:await this.collectContainer.collect(),storeInstrument:(null===(_a=this.storeCardCheckbox)||void 0===_a?void 0:_a.isChecked)||(null===(_b=this.options)||void 0===_b?void 0:_b.alwaysStoreInstrument)}}}class StoreCardCheckbox extends PayrailsElement{constructor(options){super("span",{id:"payrails-store-card"});const id="payrails-store-card-checkbox",label=(null==options?void 0:options.label)||"Save credit card for future payments";this.element.innerHTML=`<label for="${id}"}"><input type="checkbox" id="${id}" name="${id}" >${label}</label>`,Object.keys((null==options?void 0:options.styles)||{}).forEach((key=>{var _a;this.element.style[key]=null===(_a=null==options?void 0:options.styles)||void 0===_a?void 0:_a[key]})),this.element.addEventListener("change",(e=>{e.stopPropagation(),e.stopImmediatePropagation()}))}get isChecked(){var _a;return null===(_a=this.element.querySelector("input"))||void 0===_a?void 0:_a.checked}}class CardField{constructor(collectContainer,options){this.isValid=!1;const{type:type,label:label,placeholder:placeholder,inputStyles:inputStyles,events:events,format:format}=options,vaultElement=collectContainer.createCollectElement({type:type,label:label,placeholder:placeholder,format:format,inputStyles:inputStyles});(null==events?void 0:events.onFocus)&&vaultElement.on("FOCUS",events.onFocus),vaultElement.on("CHANGE",(e=>{const{isEmpty:isEmpty,isValid:isValid}=e;this.isValid=!isEmpty&&isValid,(null==events?void 0:events.onChange)&&events.onChange(this)}))}}class CardList extends PayrailsElement{constructor(workflowExecution,options){super("div",{id:"payrails-card-list"}),this.workflowExecution=workflowExecution,this.listItems=[],this.workflowExecution.savedCreditCards.forEach((cardData=>{const listItem=new ListItem((()=>{(null==options?void 0:options.onCardChange)&&options.onCardChange(cardData)}),cardData);this.listItems.push(listItem),this.subElements.push(listItem)}))}reset(){this.element.querySelectorAll("input").forEach((e=>e.checked=!1))}}class ListItem extends PayrailsElement{constructor(onClick,cardData){super("div",{className:"payrails-card-list-item",id:`payrails-card-list-item-${cardData.id}`});const{id:id}=cardData,labelText=this.createCardLabel(cardData),label=document.createElement("label");label.setAttribute("for",id),label.addEventListener("click",onClick);const input=document.createElement("input");input.setAttribute("type","radio"),input.setAttribute("name","payment-option"),input.setAttribute("id",id),input.setAttribute("value",id),label.appendChild(input);const text=document.createElement("span");text.innerText=labelText,label.appendChild(text),this.element.appendChild(label)}createCardLabel({data:{suffix:suffix}}){return`****${suffix}`}}let getRandomValues;const rnds8=new Uint8Array(16);function rng(){if(!getRandomValues&&(getRandomValues="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!getRandomValues))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return getRandomValues(rnds8)}const byteToHex=[];for(let i=0;i<256;++i)byteToHex.push((i+256).toString(16).slice(1));var RequestMethod,native={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function v4(options,buf,offset){if(native.randomUUID&&!buf&&!options)return native.randomUUID();const rnds=(options=options||{}).random||(options.rng||rng)();if(rnds[6]=15&rnds[6]|64,rnds[8]=63&rnds[8]|128,buf){offset=offset||0;for(let i=0;i<16;++i)buf[offset+i]=rnds[i];return buf}return function(arr,offset=0){return(byteToHex[arr[offset+0]]+byteToHex[arr[offset+1]]+byteToHex[arr[offset+2]]+byteToHex[arr[offset+3]]+"-"+byteToHex[arr[offset+4]]+byteToHex[arr[offset+5]]+"-"+byteToHex[arr[offset+6]]+byteToHex[arr[offset+7]]+"-"+byteToHex[arr[offset+8]]+byteToHex[arr[offset+9]]+"-"+byteToHex[arr[offset+10]]+byteToHex[arr[offset+11]]+byteToHex[arr[offset+12]]+byteToHex[arr[offset+13]]+byteToHex[arr[offset+14]]+byteToHex[arr[offset+15]]).toLowerCase()}(rnds)}!function(RequestMethod){RequestMethod.GET="GET",RequestMethod.POST="POST"}(RequestMethod||(RequestMethod={}));const payrailsFetch=async({url:url,method:method=RequestMethod.GET,token:token,body:body})=>{const reqInit={method:method,headers:Object.assign(Object.assign({},getIdempotencyHeader()),getAuthorizationHeader(token))};method===RequestMethod.POST&&(reqInit.body=JSON.stringify(body||{}));const req=await fetch(url,reqInit),res=await req.json();if([401,403].includes(req.status))throw new AuthorizationError(url,method);if(!req.ok)throw new UnsuccessfulError(url,method,res);return{ok:req.ok,req:Object.assign({url:url},reqInit),res:res}};class AuthorizationError extends Error{constructor(url,method){super(`[${method}] ${url} unauthorized`)}}class UnsuccessfulError extends Error{constructor(url,method,res){super(`[${method}] ${url} unsuccessful`),this.res=res}}const getAuthorizationHeader=token=>({authorization:`Bearer ${token}`}),getIdempotencyHeader=()=>({"x-idempotency-key":v4()});class PaymentExecutor{constructor(sdkConfig,execution){this.sdkConfig=sdkConfig,this.execution=execution}async pay(paymentComposition){const executionUrl=(await this.authorize(paymentComposition)).res.links.execution;return await this.pollForAuthorizationResult(executionUrl)}async authorize(paymentComposition){if(!this.execution.authorizeLink||!this.sdkConfig.amount)throw new Error("SDK was not initialized with workflow execution");return payrailsFetch({url:this.execution.authorizeLink,method:RequestMethod.POST,token:this.sdkConfig.token,body:{amount:this.sdkConfig.amount,paymentComposition:paymentComposition,returnInfo:{success:"https://www.bootstrap.payrails.io/success"}}})}async pollForAuthorizationResult(url){const execRes=(await this.getExecution(url)).res,statuses=execRes.status,finalStatuses=["authorizePending","authorizeSuccessful","authorizeFailed"],authorizeRequestedStatus=statuses.find((({code:code})=>"authorizeRequested"===code));if(!authorizeRequestedStatus)return await new Promise((resolve=>setTimeout(resolve,300))),this.pollForAuthorizationResult(url);let finalState=statuses.find((({code:code,time:time})=>finalStatuses.includes(code)&&new Date(time)>new Date(authorizeRequestedStatus.time)));if(!finalState){const{res:res}=await this.getExecution(url,void 0,authorizeRequestedStatus.time);return finalState=res.status.find((({code:code,time:time})=>finalStatuses.includes(code)&&new Date(time)>new Date(authorizeRequestedStatus.time))),{finalState:finalState,response:res}}return{finalState:finalState,response:execRes}}async getExecution(url,currentStatuses,statusTime){const pollParams=new URLSearchParams;currentStatuses&&currentStatuses.length>0&&pollParams.append("waitWhile[status]",`[${currentStatuses.map((i=>`"${i}"`)).join(",")}]`),statusTime&&pollParams.append("waitWhile[lastStatusTime]",statusTime);const pollUrl=`${url}${pollParams.toString()?"?":""}${pollParams.toString()}`;return payrailsFetch({url:pollUrl,token:this.sdkConfig.token})}}var PAYMENT_METHOD_CODES,PAYMENT_INSTRUMENT_STATUS;!function(PAYMENT_METHOD_CODES){PAYMENT_METHOD_CODES.CARD="card",PAYMENT_METHOD_CODES.GOOGLE_PAY="googlePay"}(PAYMENT_METHOD_CODES||(PAYMENT_METHOD_CODES={})),function(PAYMENT_INSTRUMENT_STATUS){PAYMENT_INSTRUMENT_STATUS.ENABLED="enabled",PAYMENT_INSTRUMENT_STATUS.CREATED="created"}(PAYMENT_INSTRUMENT_STATUS||(PAYMENT_INSTRUMENT_STATUS={}));class WorkflowExecution{constructor(executionResponse){this.executionResponse=executionResponse}get lookup(){return this.executionResponse.initialResults.find((({body:{name:name}})=>"lookup"===name))}get holderReference(){return this.executionResponse.holderReference}get savedCreditCards(){const cardPayment=this.availablePaymentMethods.find((({paymentMethodCode:paymentMethodCode})=>paymentMethodCode===PAYMENT_METHOD_CODES.CARD));return(null==cardPayment?void 0:cardPayment.paymentInstruments)||[]}get googlePayConfig(){const googlePay=this.availablePaymentMethods.find((({paymentMethodCode:paymentMethodCode})=>paymentMethodCode===PAYMENT_METHOD_CODES.GOOGLE_PAY));if(!googlePay)throw new Error("trying to initialize google pay without config");return googlePay?[googlePay.config]:[]}get url(){return this.response.links.self}get response(){return this.executionResponse}get meta(){return this.executionResponse.meta}get availablePaymentMethods(){var _a;return(null===(_a=this.lookup)||void 0===_a?void 0:_a.body.data.paymentCompositionOptions)||[]}get authorizeLink(){var _a;return null===(_a=this.lookup)||void 0===_a?void 0:_a.body.links.authorize.href}update(response){this.executionResponse=response}}class CardPaymentButton extends PayrailsElement{constructor(sdkConfig,execution,options){var _a;super("button",{id:"payrails-card-payment-button"}),this.sdkConfig=sdkConfig,this.execution=execution,this.options=options,this.selectedCard=null,this.storeInstrument=!1,this.element.innerText=(null===(_a=null==options?void 0:options.translations)||void 0===_a?void 0:_a.label)||"Pay",this.element.addEventListener("click",this.onPay.bind(this)),this.element.addEventListener("mouseenter",(()=>{var _a;this.element.classList.add("hover"),this.setStyles((null===(_a=this.options.styles)||void 0===_a?void 0:_a.hover)||{})})),this.element.addEventListener("mouseleave",(()=>{var _a;this.element.classList.remove("hover"),this.removeStyles((null===(_a=this.options.styles)||void 0===_a?void 0:_a.hover)||{})})),this.paymentExecutor=new PaymentExecutor(this.sdkConfig,this.execution)}setDisabled(isDisabled){var _a,_b,_c;this.element.disabled=isDisabled,isDisabled?(this.element.classList.add("disabled"),(null===(_a=this.options.styles)||void 0===_a?void 0:_a.disabled)&&this.setStyles(this.options.styles.disabled)):(this.element.classList.remove("disabled"),this.removeStyles((null===(_b=this.options.styles)||void 0===_b?void 0:_b.disabled)||{}),(null===(_c=this.options.styles)||void 0===_c?void 0:_c.base)&&this.setStyles(this.options.styles.base))}setStyles(styles){var _a;const stylesToApply=Object.assign(Object.assign({},null===(_a=this.options.styles)||void 0===_a?void 0:_a.base),styles);Object.keys(stylesToApply).forEach((key=>{this.element.style[key]=stylesToApply[key]}))}removeStyles(styles){var _a;const baseKeys=Object.keys((null===(_a=this.options.styles)||void 0===_a?void 0:_a.base)||{});Object.keys(styles).forEach((key=>{var _a,_b;baseKeys.includes(key)?this.element.style[key]=null===(_b=null===(_a=this.options.styles)||void 0===_a?void 0:_a.base)||void 0===_b?void 0:_b[key]:this.element.style[key]=""}))}setLabel(label){this.element.innerText=label}setCardForm(cardForm){this.cardForm=cardForm}triggerLoading(isLoading){var _a,_b,_c,_d;const elementWidth=this.element.offsetWidth;this.element.style.minWidth=`${elementWidth}px`,isLoading?(this.element.innerHTML='<div class="dot-flashing"></div>',this.element.classList.add("loading"),(null===(_a=this.options.styles)||void 0===_a?void 0:_a.loading)&&this.setStyles(this.options.styles.loading)):(this.element.innerText=(null===(_c=null===(_b=this.options)||void 0===_b?void 0:_b.translations)||void 0===_c?void 0:_c.label)||"Pay",this.element.classList.remove("loading"),this.removeStyles((null===(_d=this.options.styles)||void 0===_d?void 0:_d.loading)||{}))}onAuthorizationFailed(){var _a,_b;this.setDisabled(!1),this.triggerLoading(!1),(null===(_a=this.options.events)||void 0===_a?void 0:_a.onAuthorizeFailed)&&(null===(_b=this.options.events)||void 0===_b||_b.onAuthorizeFailed())}async onPay(){var _a,_b,_c,_d;if(this.setDisabled(!0),this.triggerLoading(!0),null===(_a=this.options.events)||void 0===_a?void 0:_a.onPaymentButtonClicked){if(!1===await(null===(_b=this.options.events)||void 0===_b?void 0:_b.onPaymentButtonClicked()))return void this.onAuthorizationFailed()}try{let instrumentId=null===(_c=this.selectedCard)||void 0===_c?void 0:_c.id;if(!instrumentId){instrumentId=(await this.tokenizeCard()).res.id}const paymentComposition=[{paymentMethodCode:PAYMENT_METHOD_CODES.CARD,integrationType:"api",amount:this.sdkConfig.amount,paymentInstrumentId:instrumentId,storeInstrument:this.storeInstrument}],authorizationResult=await this.paymentExecutor.pay(paymentComposition);this.handleAuthorizationResult(authorizationResult)}catch(error){error instanceof AuthorizationError&&(null===(_d=this.options.events)||void 0===_d?void 0:_d.onPaymentSessionExpired)&&this.options.events.onPaymentSessionExpired(),this.onAuthorizationFailed()}}handleAuthorizationResult(result){var _a,_b,_c;switch(null===(_a=null==result?void 0:result.finalState)||void 0===_a?void 0:_a.code){case"authorizeSuccessful":this.triggerLoading(!1),(null===(_b=this.options.events)||void 0===_b?void 0:_b.onAuthorizeSuccess)&&this.options.events.onAuthorizeSuccess();break;case"authorizePending":"3ds"===(null===(_c=null==result?void 0:result.response)||void 0===_c?void 0:_c.actionRequired)&&this.handle3ds(result);break;default:this.onAuthorizationFailed()}}handle3ds(authorizationResult){var _a,_b;const link=null===(_a=null==authorizationResult?void 0:authorizationResult.response)||void 0===_a?void 0:_a.links["3ds"];if(link){const availableSizes=[[250,400],[390,400],[500,600],[600,400]],screenWidth=screen.width,iframeSize=availableSizes.reduce(((prev,curr)=>screenWidth>curr[0]?curr:prev),[250,400]),iframe=document.createElement("iframe");iframe.setAttribute("id","payrails-3ds-frame"),iframe.setAttribute("src",link),iframe.setAttribute("width",iframeSize[0].toString()),iframe.setAttribute("height",iframeSize[1].toString());const popup=document.createElement("div");popup.setAttribute("id","payrails-3ds-challenge"),popup.appendChild(iframe);const popupBackground=document.createElement("div");popupBackground.addEventListener("click",(async()=>{popupBackground.remove()})),popupBackground.setAttribute("id","payrails-3ds-popup-background"),popupBackground.appendChild(popup);const handleMessages=async ev=>{var _a,_b,_c;if(ev.data&&'{"type":"3DS-challenge-completed"}'===ev.data){window.removeEventListener("message",handleMessages),popupBackground.remove();if(!(await this.paymentExecutor.getExecution(this.execution.url)).res.status.find((({code:code})=>"authorizeSuccessful"===code))&&(null===(_a=this.options.events)||void 0===_a?void 0:_a.onAuthorizeFailed))return void this.onAuthorizationFailed();if(null===(_b=this.options.events)||void 0===_b?void 0:_b.onAuthorizeSuccess)return void(null===(_c=this.options.events)||void 0===_c||_c.onAuthorizeSuccess())}};null===(_b=document.querySelector("body"))||void 0===_b||_b.appendChild(popupBackground),window.addEventListener("message",handleMessages),popup.style.width=`${iframeSize[0]+4}px`,popup.style.height=`${iframeSize[1]+4}px`}}async tokenizeCard(){if(!this.cardForm)throw new Error("Trying to tokenize non-existent card form");const{tokenizedCardData:tokenizedCardData,storeInstrument:storeInstrument}=await this.cardForm.collectValues();this.storeInstrument=Boolean(storeInstrument);const{instrumentId:instrumentId,card_number:card_number,cardholder_name:cardholder_name,expiry_month:expiry_month,expiry_year:expiry_year}=tokenizedCardData;return(({url:url,token:token,instrumentId:instrumentId,holderReference:holderReference,providerId:providerId,providerConfigId:providerConfigId,meta:meta,storeInstrument:storeInstrument=!1})=>payrailsFetch({url:url,token:token,method:RequestMethod.POST,body:{holderReference:holderReference,storeInstrument:storeInstrument,paymentMethod:"card",token:{providerId:providerId,providerConfigId:providerConfigId,reference:instrumentId,type:"vault",meta:meta}}}))({url:this.sdkConfig.vaultConfiguration.links.saveInstrument.href,token:this.sdkConfig.token,instrumentId:instrumentId,holderReference:this.execution.holderReference,providerId:this.sdkConfig.vaultConfiguration.providerId,providerConfigId:this.sdkConfig.vaultConfiguration.providerConfigId,meta:{skyflow_id:instrumentId,card_number:card_number,cardholder_name:cardholder_name,expiry_month:expiry_month,expiry_year:expiry_year},storeInstrument:this.storeInstrument})}}class AuthFailMsg extends PayrailsElement{constructor(label="Authorization failed, please try again."){super("div",{id:"authorization-failed-message"}),this.element.innerText=label,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>${label}</div>`,this.element.addEventListener("click",(e=>{e.stopImmediatePropagation(),e.stopPropagation(),this.unmount()}))}}class AuthSuccessMsg extends PayrailsElement{constructor(options){var _a;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===(_a=null==options?void 0:options.translations)||void 0===_a?void 0:_a.label)||"Payment successful"}</div`}}class DropinElement extends PayrailsElement{constructor(id,label,events){super("div",{id:id,className:"payrails-dropin-item"}),this.events=events,this.isActive=!1;const checkboxId=`payrails-dropin-item-${id}`,labelEl=document.createElement("label");labelEl.setAttribute("for",checkboxId);const input=document.createElement("input");input.setAttribute("type","radio"),input.setAttribute("name","payment-option"),input.setAttribute("id",checkboxId),input.setAttribute("value",checkboxId),this.input=input,labelEl.appendChild(input),this.label=labelEl;const text=document.createElement("span");labelEl.appendChild(text),text.innerText=label,this.element.appendChild(labelEl)}get identifier(){return`payrails-dropin-item-${this.id}`}deactivate(){var _a,_b;this.isActive&&(this.isActive=!1,this.label.style.marginBottom="0",null===(_a=this.component)||void 0===_a||_a.unmount(),(null===(_b=this.events)||void 0===_b?void 0:_b.onDeactivate)&&this.events.onDeactivate())}activate(){var _a,_b;this.isActive||(null===(_a=this.component)||void 0===_a||_a.mount(`#${this.id}`),this.label.style.marginBottom="8px",this.isActive=!0,(null===(_b=this.events)||void 0===_b?void 0:_b.onActivate)&&this.events.onActivate())}}class CreditCardDropin extends DropinElement{constructor(cardForm,paymentButton){super("payrails-credit-card-wrapper","Card"),this.cardForm=cardForm,this.paymentButton=paymentButton,this.cardFormShown=!1,this.component=new CreditCardFormWrapper(cardForm,paymentButton)}activate(){var _a,_b;this.cardFormShown||(this.cardFormShown=!0,null===(_a=this.component)||void 0===_a||_a.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===(_b=this.events)||void 0===_b?void 0:_b.onActivate)&&this.events.onActivate())}deactivate(){var _a;this.isActive&&(this.paymentButton.unmount(),this.cardForm.hide(),this.isActive=!1,(null===(_a=this.events)||void 0===_a?void 0:_a.onDeactivate)&&this.events.onDeactivate())}}class CreditCardFormWrapper extends PayrailsElement{constructor(cardForm,paymentButton){super("div",{id:"payrails-form-container"}),this.subElements.push(cardForm,paymentButton)}}const GPAY_BASE_REQUEST={apiVersion:2,apiVersionMinor:0};class GooglePayButton extends PayrailsElement{constructor(sdkConfig,execution,options){super("div",{id:"payrails-google-pay-button"}),this.sdkConfig=sdkConfig,this.execution=execution,this.options=options,this.client=null,this.googleButton=null,this.loadScript=null,this.paymentExecutor=new PaymentExecutor(sdkConfig,execution)}async sdkLoaded(){var _a,_b,_c,_d,_e,_f,_g,_h;this.client=new google.payments.api.PaymentsClient({environment:this.options.environment||"TEST"});try{const isReadyToPayRequest=Object.assign({},GPAY_BASE_REQUEST);if(isReadyToPayRequest.allowedPaymentMethods=this.execution.googlePayConfig,!this.client)throw new Error("Google pay client can not be initialized");const{result:result}=await this.client.isReadyToPay(isReadyToPayRequest);if(!result)return;const buttonColor=(null===(_b=null===(_a=this.options)||void 0===_a?void 0:_a.styles)||void 0===_b?void 0:_b.buttonColor)||"black",buttonType=(null===(_d=null===(_c=this.options)||void 0===_c?void 0:_c.styles)||void 0===_d?void 0:_d.buttonType)||"long",buttonSizeMode=(null===(_f=null===(_e=this.options)||void 0===_e?void 0:_e.styles)||void 0===_f?void 0:_f.buttonSizeMode)||"fill",buttonLocale=(null===(_h=null===(_g=this.options)||void 0===_g?void 0:_g.styles)||void 0===_h?void 0:_h.buttonLocale)||void 0;this.googleButton=this.client.createButton({buttonColor:buttonColor,buttonType:buttonType,buttonSizeMode:buttonSizeMode,buttonLocale:buttonLocale,onClick:async()=>{var _a,_b,_c;if(null===(_b=null===(_a=this.options)||void 0===_a?void 0:_a.events)||void 0===_b?void 0:_b.onPaymentButtonClicked){if(!await(null===(_c=this.options)||void 0===_c?void 0:_c.events.onPaymentButtonClicked()))return}this.onPaymentButtonClicked()},allowedPaymentMethods:this.execution.googlePayConfig}),this.element.appendChild(this.googleButton)}catch(e){throw console.error("Google pay can not be initialized",e),new Error(e.message)}}async onLoadPaymentData(data){var _a,_b,_c,_d;const paymentComposition=[{paymentMethodCode:"googlePay",integrationType:"api",paymentInstrumentData:{paymentToken:data.paymentMethodData.tokenizationData.token},amount:this.sdkConfig.amount}],result=await this.paymentExecutor.pay(paymentComposition);(null===(_b=null===(_a=this.options)||void 0===_a?void 0:_a.events)||void 0===_b?void 0:_b.onAuthorizeSuccess)&&(null===(_d=null===(_c=this.options)||void 0===_c?void 0:_c.events)||void 0===_d||_d.onAuthorizeSuccess(result))}async onPaymentButtonClicked(){var _a,_b,_c,_d,_e;const paymentDataRequest=Object.assign({},GPAY_BASE_REQUEST);if(paymentDataRequest.allowedPaymentMethods=this.execution.googlePayConfig,paymentDataRequest.transactionInfo={totalPriceStatus:"FINAL",totalPrice:null===(_a=this.sdkConfig.amount)||void 0===_a?void 0:_a.value,currencyCode:null===(_b=this.sdkConfig.amount)||void 0===_b?void 0:_b.currency,countryCode:null===(_e=null===(_d=null===(_c=this.execution.meta)||void 0===_c?void 0:_c.customer)||void 0===_d?void 0:_d.country)||void 0===_e?void 0:_e.code},!this.client)throw new Error("Google pay client is not initialized");this.client.loadPaymentData(paymentDataRequest).then((paymentData=>{this.onLoadPaymentData(paymentData)})).catch((err=>{var _a,_b,_c;(null===(_b=null===(_a=this.options)||void 0===_a?void 0:_a.events)||void 0===_b?void 0:_b.onAuthorizeFailed)&&(null===(_c=this.options)||void 0===_c||_c.events.onAuthorizeFailed(err))}))}mount(location){super.mount(location),this.loadScript?this.googleButton&&this.element.appendChild(this.googleButton):(this.loadScript=new LoadScript(this.sdkLoaded.bind(this)),this.loadScript.mount("body"))}unmount(){var _a;this.googleButton&&(null===(_a=this.googleButton.parentElement)||void 0===_a||_a.removeChild(this.googleButton)),super.unmount()}}class LoadScript extends PayrailsElement{constructor(onIsLoaded){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,onIsLoaded())})}}class GooglePayDropin extends DropinElement{constructor(sdkConfig,workflowExecution,options){var _a;super("google-pay-dropin",(null===(_a=options.translations)||void 0===_a?void 0:_a.label)||"Google Pay"),this.component=new GooglePayButton(sdkConfig,workflowExecution,options)}}class SavedCard extends DropinElement{constructor(cardData,paymentButton,onActivate){super(`card-${cardData.id}`,`****${cardData.data.suffix}`,{onActivate:()=>{onActivate(cardData),this.component.setDisabled(!1)}}),this.component=paymentButton}}class Dropin extends PayrailsElement{constructor(collectContainer,dropinConfig,execution,sdkConfig){var _a,_b;super("fieldset",{id:"payrails-dropin-component"}),this.collectContainer=collectContainer,this.dropinConfig=dropinConfig,this.execution=execution,this.sdkConfig=sdkConfig;const savedCardsDisabled=!1===(null===(_b=null===(_a=this.dropinConfig.paymentMethodsConfiguration)||void 0===_a?void 0:_a.cards)||void 0===_b?void 0:_b.showExistingCards),availablePayments=new Map;this.execution.availablePaymentMethods.forEach((({paymentMethodCode:paymentMethodCode})=>{if(paymentMethodCode===PAYMENT_METHOD_CODES.CARD)savedCardsDisabled||this.execution.savedCreditCards.forEach((cardData=>{var _a;this.cardPaymentButton=this.createCardPaymentButton(null===(_a=this.dropinConfig.translations)||void 0===_a?void 0:_a.cardPaymentButton);const savedCard=new SavedCard(cardData,this.cardPaymentButton,(cardData=>{this.cardPaymentButton&&(this.cardPaymentButton.selectedCard=cardData)}));availablePayments.set(savedCard.identifier,savedCard)}))})),this.execution.availablePaymentMethods.forEach((({paymentMethodCode:paymentMethodCode})=>{var _a,_b;switch(paymentMethodCode){case PAYMENT_METHOD_CODES.CARD:this.creditCard=new CreditCardDropin(this.createCardForm(),this.createCardPaymentButton(null===(_a=this.dropinConfig.translations)||void 0===_a?void 0:_a.cardPaymentButton)),availablePayments.set(this.creditCard.identifier,this.creditCard);break;case PAYMENT_METHOD_CODES.GOOGLE_PAY:this.googlePay=new GooglePayDropin(this.sdkConfig,this.execution,{events:{onAuthorizeSuccess:result=>{var _a;if(result)if("authorizeSuccessful"===(null===(_a=null==result?void 0:result.finalState)||void 0===_a?void 0:_a.code))this.onAuthorizeSuccess();else this.onAuthorizeFailed()},onAuthorizeFailed:this.onAuthorizeFailed.bind(this),onPaymentButtonClicked:this.dropinConfig.events.onPaymentButtonClicked},styles:null===(_b=this.dropinConfig.styles)||void 0===_b?void 0:_b.googlePayButton}),availablePayments.set(this.googlePay.identifier,this.googlePay)}})),this.element.addEventListener("change",(e=>{var _a,_b;const elementKey=(null===(_a=null==e?void 0:e.target)||void 0===_a?void 0:_a.value)||"";availablePayments.forEach((val=>{val.deactivate()})),null===(_b=availablePayments.get(elementKey))||void 0===_b||_b.activate()})),this.subElements.push(...Array.from(availablePayments.values()))}createCardForm(){var _a,_b;if(!this.cardForm){const cardConfig=null===(_a=this.dropinConfig.paymentMethodsConfiguration)||void 0===_a?void 0:_a.cards,showStoreInstrumentCheckbox=Boolean(null==cardConfig?void 0:cardConfig.showStoreInstrumentCheckbox),showCardHolderName=Boolean(null==cardConfig?void 0:cardConfig.showCardHolderName),alwaysStoreInstrument=Boolean(null==cardConfig?void 0:cardConfig.alwaysStoreInstrument);this.cardForm=new CardForm(this.collectContainer,{showStoreInstrumentCheckbox:showStoreInstrumentCheckbox,showCardHolderName:showCardHolderName,alwaysStoreInstrument:alwaysStoreInstrument,translations:null===(_b=this.dropinConfig.translations)||void 0===_b?void 0:_b.cardForm,events:{onFocus:()=>{var _a;null===(_a=this.creditCard)||void 0===_a||_a.activate()},onChange:({isValid:isValid})=>{var _a;null===(_a=this.cardPaymentButton)||void 0===_a||_a.setDisabled(!isValid)}}})}return this.cardPaymentButton&&this.cardPaymentButton.setCardForm(this.cardForm),this.cardForm}createCardPaymentButton(translations){return this.cardPaymentButton||(this.cardPaymentButton=new CardPaymentButton(this.sdkConfig,this.execution,{translations:translations,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 _a,_b,_c,_d;this.subElements.forEach((i=>i.unmount())),new AuthSuccessMsg({translations:{label:null===(_c=null===(_b=null===(_a=this.dropinConfig)||void 0===_a?void 0:_a.translations)||void 0===_b?void 0:_b.paymentResult)||void 0===_c?void 0:_c.success}}).mount(`#${this.id}`),(null===(_d=this.dropinConfig.events)||void 0===_d?void 0:_d.onAuthorizeSuccess)&&this.dropinConfig.events.onAuthorizeSuccess()}onAuthorizeFailed(){var _a,_b,_c;new AuthFailMsg(null===(_b=null===(_a=this.dropinConfig.translations)||void 0===_a?void 0:_a.paymentResult)||void 0===_b?void 0:_b.fail).mount(`#${this.id}`),this.dropinConfig.events.onAuthorizeFailed&&(null===(_c=this.dropinConfig.events)||void 0===_c||_c.onAuthorizeFailed())}}var Skyflow$1=require("skyflow-js").default;class CollectContainer{constructor(__client,options){this.__container=__client.container(Skyflow$1.ContainerType.COMPOSABLE,options)}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(options){return this.__container.create(Object.assign(Object.assign(Object.assign({},DEFAULT_ELEMENT_CONFIG),{column:this.elementToFieldMap.get(options.type)}),options),{format:options.format})}mount(selector){const id="payrails-container-wrapper";this.element=document.createElement("span"),this.element.setAttribute("id",id);const parentEl=document.querySelector(selector);if(!parentEl)throw new Error(`Element with selector ${selector} does not exist`);parentEl.appendChild(this.element),window.setTimeout((()=>{this.__container.mount(`#${id}`)}),50)}unmount(){this.element&&this.element.remove()}async collect(){const{records:records}=await this.__container.collect(),{skyflow_id:skyflow_id,card_number:card_number,cardholder_name:cardholder_name,expiry_month:expiry_month,expiry_year:expiry_year}=records[0].fields;return{instrumentId:skyflow_id,card_number:card_number,cardholder_name:cardholder_name,expiry_month:expiry_month,expiry_year:expiry_year}}}var Skyflow=require("skyflow-js").default;class Payrails{static init(initResponse,options){const deserializedData=JSON.parse(atob(initResponse.data)),{vaultConfiguration:{vaultId:vaultId,vaultUrl:vaultUrl,token:token},execution:execution}=deserializedData,vaultClient=Skyflow.init({vaultID:vaultId,vaultURL:vaultUrl,getBearerToken:()=>Promise.resolve(token)});return new Payrails(deserializedData,vaultClient,new WorkflowExecution(execution),options)}update(execution,amount){this.execution.update(execution),this.sdkConfiguration.amount=amount}collectContainer(containerOptions){if(!containerOptions.layout)throw new Error("Layout configuration is required");return this.__container=new CollectContainer(this.vaultClient,containerOptions),this.__container}googlePayButton(options){var _a;if(!this.execution)throw new Error("SDK was not initialized with workflow execution");return new GooglePayButton(this.sdkConfiguration,this.execution,Object.assign({environment:null===(_a=this.options)||void 0===_a?void 0:_a.environment},options))}cardList(options){return this.__cardList||(this.__cardList=new CardList(this.execution,{onCardChange:selectedCard=>{this.__cardPaymentButton&&(this.__cardPaymentButton.selectedCard=selectedCard,this.__cardPaymentButton.setDisabled(!1)),null==options||options.onCardChange(selectedCard)}})),this.__cardList}cardForm(options){var _a,_b;if(!this.__cardForm){const layout=this.getContainerLayout(null==options?void 0:options.showCardHolderName);this.__container=this.collectContainer(Object.assign(Object.assign({layout:layout,errorTextStyles:{base:{display:"none"}}},null===(_a=null==options?void 0:options.styles)||void 0===_a?void 0:_a.errorTextStyles),{styles:{base:null===(_b=null==options?void 0:options.styles)||void 0===_b?void 0:_b.base}})),this.__cardForm=new CardForm(this.__container,Object.assign(Object.assign({},options),{events:Object.assign(Object.assign({},null==options?void 0:options.events),{onChange:e=>{var _a;this.__cardPaymentButton&&(this.__cardPaymentButton.selectedCard=null,this.__cardForm&&this.__cardPaymentButton.setDisabled(!this.__cardForm.isValid)),(null===(_a=null==options?void 0:options.events)||void 0===_a?void 0:_a.onChange)&&options.events.onChange(e)},onFocus:()=>{var _a;this.__cardList&&this.__cardList.reset(),this.__cardPaymentButton&&(this.__cardPaymentButton.selectedCard=null,this.__cardForm&&this.__cardPaymentButton.setDisabled(!this.__cardForm.isValid)),(null===(_a=null==options?void 0:options.events)||void 0===_a?void 0:_a.onFocus)&&options.events.onFocus()}})}))}return this.__cardPaymentButton&&this.__cardPaymentButton.setCardForm(this.__cardForm),this.__cardForm}constructor(sdkConfiguration,vaultClient,execution,options){var _a;this.sdkConfiguration=sdkConfiguration,this.vaultClient=vaultClient,this.execution=execution,this.options=options,(null===(_a=null==options?void 0:options.events)||void 0===_a?void 0:_a.onClientInitialized)&&options.events.onClientInitialized(this.execution)}dropin(options){var _a,_b;const layout=this.getContainerLayout(null===(_b=null===(_a=options.paymentMethodsConfiguration)||void 0===_a?void 0:_a.cards)||void 0===_b?void 0:_b.showCardHolderName);return this.__container=this.collectContainer({layout:layout,errorTextStyles:{base:{display:"none"}}}),new Dropin(this.__container,options,this.execution,this.sdkConfiguration)}getContainerLayout(showCardHolderName){return showCardHolderName?[1,1,3]:[1,3]}paymentButton(options){return this.__cardPaymentButton||(this.__cardPaymentButton=new CardPaymentButton(this.sdkConfiguration,this.execution,options)),this.__cardPaymentButton.setDisabled(!0),this.__cardForm&&this.__cardPaymentButton.setCardForm(this.__cardForm),this.__cardPaymentButton}}exports.Payrails=Payrails;

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@payrails/web-sdk",
+  "version": "1.1.6",
+  "description": "SDK providing tokenization options on the client for merchants",
+  "main": "index.js",
+  "types": "payrails.d.ts",
+  "type": "commonjs",
+  "scripts": {},
+  "author": "Petr Prchal <petr@payrails.com>",
+  "license": "ISC",
+  "dependencies": {
+    "skyflow-js": "1.25.0"
+  }
+}

package/payrails-styles.css

@@ -0,0 +1,349 @@
+#payrails-card-form {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#payrails-store-card label {
+  font-size: 14px;
+  margin-left: 4px;
+  display: flex;
+  margin-bottom: 4px;
+}
+
+#payrails-store-card-checkbox {
+  margin-right: 4px;
+}
+
+#payrails-card-list * {
+  line-height: 1;
+}
+
+#payrails-card-list {
+  width: 100%;
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.payrails-card-list-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 16px;
+  gap: 16px;
+
+  width: 100%;
+
+  background: #ffffff;
+
+  border: 1px solid #eaebec;
+  border-radius: 8px;
+}
+
+.payrails-card-list-item input[type='radio'] {
+  width: auto;
+  margin-right: 8px;
+}
+
+.payrails-saved-cards-header {
+  font-weight: bolder;
+}
+
+#payrails-card-payment-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 16px;
+  gap: 8px;
+
+  width: 100%;
+  height: 40px;
+
+  background: #015bbb;
+  border-radius: 4px;
+  box-shadow: none;
+
+  font-size: 14px;
+  color: #fff;
+  margin: 0;
+}
+
+#payrails-card-payment-button:disabled {
+  background-color: #fff;
+  border: 1px solid #eae8ee;
+  color: #eae8ee;
+  cursor: not-allowed;
+}
+
+/* The Modal (background) */
+#payrails-3ds-popup-background {
+  position: fixed;
+  z-index: 10000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-content: center;
+}
+
+/* Modal Content/Box */
+#payrails-3ds-challenge {
+  background-color: #fefefe;
+  margin: 15% auto;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid #888;
+  border-radius: 4px;
+}
+
+#payrails-3ds-frame {
+  border: 0;
+}
+
+#payrails-card-payment-button .dot-flashing {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #015bbb;
+  color: #015bbb;
+  animation: dot-flashing 1s infinite linear alternate;
+  animation-delay: 0.5s;
+}
+#payrails-card-payment-button .dot-flashing::before,
+#payrails-card-payment-button .dot-flashing::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+}
+#payrails-card-payment-button .dot-flashing::before {
+  left: -15px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #015bbb;
+  color: #015bbb;
+  animation: dot-flashing 1s infinite alternate;
+  animation-delay: 0s;
+}
+#payrails-card-payment-button .dot-flashing::after {
+  left: 15px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #015bbb;
+  color: #015bbb;
+  animation: dot-flashing 1s infinite alternate;
+  animation-delay: 1s;
+}
+
+@keyframes dot-flashing {
+  0% {
+    background-color: #015bbb;
+  }
+  50%,
+  100% {
+    background-color: rgba(152, 128, 255, 0.2);
+  }
+}
+
+#payrails-dropin-component {
+  background: #ffffff;
+  box-shadow: 0px 0px 1px rgba(66, 71, 76, 0.32),
+    0px 4px 8px rgba(66, 71, 76, 0.06), 0px 8px 48px #eeeeee;
+  border-radius: 16px;
+  border: 1px solid #eae8ee;
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 24px;
+  gap: 24px;
+  position: relative;
+}
+
+.payrails-dropin-item input[type='radio'] {
+  width: auto;
+  margin-right: 8px;
+}
+
+.payrails-dropin-item {
+  border: 1px solid #eae8ee;
+  border-radius: 4px;
+  padding: 16px;
+  width: 100%;
+}
+
+#payrails-dropin-component * {
+  min-width: none !important;
+}
+
+#payrails-dropin-component .gpay-button {
+  background-color: #000;
+}
+
+#payrails-dropin-component label {
+  line-height: 1;
+  min-width: 100px;
+}
+
+#payrails-credit-card-wrapper button {
+  margin-top: 8px;
+}
+
+#payrails-authorization-success {
+  width: 100%;
+  text-align: center;
+}
+
+#authorization-failed-message {
+  text-align: center;
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  top: 8px;
+  bottom: 8px;
+  margin: auto;
+  border-radius: 16px;
+  border: 1px solid #eae8ee;
+  background-color: #fff;
+  opacity: 0.95;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+#authorization-failed-message .checkmark-cross {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  display: block;
+  stroke-width: 2;
+  stroke: #fff;
+  stroke-miterlimit: 10;
+  box-shadow: inset 0px 0px 0px #ff5a66;
+  animation: strokeFill 0.4s ease-in-out 0.4s forwards,
+    strokeScale 0.3s ease-in-out 0.9s both;
+}
+
+#authorization-failed-message .checkmark-cross_circle {
+  stroke-dasharray: 166;
+  stroke-dashoffset: 166;
+  stroke-width: 2;
+  stroke-miterlimit: 10;
+  stroke: #ff5a66;
+  fill: none;
+  animation: strokeStroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+}
+
+#authorization-failed-message .checkmark-cross_check {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  animation: strokeCross 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+}
+
+@keyframes strokeCross {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes strokeScale {
+  0%,
+  100% {
+    transform: none;
+  }
+  50% {
+    transform: scale3d(1.1, 1.1, 1);
+  }
+}
+@keyframes strokeFill {
+  100% {
+    box-shadow: inset 0px 0px 0px 30px #ff5a66;
+  }
+}
+
+#payrails-authorization-success-msg {
+  width: 100%;
+}
+
+#payrails-authorization-success-msg .checkmark-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 75px;
+}
+#payrails-authorization-success-msg .checkmark__circle {
+  stroke-dasharray: 166;
+  stroke-dashoffset: 166;
+  stroke-width: 2;
+  stroke-miterlimit: 10;
+  stroke: #7ac142;
+  fill: none;
+  animation: strokeCheck 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+}
+#payrails-authorization-success-msg .checkmark {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  display: block;
+  stroke-width: 2;
+  stroke: #fff;
+  stroke-miterlimit: 10;
+  margin: 10% auto;
+  box-shadow: inset 0px 0px 0px #7ac142;
+  animation: fillCheck 0.4s ease-in-out 0.4s forwards,
+    scaleCheck 0.3s ease-in-out 0.9s both;
+}
+#payrails-authorization-success-msg .checkmark__check {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  animation: strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+}
+
+@keyframes strokeCheck {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes scaleCheck {
+  0%,
+  100% {
+    transform: none;
+  }
+  50% {
+    transform: scale3d(1.1, 1.1, 1);
+  }
+}
+@keyframes fillCheck {
+  100% {
+    box-shadow: inset 0px 0px 0px 30px #7ac142;
+  }
+}
+
+#payrails-container-wrapper {
+  width: 100%;
+  height: 90px;
+}
+
+.with-card-holder #payrails-container-wrapper {
+  width: 100%;
+  height: 120px;
+}

package/payrails.d.ts

@@ -0,0 +1,434 @@
+/// <reference types="googlepay" />
+import * as skyflow_js_types_core_external_collect_compose_collect_element from 'skyflow-js/types/core/external/collect/compose-collect-element';
+import Skyflow from 'skyflow-js';
+
+declare enum ElementType {
+    CARD_NUMBER = "CARD_NUMBER",
+    CARDHOLDER_NAME = "CARDHOLDER_NAME",
+    CVV = "CVV",
+    EXPIRATION_MONTH = "EXPIRATION_MONTH",
+    EXPIRATION_YEAR = "EXPIRATION_YEAR"
+}
+
+interface Mountable {
+    mount(selector: string | PayrailsElement): void;
+    unmount(): void;
+}
+interface ElementOptions {
+    id?: string;
+    className?: string;
+    styles?: Partial<CSSStyleDeclaration>;
+}
+declare class PayrailsElement implements Mountable {
+    protected element: HTMLElement;
+    protected subElements: Array<Mountable>;
+    readonly id: string | undefined;
+    constructor(elementType: string, { id, className }?: ElementOptions);
+    get parentElement(): HTMLElement | null;
+    mount(location: string): void;
+    unmount(): void;
+}
+
+interface CollectElementOptions {
+    type: ElementType;
+    label?: string;
+    placeholder?: string;
+    altText?: string;
+    format?: string;
+    inputStyles?: object;
+    labelStyles?: object;
+    errorTextStyles?: object;
+}
+interface CollectContainerOptions {
+    layout: number[];
+    styles?: {
+        base?: Partial<CSSStyleDeclaration>;
+    };
+    errorTextStyles?: {
+        base?: Partial<CSSStyleDeclaration>;
+    };
+}
+declare class CollectContainer implements Mountable {
+    private readonly __container;
+    private element;
+    constructor(__client: Skyflow, options: CollectContainerOptions);
+    private get elementToFieldMap();
+    createCollectElement(options: CollectElementOptions): skyflow_js_types_core_external_collect_compose_collect_element.default;
+    mount(selector: string): void;
+    unmount(): void;
+    collect(): Promise<{
+        instrumentId: string;
+        card_number: string | undefined;
+        cardholder_name: string | undefined;
+        expiry_month: string | undefined;
+        expiry_year: string | undefined;
+    }>;
+}
+
+interface OnChange {
+    isValid: boolean;
+}
+interface CardFormOptions {
+    showCardHolderName?: boolean;
+    showStoreInstrumentCheckbox?: boolean;
+    alwaysStoreInstrument?: boolean;
+    translations?: {
+        placeholders?: {
+            [key in ElementType]?: string;
+        };
+        labels?: {
+            saveCreditCard: string;
+        };
+    };
+    events?: {
+        onFocus?: () => void;
+        onChange?: (e: OnChange) => void;
+    };
+    styles?: {
+        base?: Partial<CSSStyleDeclaration>;
+        storeCardCheckbox?: Partial<CSSStyleDeclaration>;
+        errorTextStyles?: {
+            base: Partial<CSSStyleDeclaration>;
+        };
+        inputFields?: {
+            [key in ElementType | 'all']?: CardFieldStyles;
+        };
+    };
+}
+declare class CardForm extends PayrailsElement {
+    private readonly collectContainer;
+    private readonly options?;
+    private readonly storeCardCheckbox;
+    private readonly formFields;
+    constructor(collectContainer: CollectContainer, options?: CardFormOptions | undefined);
+    show(): void;
+    hide(): void;
+    private prepareStyles;
+    get isValid(): boolean;
+    onChange(): void;
+    collectValues(): Promise<{
+        tokenizedCardData: {
+            instrumentId: string;
+            card_number: string | undefined;
+            cardholder_name: string | undefined;
+            expiry_month: string | undefined;
+            expiry_year: string | undefined;
+        };
+        storeInstrument: boolean | undefined;
+    }>;
+}
+interface CardFieldStyles {
+    base?: Partial<CSSStyleDeclaration>;
+    complete?: Partial<CSSStyleDeclaration>;
+    empty?: Partial<CSSStyleDeclaration>;
+    focus?: Partial<CSSStyleDeclaration>;
+    invalid?: Partial<CSSStyleDeclaration>;
+    cardIcon?: Partial<CSSStyleDeclaration>;
+    copyIcon?: Partial<CSSStyleDeclaration>;
+}
+
+declare enum PAYMENT_METHOD_CODES {
+    'CARD' = "card",
+    'GOOGLE_PAY' = "googlePay"
+}
+declare enum PAYMENT_INSTRUMENT_STATUS {
+    'ENABLED' = "enabled",
+    'CREATED' = "created"
+}
+declare class WorkflowExecution {
+    private executionResponse;
+    constructor(executionResponse: ExecutionResponse);
+    get lookup(): {
+        httpCode: number;
+        body: {
+            data: {
+                paymentCompositionOptions: (GooglePayCompositionOption | CardCompositionOption)[];
+            };
+            links: {
+                authorize: {
+                    href: string;
+                    method: "POST";
+                };
+                execution: string;
+            };
+            name: "lookup";
+        };
+    } | undefined;
+    get holderReference(): string;
+    get savedCreditCards(): SavedCreditCard[];
+    get googlePayConfig(): {
+        parameters: {
+            allowedAuthMethods: string[];
+            allowedCardNetworks: string[];
+        };
+        tokenizationSpecification: {
+            parameters: {
+                gateway: string;
+                gatewayMerchantId: string;
+            };
+            type: string;
+        };
+        type: string;
+    }[];
+    get url(): string;
+    get response(): ExecutionResponse;
+    get meta(): {
+        customer?: {
+            country?: {
+                code: string;
+            } | undefined;
+        } | undefined;
+    };
+    get availablePaymentMethods(): (GooglePayCompositionOption | CardCompositionOption)[];
+    get authorizeLink(): string | undefined;
+    update(response: ExecutionResponse): void;
+}
+interface ExecutionResponse {
+    id: string;
+    merchantReference: string;
+    holderReference: string;
+    actionRequired?: string;
+    meta: {
+        customer?: {
+            country?: {
+                code: string;
+            };
+        };
+    };
+    status: Array<{
+        code: string;
+        time: string;
+    }>;
+    initialResults: Array<{
+        httpCode: number;
+        body: {
+            data: {
+                paymentCompositionOptions: Array<GooglePayCompositionOption | CardCompositionOption>;
+            };
+            links: {
+                authorize: {
+                    href: string;
+                    method: 'POST';
+                };
+                execution: string;
+            };
+            name: 'lookup';
+        };
+    }>;
+    links: {
+        '3ds'?: string;
+        self: string;
+    };
+}
+interface PaymentCompositionOption {
+    paymentMethodCode?: PAYMENT_METHOD_CODES;
+    description: string;
+    integrationType: string;
+}
+interface CardCompositionOption extends PaymentCompositionOption {
+    paymentInstruments?: Array<SavedCreditCard>;
+}
+interface GooglePayCompositionOption extends PaymentCompositionOption {
+    config: {
+        parameters: {
+            allowedAuthMethods: string[];
+            allowedCardNetworks: string[];
+        };
+        tokenizationSpecification: {
+            parameters: {
+                gateway: string;
+                gatewayMerchantId: string;
+            };
+            type: string;
+        };
+        type: string;
+    };
+}
+interface SavedCreditCard {
+    id: string;
+    status: PAYMENT_INSTRUMENT_STATUS;
+    data: {
+        bin: string;
+        suffix: string;
+    };
+}
+
+interface CardListOptions {
+    onCardChange: (selectedCard: SavedCreditCard) => void;
+}
+declare class CardList extends PayrailsElement {
+    private readonly workflowExecution;
+    private listItems;
+    constructor(workflowExecution: WorkflowExecution, options?: CardListOptions);
+    reset(): void;
+}
+
+interface CardPaymentButtonOptions {
+    events?: PaymentEvents;
+    translations?: {
+        label: string;
+    };
+    styles?: {
+        base?: Partial<CSSStyleDeclaration>;
+        disabled?: Partial<CSSStyleDeclaration>;
+        loading?: Partial<CSSStyleDeclaration>;
+        hover?: Partial<CSSStyleDeclaration>;
+    };
+}
+declare class CardPaymentButton extends PayrailsElement {
+    private readonly sdkConfig;
+    private readonly execution;
+    private readonly options;
+    selectedCard: SavedCreditCard | null;
+    private paymentExecutor;
+    private storeInstrument;
+    private cardForm;
+    constructor(sdkConfig: SdkConfiguration, execution: WorkflowExecution, options: CardPaymentButtonOptions);
+    setDisabled(isDisabled: boolean): void;
+    private setStyles;
+    private removeStyles;
+    setLabel(label: string): void;
+    setCardForm(cardForm: CardForm): void;
+    triggerLoading(isLoading: boolean): void;
+    private onAuthorizationFailed;
+    private onPay;
+    private handleAuthorizationResult;
+    private handle3ds;
+    private tokenizeCard;
+}
+
+interface GooglePayButtonOptions {
+    environment?: 'TEST' | 'PRODUCTION';
+    events?: PaymentEvents;
+    styles?: {
+        buttonColor?: google.payments.api.ButtonColor;
+        buttonType?: google.payments.api.ButtonType;
+        buttonSizeMode?: google.payments.api.ButtonSizeMode;
+        buttonLocale?: string;
+    };
+}
+declare class GooglePayButton extends PayrailsElement {
+    private sdkConfig;
+    private execution;
+    private options;
+    private client;
+    private googleButton;
+    private paymentExecutor;
+    private loadScript;
+    constructor(sdkConfig: SdkConfiguration, execution: WorkflowExecution, options: GooglePayButtonOptions);
+    private sdkLoaded;
+    private onLoadPaymentData;
+    private onPaymentButtonClicked;
+    mount(location: string): void;
+    unmount(): void;
+}
+
+interface GooglePayDropinOptions extends GooglePayButtonOptions {
+    translations?: {
+        label?: string;
+    };
+}
+
+declare class Dropin extends PayrailsElement {
+    private collectContainer;
+    private readonly dropinConfig;
+    private readonly execution;
+    private readonly sdkConfig;
+    private cardPaymentButton;
+    private creditCard;
+    private googlePay;
+    private cardForm;
+    constructor(collectContainer: CollectContainer, dropinConfig: DropinConfiguration, execution: WorkflowExecution, sdkConfig: SdkConfiguration);
+    private createCardForm;
+    private createCardPaymentButton;
+    private onAuthorizeSuccess;
+    private onAuthorizeFailed;
+}
+interface DropinConfiguration {
+    paymentMethodsConfiguration?: {
+        cards?: {
+            showCardHolderName?: boolean;
+            showStoreInstrumentCheckbox?: boolean;
+            showStoredInstruments?: boolean;
+            showExistingCards?: boolean;
+            alwaysStoreInstrument?: boolean;
+        };
+    };
+    returnInfo?: {
+        success: string;
+        error: string;
+    };
+    events: PaymentEvents;
+    translations?: {
+        googlePayButton?: GooglePayDropinOptions['translations'];
+        cardPaymentButton?: CardPaymentButtonOptions['translations'];
+        cardForm?: CardFormOptions['translations'];
+        paymentResult?: {
+            success?: string;
+            fail?: string;
+        };
+    };
+    styles?: {
+        googlePayButton?: GooglePayButtonOptions['styles'];
+    };
+}
+
+interface PayrailsClientOptions {
+    environment?: 'TEST' | 'PRODUCTION';
+    events?: {
+        onClientInitialized: (execution: WorkflowExecution) => void;
+    };
+}
+declare class Payrails {
+    private sdkConfiguration;
+    private vaultClient;
+    private execution;
+    private options?;
+    private __container;
+    private __cardForm;
+    private __cardList;
+    private __cardPaymentButton;
+    static init(initResponse: InitOptions, options?: PayrailsClientOptions): Payrails;
+    update(execution: ExecutionResponse, amount: PayrailsAmount): void;
+    collectContainer(containerOptions: CollectContainerOptions): CollectContainer;
+    googlePayButton(options: GooglePayButtonOptions): GooglePayButton;
+    cardList(options?: CardListOptions): CardList;
+    cardForm(options?: CardFormOptions): CardForm;
+    private constructor();
+    dropin(options: DropinConfiguration): Dropin;
+    private getContainerLayout;
+    paymentButton(options: CardPaymentButtonOptions): CardPaymentButton;
+}
+interface InitOptions {
+    version: string;
+    data: string;
+}
+interface PaymentEvents {
+    onAuthorizeSuccess?: (e?: any) => void;
+    onAuthorizeFailed?: (e?: any) => void;
+    onPaymentButtonClicked?: () => Promise<boolean>;
+    onPaymentSessionExpired?: () => void;
+}
+interface SdkConfiguration {
+    token: string;
+    amount?: PayrailsAmount;
+    vaultConfiguration: {
+        token: string;
+        vaultId: string;
+        vaultUrl: string;
+        providerId: string;
+        providerConfigId: string;
+        links: {
+            saveInstrument: {
+                href: string;
+            };
+        };
+    };
+    execution: ExecutionResponse;
+}
+interface PayrailsAmount {
+    value: string;
+    currency: string;
+}
+
+export { ElementType, Payrails };