@flopay/react 1.9.19 → 1.9.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flopay/react",
-  "version": "1.9.19",
+  "version": "1.9.21",
   "type": "module",
   "sideEffects": false,
   "publishConfig": {
@@ -34,8 +34,8 @@
     "@paypal/paypal-js": "^10.0.0",
     "@stripe/react-stripe-js": "^6.6.0",
     "@stripe/stripe-js": "^9.8.0",
-    "@flopay/js": "1.9.19",
-    "@flopay/shared": "1.9.19"
+    "@flopay/js": "1.9.21",
+    "@flopay/shared": "1.9.21"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/dist/chunk-Z6LBB432.mjs

@@ -1,6 +0,0 @@
-import{useEffect as J,useRef as F}from"react";function se(e,r){if(!e)return r;let t=r??{},n=Object.keys(t),o=n.some(i=>i.startsWith("background")),a={};for(let[i,u]of Object.entries(e))i in t||o&&i.startsWith("background")||(a[i]=u);for(let i of n)a[i]=t[i];return a}var ve=new Set(["animationIterationCount","aspectRatio","borderImageOutset","borderImageSlice","borderImageWidth","boxFlex","boxFlexGroup","boxOrdinalGroup","columnCount","columns","flex","flexGrow","flexPositive","flexShrink","flexNegative","flexOrder","gridArea","gridRow","gridRowEnd","gridRowSpan","gridRowStart","gridColumn","gridColumnEnd","gridColumnSpan","gridColumnStart","fontWeight","lineClamp","lineHeight","opacity","order","orphans","scale","tabSize","widows","zIndex","zoom","fillOpacity","floodOpacity","stopOpacity","strokeDasharray","strokeDashoffset","strokeMiterlimit","strokeOpacity","strokeWidth"]);function Fe(e){let r=e.replace(/^(Webkit|Moz|ms)(?=[A-Z])/,"");return ve.has(r.charAt(0).toLowerCase()+r.slice(1))}function Ee(e,r){return typeof r=="number"&&r!==0&&!Fe(e)?`${r}px`:String(r).trim()}function ue(e,r){if(e.style.cssText="",!!r){for(let[t,n]of Object.entries(r))if(!(n==null||n==="")){if(t.startsWith("--")){e.style.setProperty(t,String(n));continue}e.style[t]=Ee(t,n)}}}import{useEffect as Te,useLayoutEffect as Pe}from"react";var le=typeof window>"u"?Te:Pe;import{jsx as Ve}from"react/jsx-runtime";var Q=new WeakSet;function ce({capture:e,html:r,messageToken:t,expectedOrigin:n,theme:o,submitLabel:a,containerStyle:i,onReady:u,onError:s,onValidation:c}){let l=F(null),f=F(u),y=F(s),p=F(c);f.current=u,y.current=s,p.current=c;let T=F(o);T.current=o;let w=F(null),S=a??void 0,P=F(S);P.current=S;let L=F(void 0);return J(()=>{let R=l.current;if(!R)return;let b=!0,$=!1,B=()=>{!b||$||($=!0,f.current?.())},x=e.on("ready",()=>{B()}),M=e.on("error",k=>{y.current?.(k.message??"There was a problem loading the secure card form.")}),h=e.on("validation",k=>{p.current?.(k.message??null)}),G=P.current??(Q.has(e)?null:void 0),X={html:r,...t?{messageToken:t}:{},...n?{expectedOrigin:n}:{},...T.current?{theme:T.current}:{},...G===void 0?{}:{submitLabel:G}};return w.current=T.current??null,L.current=P.current,P.current!==void 0&&Q.add(e),e.mount(R,X).then(()=>{B()}).catch(k=>{b&&y.current?.(k instanceof Error?k.message:"Failed to load the secure card form.")}),()=>{b=!1,x(),M(),h(),e.unmount()}},[e,r,t,n]),le(()=>{let R=l.current;R&&ue(R,i)},[i]),J(()=>{o!==void 0&&(o===null&&w.current===null||(w.current=o,e.applyTheme?.(o)))},[e,o]),J(()=>{S!==L.current&&(L.current=S,S!==void 0&&Q.add(e),e.setSubmitLabel?.(S??null))},[e,S]),Ve("div",{ref:l,"data-testid":"flopay-vault-card-fields"})}import{PaymentAPI as Ke,PciVaultCardCapture as Ze}from"@flopay/js/card-setup";import{FloPayError as I,isCardSetupCheckoutSession as Je,resolveBillingApiUrl as Qe,resolveTheme as er}from"@flopay/shared";import{useEffect as ee,useMemo as Y,useRef as C,useState as W}from"react";var de={light:{success:"#166534",error:"#991B1B"},dark:{success:"#4ADE80",error:"#FCA5A5"}};function fe(e){let r=e.appearance.variables??{},t=e.buttonsLayout.cardFormContainer??{},n=e.appearance.theme==="night",o=n?de.dark:de.light,a=r.colorText??(n?"#F1F5F9":"#262833"),i=e.appearance.rules?.[".Label"];return{panel:{...t.background===void 0?{}:{background:t.background},...t.backgroundColor===void 0?{}:{backgroundColor:t.backgroundColor},...t.border===void 0?{}:{border:t.border},...t.borderRadius===void 0?{}:{borderRadius:t.borderRadius},...t.boxShadow===void 0?{}:{boxShadow:t.boxShadow},color:a,...r.fontFamily?{fontFamily:r.fontFamily}:{}},spinnerTrackColor:e.buttonsLayout.cardInputBorder??(n?"#374151":"#e5e7eb"),spinnerAccentColor:r.colorPrimary??"#4A49FF",labelColors:{processing:a,success:o.success,error:o.error},noteColor:i?.color??a}}function E(e){if(!e)return;let r=t=>{console.error("[FloPay] Merchant callback failed; checkout continued.",t)};try{Promise.resolve(e()).catch(r)}catch(t){r(t)}}import{jsx as g,jsxs as O}from"react/jsx-runtime";var Ae={panel:{background:"white"},spinnerTrackColor:"#e5e7eb",spinnerAccentColor:"#4A49FF",labelColors:{processing:"#374151",success:"#16a34a",error:"#dc2626"},noteColor:"#6b7280"};function pe({status:e,errorMessage:r,authorized:t=!1,processingLabel:n="PROCESSING...",successLabel:o,errorLabel:a="PAYMENT FAILED",successNote:i="You will be automatically redirected, do not close or navigate away from this window.",theme:u=Ae}){let s={fontSize:13,color:u.noteColor,fontWeight:400,maxWidth:260,lineHeight:1.4,margin:0};return g("div",{"data-testid":"flopay-processing-overlay","data-status":e,role:"dialog","aria-modal":"true",style:{position:"fixed",inset:0,background:"rgba(0,0,0,0.35)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3,backdropFilter:"blur(2px)"},children:O("div",{"data-testid":"flopay-processing-overlay-panel",style:{borderRadius:12,boxShadow:"0 8px 32px rgba(0,0,0,0.18)",...u.panel,padding:"2rem 2.5rem",textAlign:"center",minWidth:240,display:"flex",flexDirection:"column",alignItems:"center",gap:16},children:[O("div",{style:{width:48,height:48,position:"relative"},children:[e==="processing"&&O("svg",{"aria-hidden":"true",width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{animation:"flopay-spin 0.8s linear infinite"},children:[g("circle",{cx:"12",cy:"12",r:"10",stroke:u.spinnerTrackColor,strokeWidth:"3"}),g("path",{d:"M4 12a8 8 0 018-8v3a5 5 0 00-5 5H4z",fill:u.spinnerAccentColor})]}),e==="success"&&g("div",{style:{animation:"flopay-pop 0.4s cubic-bezier(0.34,1.56,0.64,1)"},children:O("svg",{"aria-hidden":"true",width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[g("circle",{cx:"12",cy:"12",r:"11",fill:"#22c55e"}),g("path",{d:"M7 12.5l3 3 7-7",stroke:"white",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",style:{strokeDasharray:20,strokeDashoffset:20,animation:"flopay-draw 0.4s 0.15s ease forwards"}})]})}),e==="error"&&g("div",{style:{animation:"flopay-shake 0.4s ease"},children:O("svg",{"aria-hidden":"true",width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[g("circle",{cx:"12",cy:"12",r:"11",fill:"#ef4444"}),g("path",{d:"M8 8l8 8M16 8l-8 8",stroke:"white",strokeWidth:"2.5",strokeLinecap:"round",style:{strokeDasharray:12,strokeDashoffset:12,animation:"flopay-draw 0.3s 0.1s ease forwards"}})]})})]}),O("span",{style:{fontSize:14,fontWeight:600,letterSpacing:"0.05em",color:u.labelColors[e]},children:[e==="processing"&&n,e==="success"&&(o??(t?"PAYMENT AUTHORISED":"PAYMENT SUCCESSFUL")),e==="error"&&a]}),e==="success"&&i!==null&&g("p",{style:s,children:i}),e==="error"&&r&&g("p",{style:s,children:r}),g("style",{children:`
-          @keyframes flopay-spin { to { transform: rotate(360deg); } }
-          @keyframes flopay-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
-          @keyframes flopay-draw { to { stroke-dashoffset: 0; } }
-          @keyframes flopay-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }
-        `})]})})}var ge=/^#([0-9a-f]{6})$/i,Le=/^#([0-9a-f]{3})$/i,ye=/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i,be=/^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0|1|0?\.\d+|1\.0+)\s*\)$/i,Be=/^linear-gradient\(\s*(-?\d+(?:\.\d+)?)deg\s*,\s*(.+)\)$/i,Oe=/^(-?\d+(?:\.\d+)?)(?:px)?$/,Ie=/^(-?\d+(?:\.\d+)?)em$/,Me=/^blur\(\s*(\d+(?:\.\d+)?)(?:px)?\s*\)$/i,_e=/^[a-z][a-z0-9 -]{0,31}$/i,Ne=new Set(["none","uppercase","lowercase","capitalize"]);function he(e){if(typeof e!="string")return null;let r=e.trim(),t=ge.exec(r);if(t){let l=Number.parseInt(t[1],16);return{r:l>>16&255,g:l>>8&255,b:l&255,a:null}}let n=Le.exec(r);if(n){let[l,f,y]=n[1].split("").map(p=>Number.parseInt(p+p,16));return{r:l,g:f,b:y,a:null}}let o=ye.exec(r),a=o?null:be.exec(r),i=o??a;if(!i)return null;let u=Number(i[1]),s=Number(i[2]),c=Number(i[3]);return u>255||s>255||c>255?null:{r:u,g:s,b:c,a:a?Number(a[4]):null}}function Ce({r:e,g:r,b:t,a:n}){return n===null?`#${(1<<24|e<<16|r<<8|t).toString(16).slice(1)}`:`rgba(${e},${r},${t},${n})`}function D(e){if(typeof e!="string")return;let r=e.trim();if(ge.test(r)||ye.test(r))return r;let t=be.exec(r);if(t&&/^\d/.test(t[4]))return r;let n=he(r);return n?Ce(n):void 0}function H(e,r=.12){let t=he(e);if(!t)return e;let n=Math.max(0,Math.min(1,1-r));return Ce({r:Math.round(t.r*n),g:Math.round(t.g*n),b:Math.round(t.b*n),a:t.a})}function z(e,r){let t=[],n=0,o="";for(let a of e){if(a==="("&&(n+=1),a===")"&&(n-=1),a===r&&n===0){o.trim()&&t.push(o.trim()),o="";continue}o+=a}return o.trim()&&t.push(o.trim()),t}function A(e,r,t){if(typeof e!="number"&&typeof e!="string")return;let n=Oe.exec(String(e).trim());if(!n)return;let o=Number(n[1]);return Number.isFinite(o)&&o>=r&&o<=t?o:void 0}function De(e,r,t){if(typeof e!="string")return;let n=Ie.exec(e.trim());if(!n)return;let o=Number(n[1]);return Number.isFinite(o)&&o>=r&&o<=t?o:void 0}function ze(e){let r=z(e,",");if(r.length<2||r.length>5)return;let t=[];for(let[n,o]of r.entries()){let a=z(o," "),i=D(a[0]);if(!i)return;let u=n/(r.length-1)*100,s=a[1]===void 0?u:Number(/^(\d+(?:\.\d+)?)%$/.exec(a[1])?.[1]),c=t[t.length-1]?.position??-1;if(!Number.isFinite(s)||s<0||s>100||s<c)return;t.push({color:i,position:s})}return{type:"linearGradient",angle:0,stops:t}}function We(e){if(typeof e!="string")return;let r=e.trim(),t=D(r);if(t)return{type:"solid",color:t};let n=Be.exec(r);if(!n)return;let o=Number(n[1]);if(!Number.isFinite(o)||o<0||o>360)return;let a=ze(n[2]);return a&&a.type==="linearGradient"?{...a,angle:o}:void 0}function $e(e){return e.type==="solid"?{type:"solid",color:H(e.color)}:{...e,stops:e.stops.map(r=>({...r,color:H(r.color)}))}}function Ge(e){let r=!1,t,n=[];for(let s of z(e," ")){if(s.toLowerCase()==="inset"){r=!0;continue}let c=D(s);if(c){t=c;continue}let l=A(s,-128,128);if(l===void 0)return;n.push(l)}if(!t||n.length<2||n.length>4)return;let[o,a,i=0,u=0]=n;if(!(Math.abs(o)>64||Math.abs(a)>64||i>128||Math.abs(u)>32))return{color:t,inset:r,offsetX:o,offsetY:a,blur:i,spread:u}}function He(e){if(typeof e!="string")return;let r=e.trim();if(r.toLowerCase()==="none")return[];let t=z(r,",").map(Ge);if(!(t.length===0||t.length>4))return t.every(n=>n!==void 0)?t:void 0}function me(e){if(typeof e!="string")return;let r=z(e,",").map(t=>t.replace(/^['"]|['"]$/g,"").trim()).filter(t=>_e.test(t)).slice(0,4);return r.length>0?r:void 0}function Ye(e){let r=typeof e=="string"?e.trim().split(/\s+/):[e],t=A(r[0],0,64),n=A(r[1]??r[0],0,64);if(!(t===void 0||n===void 0))return{paddingBlock:t,paddingInline:n}}function Ue(e){if(e==="bold")return 700;if(e==="normal")return 400;let r=Number(e);return Number.isInteger(r)&&r>=100&&r<=900?r:void 0}function Se({appearance:e,buttonsStyles:r,fontFamily:t}){let n=r.submitButton;if(!n)return;let o=e?.variables,a=We(n.background??n.backgroundColor),i=D(o?.colorPrimaryHover),u=i?{type:"solid",color:i}:a&&$e(a),s={fontFamilies:me(n.fontFamily)??me(t),fontSize:A(n.fontSize??r.submitButtonFontSize,10,32)??16,fontWeight:Ue(n.fontWeight)??600,letterSpacing:De(n.letterSpacing,-.1,.5)??.01,lineHeight:A(n.lineHeight,.8,2)??1,textTransform:Ne.has(String(n.textTransform))?n.textTransform:"uppercase"},c=Ye(n.padding),l=He(n.boxShadow),f=A(n.borderRadius,0,9999),y=typeof n.backdropFilter=="string"?A(Me.exec(n.backdropFilter.trim())?.[1],0,40):void 0;return{foregroundColor:D(n.color)??"#FFFFFF",...a?{background:a,disabledBackground:a}:{},...u?{hoverBackground:u}:{},typography:s,...c?{spacing:c}:{},...l?{shadow:l}:{},...f===void 0?{}:{borderRadius:f},disabledOpacity:e?.theme==="night"?.8:.6,...y===void 0?{}:{backdropBlur:y}}}function Xe(e,r=.12){let t=e.trim(),n=/^[0-9a-fA-F]{6}$/.test(t)?`#${t}`:t;return/^#[0-9a-fA-F]{6}$/.test(n)?H(n,r):e}function je(e){if(typeof e=="number"||typeof e=="string")return e}function ke({appearance:e,buttonsStyles:r,layout:t="default"}){let n=e?.variables,o=f=>typeof f=="string"&&f?f:void 0,a=r.submitButton,i=o(n?.colorPrimary)??o(a?.backgroundColor)??"#4A49FF",u=t==="buttons",s=r.nameInput,c=o(s?.fontFamily)??o(n?.fontFamily)??"Poppins, sans-serif",l=Se({appearance:e,buttonsStyles:r,fontFamily:c});return{primaryColor:i,primaryHoverColor:o(n?.colorPrimaryHover)??Xe(i,.12),inputBackgroundColor:o(r.cardInputBackground)??o(n?.colorBackground)??"#ffffff",textColor:o(r.cardInputColor)??o(s?.color)??o(n?.colorText)??"#262833",borderColor:o(r.cardInputBorder)??(u?"#e5e7eb":"#A4A4FF"),placeholderColor:o(r.cardInputPlaceholderColor)??"#9ca3af",errorColor:o(n?.colorDanger)??"#dc2626",successColor:"#16a34a",fontFamily:c,fontSize:o(r.cardInputFontSize)??o(n?.fontSizeBase)??"16px",fontWeight:String(je(s?.fontWeight)??400),borderRadius:o(n?.borderRadius)??"8px",...l?{submitButton:l}:{}}}import{Fragment as xe,jsx as U,jsxs as rr}from"react/jsx-runtime";var re=class extends I{constructor(r,t,n){super(r,t,n),this.name="FloPayCardSetupError",this.retryable=n.retryable}};function Re(e,r={}){let t=e instanceof I?e:void 0,n=t?.statusCode,o=r.retryable??(t?.type==="network_error"||t?.type==="rate_limit_error"||typeof n=="number"&&n>=500||t?.code==="vault_capture_timeout"||!t);return new re(t?.message??(e instanceof Error?e.message:"Failed to load the secure card form."),t?.type??"api_error",{code:r.code??t?.code??"card_setup_load_failed",retryable:o,...t?.param?{param:t.param}:{},...n===void 0?{}:{statusCode:n}})}function Fr({sessionId:e,nonce:r,billingApiUrl:t,telemetry:n,theme:o="modern-light",containerStyle:a,loading:i=null,onReady:u,onComplete:s,onDecline:c,onCancel:l,onValidation:f,onError:y}){let[p,T]=W(null),[w,S]=W(null),[P,L]=W(null),[R,b]=W(null),[$,B]=W(null),x=C(!1),M=C(!1),h=Y(()=>typeof o=="object"?void 0:er(o),[o]),G=Y(()=>typeof o=="object"?o:h?ke({appearance:h.appearance,buttonsStyles:h.buttonsLayout,layout:"default"}):null,[h,o]),X=Y(()=>se(h?.buttonsLayout.cardFormContainer,a),[h,a]),k=Y(()=>h?fe(h):void 0,[h]),te=C(u),j=C(y),ne=C(s),oe=C(c),ae=C(l),ie=C(f),_=C(!1),q=C(!1),K=C(0);return te.current=u,j.current=y,ne.current=s,oe.current=c,ae.current=l,ie.current=f,ee(()=>{let d=K.current+1;return K.current=d,()=>{queueMicrotask(()=>{K.current===d&&(_.current||q.current||(q.current=!0,E(()=>{ae.current?.({status:"cancelled",sessionId:e})})))})}},[e]),ee(()=>{let d=!0,V=new Ke(Qe(t),{telemetry:n});return T(null),S(null),L(null),_.current=!1,q.current=!1,(async()=>{try{if(!e.trim())throw new I("FloPayCardSetup requires a sessionId.","validation_error",{code:"MissingCheckoutSessionId",param:"sessionId"});if(!r.trim())throw new I("FloPayCardSetup requires a session nonce.","validation_error",{code:"MissingCheckoutSessionToken",param:"nonce"});let N=await V.getUnifiedCheckoutSession(e,r);if(!d)return;let v=N.data.session;if(!v||!Je(v))throw new I("FloPayCardSetup only accepts a zero-amount, productless setup session.","validation_error",{code:"InvalidCardSetupSession",param:"sessionId"});let m=v.vault;if(m?.html?.trim()||(m=await V.getVaultCapture(e,r)),!m.html?.trim())throw new I("FloPay: this setup session has no vault card capability. Upgrade the billing backend integration.","api_error",{code:"UnsupportedBackendVaultCapability"});if(!d)return;S(m),T(new Ze({sessionId:e,operation:"card_setup",telemetry:n}))}catch(N){if(!d)return;let v=Re(N);_.current=!0,L(v),E(()=>j.current?.(v))}})(),()=>{d=!1,V.destroy()}},[t,r,e,n]),ee(()=>{if(!p)return;let d=!1;M.current=!1,x.current=!1;let V=p.on("submitting",()=>{x.current=!0,B(null),b("processing")}),N=p.on("complete",m=>{_.current=!0,x.current=!1,b("success"),(async()=>(await new Promise(Z=>setTimeout(Z,600)),!M.current&&(M.current=!0,E(()=>{ne.current?.({status:"succeeded",sessionId:e,...m.paymentMethod?{paymentMethod:m.paymentMethod}:{}})}),d||b(null))))()}),v=p.on("decline",m=>{_.current=!0,x.current=!1,B(m.message??null),b("error"),E(()=>{oe.current?.({status:"declined",sessionId:e,...m.declineReason?{reason:m.declineReason}:{},...m.message?{message:m.message}:{}})}),(async()=>(await new Promise(Z=>setTimeout(Z,400)),d||b(null)))()});return()=>{d=!0,V(),N(),v()}},[p,e]),P?U("div",{role:"alert",children:P.message}):!p||!w?.html?U(xe,{children:i}):rr(xe,{children:[R&&U(pe,{status:R,errorMessage:$,processingLabel:"SAVING CARD...",successLabel:"CARD SAVED",errorLabel:"CARD NOT SAVED",successNote:null,...k?{theme:k}:{}}),U(ce,{capture:p,html:w.html,messageToken:w.messageToken,expectedOrigin:w.expectedOrigin,theme:G,containerStyle:X,onReady:()=>{E(()=>te.current?.())},onValidation:d=>{E(()=>ie.current?.(d))},onError:d=>{if(!d)return;x.current&&(x.current=!1,B(d),b("error"),setTimeout(()=>b(null),400));let V=Re(new Error(d),{code:"card_setup_widget_failed",retryable:!0});E(()=>j.current?.(V))}})]})}export{E as a,pe as b,le as c,ce as d,Xe as e,je as f,ke as g,re as h,Fr as i};