paygate-checkout-sdk 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.jsx +7 -1
- package/dist/index.esm.jsx.map +1 -1
- package/dist/index.iife.jsx +1 -1
- package/dist/index.iife.jsx.map +1 -1
- package/dist/index.jsx +7 -1
- package/dist/index.jsx.map +1 -1
- package/package.json +2 -2
package/dist/index.iife.jsx
CHANGED
|
@@ -794,5 +794,5 @@ to {
|
|
|
794
794
|
width: 100%;
|
|
795
795
|
height: 600px;
|
|
796
796
|
border: 0;
|
|
797
|
-
`,gi=({userData:e})=>{var n,a,i;const{showSnackbar:o,SnackbarUI:g}=ir(),[s,c]=A.useState(!1),[d,f]=A.useState("CARD"),[u,B]=A.useState(!1),[C,p]=A.useState({number:"",expiryMonth:"",expiryYear:"",cvv:"",cardHolderName:"",productDescription:""}),[I,h]=A.useState(""),[m,Q]=A.useState("FORM"),[E,M]=A.useState(["","","",""]),[x,w]=A.useState(["","","","","",""]),[v,Y]=A.useState("AUTH"),[G,S]=A.useState(""),[P,k]=A.useState(""),[F,N]=A.useState(!1),[V,H]=A.useState("AUTH"),[X,W]=A.useState(""),[q,K]=A.useState(""),[Z,J]=A.useState(!1),[ne,Ae]=A.useState("AUTH"),[ae,ge]=A.useState(""),[se,le]=A.useState(""),[ce,de]=A.useState(!1),[fe,ue]=A.useState(!1),[Be,Ce]=A.useState(""),[pe,Ie]=A.useState("FORM"),[he,me]=A.useState(""),[Qe,Ee]=A.useState(""),[Me,xe]=A.useState({message:"",success:!1}),[we,ve]=A.useState(),[ye,be]=A.useState(),[Re,De]=A.useState(),[je,Ye]=A.useState(!1),[Ge,Se]=A.useState(1800),[Oe,Pe]=A.useState([]),[ke,Fe]=A.useState(),[ze,Ne]=A.useState(""),[Ve,He]=A.useState(null),[Ue,Le]=A.useState(!1),[Te,Xe]=A.useState(!1),[We,qe]=A.useState(""),[Ke,Ze]=A.useState(""),[Je,_e]=A.useState(!1),$e=A.useRef([]);A.useRef(null);const et=A.useRef(null),tt=A.useRef(null),nt=A.useRef(null),At=A.useRef(null),at=A.useRef(null),rt=A.useRef(null),[it,ot]=A.useState(!1),[gt,st]=A.useState(null),lt=A.useRef(null),ct=Pa(null!==(n=null==e?void 0:e.merchantPublicKey)&&void 0!==n?n:""),dt=[{label:"Bank card",value:"CARD",icon:b},{label:"USSD",value:"USSD",icon:R},{label:"Bank transfer",value:"BANKTRANSFER",icon:D},{label:"NQR",value:"NQR",icon:j},{label:"Pay with Opay",value:"OPAY",icon:O},{label:"Pay with PalmPay",value:"PALMPAY",icon:z},{label:"Pay with Kuda",value:"KUDA",icon:U},{label:"Mobile Money",value:"MOBILEMONEY",icon:ba}],ft={visa:t.jsx(za,{}),mastercard:t.jsx(Na,{}),verve:t.jsx(Va,{}),"american-express":t.jsx(Ha,{}),discover:t.jsx(Ua,{})},ut=e=>{const{name:t,value:n}=e.target;if("number"===t){const e=n.replace(/\D/g,"").slice(0,19),t=e.replace(/(.{4})/g,"$1 ").trim();p(e=>Object.assign(Object.assign({},e),{number:t}));const A=y(e);return(e=>{const t=e.replace(/\s+/g,"").slice(0,6);return/^5061\d{2}/.test(t)||/^5078\d{2}/.test(t)||/^6500\d{2}/.test(t)||/^628051/.test(t)})(e)?He("verve"):A.length?He(A[0].type):He(null),void(e.length>=16&&et.current&&et.current.focus())}if("expiryMonth"===t){const e=n.replace(/\D/g,"").slice(0,2);return p(t=>Object.assign(Object.assign({},t),{expiryMonth:e})),void(2===e.length&&tt.current&&tt.current.focus())}if("expiryYear"===t){const e=n.replace(/\D/g,"").slice(0,2),t=C.expiryYear;return p(t=>Object.assign(Object.assign({},t),{expiryYear:e})),2===e.length&&nt.current&&nt.current.focus(),void(1===t.length&&""===e&&et.current&&et.current.focus())}if("cvv"===t){const e="american-express"===Ve?4:3,t=n.replace(/\D/g,"").slice(0,e),A=C.cvv;return p(e=>Object.assign(Object.assign({},e),{cvv:t})),void(1===A.length&&""===t&&tt.current&&tt.current.focus())}p(e=>Object.assign(Object.assign({},e),{[t]:n}))},Bt=A.useCallback(()=>l(void 0,void 0,void 0,function*(){var t,n,A,a,i,g,s,l,c;const d=E.join(""),f=C.number.replaceAll(" ","")||(null===(t=At.current)||void 0===t?void 0:t.value.replaceAll(" ",""));ue(!0);try{const t={client_transaction_reference:rt.current,amount:parseFloat(e.amount.toString()),currency:e.currencyCode,card_number:f,card_expiry_month:C.expiryMonth||(null===(n=et.current)||void 0===n?void 0:n.value),card_expiry_year:`20${C.expiryYear||(null===(A=tt.current)||void 0===A?void 0:A.value)}`,card_cvv:C.cvv||(null===(a=nt.current)||void 0===a?void 0:a.value),card_pin:"verve"===Ve?d:void 0,card_holder_name:C.cardHolderName||(null===(i=at.current)||void 0===i?void 0:i.value),customer_email:e.email,customer_phone_number:"+"+e.phoneNumber,customer_address:e.customerAddress,customer_first_name:e.firstName,customer_last_name:e.lastName,customer_city:e.customerCity,customer_state:e.customerState,customer_country:e.customerCountry,customer_postal_code:e.customerPostalCode,payment_description:C.productDescription,device_signature:e.deviceSignature,ip_address:e.ipAddress,metadata_order_id:e.metadataOrderId,metadata_product_info:e.metadataProductInfo},o=yield r.post("https://card.dev.mypaygate.co/api/v1/checkout-sdk/charge",t,{headers:{"Content-Type":"application/json","X-Business-API-Key":e.merchantSecretKey}});o.status&&De(o.data)}catch(e){console.error("Payment Error:",(null===(g=e.response)||void 0===g?void 0:g.data)||e.message),De(null===(s=e.response)||void 0===s?void 0:s.data),o("error",null===(l=e.response)||void 0===l?void 0:l.data.error_code,null===(c=e.response)||void 0===c?void 0:c.data.message)}finally{ue(!1)}}),[E]),Ct=A.useCallback(()=>l(void 0,void 0,void 0,function*(){var t,n,A,a,i;ue(!0);try{const{data:i}=yield r.post("https://subsidiary.dev.mypaygate.co/collection/v1/simulate-payin",{requestHeader:{clientId:"",requestType:"GHS"===(null===(t=e.transactionCurrency)||void 0===t?void 0:t.toUpperCase())?"GH":(null===(n=e.transactionCurrency)||void 0===n?void 0:n.toUpperCase())+"-Collections"},transactionReference:ze,transactionCountry:"GHS"===(null===(A=e.transactionCurrency)||void 0===A?void 0:A.toUpperCase())?"GH":null===(a=e.transactionCurrency)||void 0===a?void 0:a.toUpperCase()},{headers:{Accept:"application/json","Content-Type":"application/json"}});return"success"==i.responseMessage.toLowerCase()&&_e(!0),i}catch(e){console.error("Simulate PayIn Error:",(null===(i=e.response)||void 0===i?void 0:i.data)||e.message)}finally{ue(!1)}}),[ze]),pt=A.useCallback(()=>l(void 0,void 0,void 0,function*(){var t,n,A;ue(!0);try{const A=Sa();Ne(A);const{data:a}=yield r.post("https://subsidiary.dev.mypaygate.co/collection/v1/payin",{requestHeader:{clientId:e.clientId,requestType:"Collections"},customerName:e.firstName+e.lastName,customerEmail:e.email,customerNumber:he,transactionReference:A,transactionDescription:"",transactionAmount:e.amount,transactionCurrency:e.transactionCurrency,transactionCountry:"GHS"===(null===(t=e.transactionCurrency)||void 0===t?void 0:t.toUpperCase())?"GH":null===(n=e.transactionCurrency)||void 0===n?void 0:n.toUpperCase(),successUrl:"",errorUrl:"",cancelUrl:"",operatorCode:"",webhookUrl:""},{headers:{Accept:"application/json","X-module":Oa(e.amount,A,he.toString()),"X-business":ct,"X-app":"checkout","Content-Type":"application/json"}});ve(a),"failed"!==a.responseDetails.responseMessage.toLowerCase()?Ie("CALL"):o("error",a.responseDetails.failedReason,"Please check your account details and try again")}catch(e){console.error("PayIn Error:",(null===(A=e.response)||void 0===A?void 0:A.data)||e.message)}finally{ue(!1)}}),[he]),It=A.useCallback(()=>l(void 0,void 0,void 0,function*(){var t;try{const n="https://virtual-account.dev.mypaygate.co/va/blusalt/v1/paygate/generate_dynamic_virtual_account",A={account_reference:Ga(),business_fk:24,account_category:"Collection",channel:"VirtualAccount",expires_in_minutes:30,customer_first_name:null==e?void 0:e.firstName,customer_last_name:null==e?void 0:e.lastName,customer_email:null==e?void 0:e.email,customer_phone_number:"+"+(null==e?void 0:e.phoneNumber),transaction_description:"",transaction_amount:null===(t=null==ye?void 0:ye.data)||void 0===t?void 0:t.transaction_amount},a=yield r.post(n,A);Fe(a.data)}catch(e){console.error("handleVirtualAccount error --\x3e ",e)}}),[null===(a=null==ye?void 0:ye.data)||void 0===a?void 0:a.transaction_amount,null==e?void 0:e.email,null==e?void 0:e.firstName,null==e?void 0:e.lastName,null==e?void 0:e.phoneNumber]),ht=()=>{const e=Sa();return qe(e),rt.current=e,e},mt=A.useCallback(()=>l(void 0,void 0,void 0,function*(){const t=ht();Ze(t);try{const t={redirect_url:"",merchant_key:"",merchant_reference:e.merchantReference,biller_name:"",branch_id:"",payment_link_id:"",transaction_reference:rt.current,checkout_amount:e.amount,currency_code:e.currencyCode,first_name:e.firstName,last_name:e.lastName,email_address:e.email,phone_number:e.phoneNumber,country_code:e.countryCode,payment_channel:"",additional_details:{}},{data:n}=yield r.post("https://checkout-be.dev.mypaygate.co/checkout",t,{headers:{"Content-Type":"application/json",Authorization:"UEstMzEtYjc2ZmJmZDljY2ExNDVlYS1xQ243ckk1eWcteWwyTjdQT1o4S09RREhpbVBTYnVVQg=="}});n.status&&be(n)}catch(e){console.error("")}}),[]),Qt=()=>{p({number:"",expiryMonth:"",expiryYear:"",cvv:"",cardHolderName:"",productDescription:""}),M(["","","",""]),w(["","","","","",""]),h(""),Y("AUTH"),S(""),k(""),N(!1),H("AUTH"),W(""),K(""),J(!1),Ae("AUTH"),ge(""),le(""),de(!1),Ce(""),Ie("FORM"),me(""),Ee(""),xe({message:"",success:!1}),ve(void 0),Fe(void 0),B(!1),st(null),ot(!1),Xe(!1),Le(!1),Se(1800),_e(!1)},Et=A.useCallback(()=>l(void 0,void 0,void 0,function*(){var e,t;try{const n="https://virtual-account.dev.mypaygate.co/va/blusalt/v1/paygate/fund_virtual_account",{data:A}=yield r.post(n,{account_number:null===(e=null==ke?void 0:ke.data)||void 0===e?void 0:e.account_number,amount:null===(t=null==ye?void 0:ye.data)||void 0===t?void 0:t.transaction_amount});xe(A)}catch(e){console.error("fund_virtual_account error --\x3e ",e)}}),[ke]),Mt=A.useCallback(t=>l(void 0,void 0,void 0,function*(){try{const n="https://card.dev.mypaygate.co/api/v1/checkout-sdk/complete-otp",A={transaction_reference:rt.current,otp_code:t};"SUCCESSFUL"===(yield r.post(n,A,{headers:{"Content-Type":"application/json","X-Internal-API-Key":"checkout-sdk-key-101112","X-Business-API-Key":e.merchantSecretKey}})).data.status&&Xe(!0)}catch(e){console.error("handleOtp error -> ",e)}}),[]),xt=()=>{var e,t,n,A,a,r;const i=C.number.replace(/\s/g,"")||(null===(t=null===(e=At.current)||void 0===e?void 0:e.value)||void 0===t?void 0:t.replace(/\s/g,"")),o=C.expiryMonth||(null===(n=et.current)||void 0===n?void 0:n.value),g=C.expiryYear||(null===(A=tt.current)||void 0===A?void 0:A.value),s=C.cvv||(null===(a=nt.current)||void 0===a?void 0:a.value),l=C.cardHolderName||(null===(r=at.current)||void 0===r?void 0:r.value);return!!i&&i.length>=16&&!!o&&2===o.length&&!!g&&2===g.length&&!!s&&(3===s.length||"american-express"===Ve&&4===s.length)&&!!l};A.useEffect(()=>{mt(),_e(!1)},[]),A.useEffect(()=>{let e;return je&&Ge>0?e=setInterval(()=>{Se(e=>e-1)},1e3):0===Ge&&Ye(!1),()=>{e&&clearInterval(e)}},[je,Ge]),A.useEffect(()=>{var e,t,n;let A=null!==(n=null===(t=null===(e=null==ye?void 0:ye.data)||void 0===e?void 0:e.payment_options)||void 0===t?void 0:t.map(e=>e.paymentOption))&&void 0!==n?n:[];Pe(A)},[ye]),A.useEffect(()=>{"BANKTRANSFER"===d&&(It(),Ye(!0),Se(1800))},[d,It]),A.useEffect(()=>{Me&&Ye(!1)},[Me]),A.useEffect(()=>{(null==Re?void 0:Re.status)&&"verve"===Ve?B(!0):"PENDING_3DS"===(null==Re?void 0:Re.status)&&(null==Re?void 0:Re.redirect_url_3ds)?(st(null==Re?void 0:Re.redirect_url_3ds),ot(!0),o("info","3DS authentication","3DS authentication required. Please complete the challenge below.")):("SUCCESSFUL"===(null==Re?void 0:Re.status)&&Xe(!0),"FAILED"===(null==Re?void 0:Re.status)&&(Le(!0),setTimeout(()=>{Qt(),Le(!1)},3e3)))},[Re]),A.useEffect(()=>{("SUCCESS"===pe||Me.success)&&(o("info","Redirection Notification","You will be redirected in 10 seconds"),setTimeout(()=>{window.open(null==e?void 0:e.merchantSiteUrl,"_self")},1e4))},[Me,pe]);const wt=()=>t.jsxs(_r,Object.assign({bold:!0},{children:[t.jsx($r,{children:"Total Amount"}),t.jsx(ei,{children:Fa(e.amount,e.currencyCode)})]})),vt=()=>t.jsxs(Ai,{children:[t.jsx(ii,{}),t.jsx(ai,Object.assign({size:"18px",weight:500,style:{marginTop:"30px"}},{children:"Initializing SDK..."})),t.jsx(ai,Object.assign({size:"14px",weight:300},{children:"Setting up your secure payment environment."}))]});return ye?t.jsxs(t.Fragment,{children:[!Te&&!Ue&&!it&&!gt&&t.jsxs(fr,{children:[t.jsxs(ur,{children:[t.jsxs(Br,Object.assign({open:s},{children:[t.jsx(br,{children:"Make Payment"}),t.jsx(Dr,{}),dt.filter(e=>Oe.includes(e.value)).map(e=>{const n=e.icon,A=d===e.value;return t.jsxs(Ir,Object.assign({selected:A,onClick:()=>{Qt(),f(e.value),Q("FORM")},style:{backgroundColor:A?"#DED8FB":"transparent"}},{children:["string"==typeof n?t.jsx("img",{src:n||"/placeholder.svg",alt:`${e.label} icon`,style:{width:24,height:24,marginRight:8}}):t.jsx(n,{style:{marginRight:8,fontWeight:500},color:A?"#28119C":"#52525B"}),e.label]}),e.value)})]})),t.jsxs(hr,{children:[t.jsxs(Rr,{children:[t.jsx(pr,Object.assign({onClick:()=>c(!0)},{children:t.jsx(Da,{})})),"OTP"===ne||"OTP"===V||"OTP"===v?t.jsxs(Ur,{children:[t.jsx(qr,{children:"Enter OTP"}),t.jsxs(Kr,{children:["A 6-digit code has been sent to your phone number"," "]})]}):"CARD"===d?t.jsxs(Ur,{children:[t.jsx(Vr,{children:"Pay with bank card"}),t.jsx(Hr,{children:"Enter your card details to pay"})]}):"USSD"===d?t.jsxs(Ur,{children:[t.jsx(Vr,{children:"Pay with USSD"}),t.jsx(Hr,{children:"Select a bank to get the USSD code"})]}):t.jsxs(Ur,{children:[t.jsx(Vr,{children:"Pay via transfer"}),t.jsx(Hr,{children:"Make the transfer to the account below"})]})]}),!["OPAY","PALMPAY","KUDA","MOBILEMONEY"].includes(d)&&"PIN"!==m&&t.jsx(wt,{}),Oe.includes("CARD")&&"FORM"===m&&"CARD"===d&&t.jsx(t.Fragment,{children:!it&&!gt&&t.jsxs(t.Fragment,{children:[t.jsx(Sr,{children:"Card Number"}),t.jsxs(Mr,{children:[t.jsx(Er,{name:"number",placeholder:"0000 0000 0000 0000",value:C.number,onChange:ut,ref:At,style:{marginBottom:"0"}}),Ve?ft[Ve]:t.jsx(La,{})]}),t.jsxs(Zr,{children:[t.jsxs("div",{children:[t.jsx(Sr,{children:"Expiry Date"}),t.jsxs("div",Object.assign({style:{display:"flex",width:"100px",justifyContent:"space-between",alignItems:"center",maxWidth:"100px"}},{children:[t.jsx(Jr,Object.assign({width:"40px",style:{maxWidth:"30px",minWidth:"30px"},withSlash:!0},{children:t.jsx(Qr,{name:"expiryMonth",placeholder:"MM",maxLength:2,ref:et,value:C.expiryMonth,onChange:ut,style:{marginBottom:"0"}})})),t.jsx(Jr,Object.assign({width:"40px",style:{maxWidth:"30px",minWidth:"30px"}},{children:t.jsx(Qr,{name:"expiryYear",placeholder:"YY",maxLength:2,ref:tt,value:C.expiryYear,onChange:ut,style:{marginBottom:"0"}})}))]}))]}),t.jsxs(Jr,Object.assign({width:"50px",style:{paddingRight:"24px",maxWidth:"50px",minWidth:"50px"}},{children:[t.jsx(Sr,{children:"CVV"}),t.jsx(Qr,{name:"cvv",placeholder:"CVV",maxLength:4,ref:nt,value:C.cvv,onChange:ut,style:{marginBottom:"0"}})]}))]}),t.jsx(Sr,{children:"Card Holder Name"}),t.jsx(Qr,{name:"cardHolderName",type:"text",placeholder:"Card Holder Name",value:C.cardHolderName,onChange:ut,ref:at,style:{marginBottom:"0"}}),t.jsx(Sr,{children:"Description"}),t.jsx(Qr,{name:"productDescription",type:"text",placeholder:"Product Description Optional",value:C.productDescription,onChange:ut}),t.jsx(xr,Object.assign({onClick:()=>{"verve"===Ve?Q("PIN"):Bt()},disabled:fe||!xt(),isDisable:fe||!xt()},{children:fe?"Loading...":"Confirm"}))]})}),"PIN"===m&&"verve"===Ve&&t.jsx(t.Fragment,{children:!u&&t.jsxs(t.Fragment,{children:[t.jsx(mr,Object.assign({style:{width:"100%",textAlign:"center"}},{children:"Card Pin"})),t.jsx(vr,{children:E.map((e,n)=>t.jsx(yr,{ref:e=>{$e.current[n]=e},type:"password",maxLength:1,value:e,onChange:e=>{var t;((e,t)=>{const n=[...E];n[e]=t,M(n)})(n,e.target.value),e.target.value&&n<E.length-1&&(null===(t=$e.current[n+1])||void 0===t||t.focus())}},n))}),!(null==Re?void 0:Re.message.includes("Duplicate transaction reference"))&&t.jsx(xr,Object.assign({onClick:()=>{Bt()},disabled:fe},{children:fe?"Loading...":"Confirm"}))]})}),u&&t.jsx(ya,{setIsOtpModal:B,setOtp:w,otp:x,paymentMethod:"CARD",handleOtp:Mt}),(null==Re?void 0:Re.message.includes("Duplicate transaction reference"))&&t.jsx(xr,Object.assign({onClick:()=>{ht(),Bt()},disabled:fe},{children:fe?"Loading...":"Try Again"})),Oe.includes("USSD")&&"USSD"===d&&"FORM"===m&&t.jsxs(t.Fragment,{children:[t.jsx(mr,{children:"Choose bank"}),t.jsx(_,{selected:I,onChange:h,currency:"GH"}),I&&t.jsxs(t.Fragment,{children:[t.jsxs(wr,{children:[t.jsx("span",{children:"*737*000*1234#"}),t.jsx(T,{})]}),t.jsx("p",Object.assign({style:{fontSize:"14px",marginTop:"8px",textAlign:"center",color:"#666666"}},{children:"Tap on the code to dial"})),t.jsx(xr,{children:"I have made this payment"})]})]}),Oe.includes("BANKTRANSFER")&&"FORM"===m&&"BANKTRANSFER"===d&&t.jsxs(t.Fragment,{children:[!Me.success&&t.jsx(mr,{children:"Transfer to the account below"}),Me.success?t.jsxs(Or,Object.assign({style:{textAlign:"center"}},{children:[t.jsx(Ra,{}),t.jsx("h3",{children:Me.message}),t.jsx("p",Object.assign({style:{color:"#666666",fontSize:"14px"}},{children:"Your payment has been successfully completed"}))]})):t.jsxs(Or,{children:[t.jsxs(Pr,Object.assign({isLast:!1},{children:[t.jsx("span",Object.assign({className:"label"},{children:"ACCOUNT NUMBER"})),t.jsxs("span",Object.assign({className:"value"},{children:[null==ke?void 0:ke.data.account_number,t.jsx(T,{})]}))]})),t.jsxs(Pr,Object.assign({isLast:!1},{children:[t.jsx("span",Object.assign({className:"label"},{children:"BANK NAME"})),t.jsx("span",Object.assign({className:"value"},{children:null==ke?void 0:ke.data.bank_name}))]})),t.jsxs(kr,{children:[t.jsx($,{}),t.jsx("span",{children:"Account number only valid for this transaction"})]})]}),!Me.success&&t.jsxs(t.Fragment,{children:[t.jsxs(Fr,{children:[t.jsx(ee,{}),t.jsx("span",{children:(e=>{const t=e%60;return`${Math.floor(e/60).toString().padStart(2,"0")}:${t.toString().padStart(2,"0")}`})(Ge)})]}),t.jsx(xr,Object.assign({onClick:()=>Et()},{children:"I have made this payment"}))]})]}),Oe.includes("NQR")&&"NQR"===d&&"FORM"===m&&t.jsxs(t.Fragment,{children:[t.jsx(mr,Object.assign({style:{textAlign:"center"}},{children:"Scan the QR code to make payment"})),t.jsx(zr,{children:t.jsx(te,{})}),t.jsx(xr,{children:"I have made this payment"})]}),Oe.includes("OPAY")&&"OPAY"===d&&"FORM"===m&&t.jsxs(t.Fragment,{children:[t.jsxs(jr,Object.assign({style:{flexDirection:"column",alignItems:"flex-start"}},{children:[t.jsx(wt,{}),t.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"space-between",width:"100%",marginTop:8}},{children:[t.jsx("span",Object.assign({style:{color:"#71717A"}},{children:"Merchant Name"})),t.jsx("span",Object.assign({style:{fontWeight:600}},{children:null==e?void 0:e.merchantName}))]}))]})),t.jsx("div",Object.assign({style:{textAlign:"center",marginBottom:24,display:"flex",alignItems:"center",justifyContent:"center",width:"100%"}},{children:t.jsx("img",{src:re||"/placeholder.svg",alt:""})})),"AUTH"===v&&t.jsxs(t.Fragment,{children:[t.jsx("p",Object.assign({style:{textAlign:"center",marginBottom:24}},{children:"Click the button below to authenticate with your bank"})),t.jsx(xr,Object.assign({onClick:()=>Y("CREDS")},{children:"Authenticate"}))]}),"CREDS"===v&&t.jsxs(Nr,{children:[t.jsx(Lr,{placeholder:"Enter Your Ten Digit Phone Number",value:G,onChange:e=>S(e.target.value)}),t.jsxs(Tr,{children:[t.jsx(Lr,{type:F?"text":"password",placeholder:"Enter your 6-digit Opay password",value:P,onChange:e=>k(e.target.value)}),t.jsx(Xr,Object.assign({onClick:()=>N(e=>!e)},{children:t.jsx(da,{icon:F?ie:oe,color:"#979797",fontWeight:500})}))]}),t.jsx(Wr,Object.assign({disabled:!(G&&6===P.length),onClick:()=>Y("OTP"),style:{borderRadius:"24px"}},{children:"Next"}))]}),"OTP"===v&&t.jsx(ya,{otp:x,setOtp:w,setIsOtpModal:e=>{e||(f("CARD"),Q("FORM"),Y("AUTH"))},paymentMethod:"OPAY"})]}),Oe.includes("PALMPAY")&&"PALMPAY"===d&&"FORM"===m&&t.jsxs(t.Fragment,{children:[t.jsxs(jr,Object.assign({style:{flexDirection:"column",alignItems:"flex-start"}},{children:[t.jsx(wt,{}),t.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"space-between",width:"100%",marginTop:8}},{children:[t.jsx("span",Object.assign({style:{color:"#71717A"}},{children:"Merchant Name"})),t.jsx("span",Object.assign({style:{fontWeight:600}},{children:null==e?void 0:e.merchantName}))]}))]})),t.jsx("div",Object.assign({style:{textAlign:"center",marginBottom:24,display:"flex",alignItems:"center",justifyContent:"center",width:"100%"}},{children:t.jsx("img",{src:pa||"/placeholder.svg",alt:"PalmpayIcon"})})),"AUTH"===V&&t.jsxs(t.Fragment,{children:[t.jsx("p",Object.assign({style:{textAlign:"center",marginBottom:24}},{children:"Click the button below to authenticate with your bank"})),t.jsx(xr,Object.assign({onClick:()=>H("CREDS")},{children:"Authenticate"}))]}),"CREDS"===V&&t.jsxs(Nr,{children:[t.jsx(Lr,{placeholder:"Enter Your Ten Digit Phone Number",value:X,onChange:e=>W(e.target.value)}),t.jsxs(Tr,{children:[t.jsx(Lr,{type:Z?"text":"password",placeholder:"Enter your 6-digit Password for your PalmPay account",value:q,onChange:e=>K(e.target.value)}),t.jsx(Xr,Object.assign({onClick:()=>J(e=>!e)},{children:t.jsx(da,{icon:Z?ie:oe,color:"#979797"})}))]}),t.jsx(Wr,Object.assign({disabled:!(X&&6===q.length),onClick:()=>H("OTP"),style:{borderRadius:"24px"}},{children:"Next"}))]}),"OTP"===V&&t.jsx(ya,{otp:x,setOtp:w,setIsOtpModal:e=>{e||(f("CARD"),Q("FORM"),H("AUTH"))},paymentMethod:"PALMPAY"})]}),Oe.includes("KUDA")&&"KUDA"===d&&"FORM"===m&&t.jsxs(t.Fragment,{children:[t.jsxs(jr,Object.assign({style:{flexDirection:"column",alignItems:"flex-start"}},{children:[t.jsx(wt,{}),t.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"space-between",width:"100%",marginTop:8}},{children:[t.jsx("span",Object.assign({style:{color:"#71717A"}},{children:"Merchant Name"})),t.jsx("span",Object.assign({style:{fontWeight:600}},{children:null==e?void 0:e.merchantName}))]}))]})),t.jsx("div",Object.assign({style:{textAlign:"center",marginBottom:24,display:"flex",alignItems:"center",justifyContent:"center",width:"100%"}},{children:t.jsx("img",{src:Qa||"/placeholder.svg",alt:"Kuda"})})),"AUTH"===ne&&t.jsxs(t.Fragment,{children:[t.jsx("p",Object.assign({style:{textAlign:"center",marginBottom:24}},{children:"Click the button below to authenticate with your bank"})),t.jsx(xr,Object.assign({onClick:()=>Ae("CREDS")},{children:"Authenticate"}))]}),"CREDS"===ne&&t.jsxs(Nr,{children:[t.jsx(Lr,{placeholder:"Enter Your Email",value:ae,onChange:e=>ge(e.target.value)}),t.jsxs(Tr,{children:[t.jsx(Lr,{type:ce?"text":"password",placeholder:"Enter Your Password",value:se,onChange:e=>le(e.target.value)}),t.jsx(Xr,Object.assign({onClick:()=>de(e=>!e)},{children:t.jsx(da,{icon:ce?ie:oe,color:"#979797"})}))]}),t.jsx(Wr,Object.assign({disabled:!(ae&&se.length>0),onClick:()=>Ae("SELECT"),style:{borderRadius:"24px"}},{children:"Next"}))]}),"SELECT"===ne&&t.jsxs(Nr,Object.assign({style:{border:"2px solid transparent",borderRadius:16,padding:"0px 20px"}},{children:[[{id:"WALLET",label:"Wallet",balance:"470,000"},{id:"OWEALTH",label:"Owealth",balance:"470,000"}].map(e=>t.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 24px",fontWeight:500,color:"#52525B",cursor:"pointer",width:"90%"},onClick:()=>Ce(e.id)},{children:[t.jsxs("label",Object.assign({style:{display:"flex",alignItems:"center",gap:8,color:"#52525B",fontWeight:400}},{children:[t.jsx("input",{type:"radio",name:"kudaAcct",checked:Be===e.id,readOnly:!0}),e.label]})),t.jsx("span",{children:e.balance})]}),e.id)),t.jsx(Wr,Object.assign({style:{margin:"24px",backgroundColor:"#41276D",borderRadius:"24px"},disabled:!Be,onClick:()=>Ae("OTP")},{children:"Pay Now"}))]})),"OTP"===ne&&t.jsx(ya,{otp:x,setOtp:w,setIsOtpModal:e=>{e||(f("CARD"),Q("FORM"),Ae("AUTH"))},paymentMethod:"KUDA"})]}),Oe.includes("MOBILEMONEY")&&"MOBILEMONEY"===d&&"FORM"===m&&t.jsxs(t.Fragment,{children:[t.jsx(wt,{}),"FORM"===pe&&t.jsxs(t.Fragment,{children:[t.jsx("label",Object.assign({style:{display:"block",fontWeight:400,marginBottom:8,color:"#454D54",fontSize:"14px"}},{children:"Choose Network"})),t.jsx(ja,{selected:Qe,onChange:e=>{Ee(e)},currency:null!==(i=null==e?void 0:e.countryCode)&&void 0!==i?i:"GHA"}),t.jsx("label",Object.assign({style:{display:"block",fontWeight:400,marginBottom:8,color:"#999999",fontSize:"14px"}},{children:"Phone number"})),t.jsx(Qr,{type:"text",placeholder:"9012345678",value:he,onChange:e=>me(e.target.value)}),t.jsx(xr,Object.assign({onClick:()=>{pt()},disabled:!Qe||he.length<10||fe,isDisable:!Qe||he.length<10||fe},{children:fe?"Loading...":"Confirm"}))]}),"CALL"===pe&&"failed"!==(null==we?void 0:we.responseDetails.responseMessage.toLowerCase())&&t.jsxs(t.Fragment,{children:[t.jsxs("div",Object.assign({style:{textAlign:"center",margin:"40px 0"}},{children:[t.jsx("div",Object.assign({style:{width:80,height:80,borderRadius:"50%",backgroundColor:"#4f46e5",display:"flex",justifyContent:"center",alignItems:"center",margin:"0 auto 20px"}},{children:t.jsx("span",Object.assign({style:{fontSize:32,color:"white"}},{children:"📞"}))})),t.jsx("p",Object.assign({style:{color:"#a1a1aa",fontSize:"14px"}},{children:"Please kindly complete the payment on your mobile phone"}))]})),!Je&&t.jsx(xr,Object.assign({onClick:()=>{Ct()}},{children:"Verify Payment"})),Je&&t.jsx(xr,Object.assign({onClick:()=>{l(void 0,void 0,void 0,function*(){var t,n;ue(!0);const A=Pa(ze),a=Pa(null!==(t=e.merchantPublicKey)&&void 0!==t?t:""),i={requestHeader:{clientId:"",requestType:"GH-Collections"},transactionReference:ze,transactionCountry:"GH"};try{const{data:e}=yield r.post("https://subsidiary.dev.mypaygate.co/collection/v1/check-status",i,{headers:{Accept:"application/json","Content-Type":"application/json","X-module":A,"X-business":a,"X-app":"checkout"}});return"SUCCESS"!==e.serverResponse.responseDetails.responseMessage?Ie("FAILED"):Ie("SUCCESS"),e}catch(e){throw console.error("Error checking status:",(null===(n=e.response)||void 0===n?void 0:n.data)||e.message),e}finally{ue(!1)}})}},{children:"I have made this payment"}))]}),"SUCCESS"===pe&&t.jsxs("div",Object.assign({style:{textAlign:"center"}},{children:[t.jsx(Ra,{}),t.jsx("h3",{children:"Transaction Successful"}),t.jsx("p",Object.assign({style:{color:"#666666",fontSize:"14px"}},{children:"Your payment has been successfully completed"}))]})),"FAILED"===pe&&t.jsxs("div",Object.assign({style:{textAlign:"center",display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column"}},{children:[t.jsx(sr,{children:"✕"}),t.jsx("h3",{children:"Transaction Failed"}),t.jsx("p",Object.assign({style:{color:"#666666",fontSize:"14px"}},{children:"Your payment was not successful"})),t.jsx(Wr,Object.assign({onClick:()=>{f("MOBILEMONEY"),Ie("FORM"),Ee(""),me("")},style:{marginTop:24}},{children:"Try Again"}))]}))]})]})]}),t.jsxs(ti,{children:[t.jsx("span",Object.assign({style:{fontWeight:600,color:"rgb(40, 17, 156)"}},{children:"We accept:"})),t.jsxs(ni,{children:[t.jsx(za,{width:"40",height:"30"}),t.jsx(Na,{width:"40",height:"30"}),t.jsx(Va,{width:"40",height:"30"}),t.jsx(Ha,{width:"40",height:"30"}),t.jsx(Ua,{width:"40",height:"30"})]})]}),t.jsxs(Yr,{children:[t.jsx(L,{}),t.jsxs(Gr,{children:[t.jsx("span",Object.assign({style:{fontWeight:400,margin:"0px 5px",color:"#000"}},{children:"secured by"})),t.jsx("span",Object.assign({style:{color:"#28119C"}},{children:"Blusalt"}))]})]}),s&&t.jsx(Cr,{onClick:()=>c(!1)})]}),Te&&t.jsx(or,{reason:null==Re?void 0:Re.message,merchantSiteUrl:null==e?void 0:e.merchantSiteUrl}),Ue&&t.jsx(dr,{reason:null==Re?void 0:Re.message,merchantSiteUrl:null==e?void 0:e.merchantSiteUrl,handleReset:Qt,handleSelectedMethod:()=>{Q("FORM"),f("CARD")}}),it&>&&t.jsxs(fr,{children:[t.jsx("h2",{children:"3DS Authentication"}),t.jsx(oi,{ref:lt,src:gt,allow:"fullscreen"})]}),g()]}):t.jsx(vt,{})},si={setup:e=>{const{targetId:A,props:a}=e,r=document.getElementById(A);if(r){n.createRoot(r).render(t.jsx(gi,Object.assign({},a)))}else console.error(`Paygate SDK: Element with id "${A}" not found.`)}};return e.PaygateSdk=si,e}({},jsxRuntime,client,React,styled,axios);
|
|
797
|
+
`,gi=({userData:e})=>{var n,a,i;const{showSnackbar:o,SnackbarUI:g}=ir(),[s,c]=A.useState(!1),[d,f]=A.useState("CARD"),[u,B]=A.useState(!1),[C,p]=A.useState({number:"",expiryMonth:"",expiryYear:"",cvv:"",cardHolderName:"",productDescription:""}),[I,h]=A.useState(""),[m,Q]=A.useState("FORM"),[E,M]=A.useState(["","","",""]),[x,w]=A.useState(["","","","","",""]),[v,Y]=A.useState("AUTH"),[G,S]=A.useState(""),[P,k]=A.useState(""),[F,N]=A.useState(!1),[V,H]=A.useState("AUTH"),[X,W]=A.useState(""),[q,K]=A.useState(""),[Z,J]=A.useState(!1),[ne,Ae]=A.useState("AUTH"),[ae,ge]=A.useState(""),[se,le]=A.useState(""),[ce,de]=A.useState(!1),[fe,ue]=A.useState(!1),[Be,Ce]=A.useState(""),[pe,Ie]=A.useState("FORM"),[he,me]=A.useState(""),[Qe,Ee]=A.useState(""),[Me,xe]=A.useState({message:"",success:!1}),[we,ve]=A.useState(),[ye,be]=A.useState(),[Re,De]=A.useState(),[je,Ye]=A.useState(!1),[Ge,Se]=A.useState(1800),[Oe,Pe]=A.useState([]),[ke,Fe]=A.useState(),[ze,Ne]=A.useState(""),[Ve,He]=A.useState(null),[Ue,Le]=A.useState(!1),[Te,Xe]=A.useState(!1),[We,qe]=A.useState(""),[Ke,Ze]=A.useState(""),[Je,_e]=A.useState(!1),$e=A.useRef([]);A.useRef(null);const et=A.useRef(null),tt=A.useRef(null),nt=A.useRef(null),At=A.useRef(null),at=A.useRef(null),rt=A.useRef(null),[it,ot]=A.useState(!1),[gt,st]=A.useState(null),lt=A.useRef(null),ct=Pa(null!==(n=null==e?void 0:e.merchantPublicKey)&&void 0!==n?n:""),dt=[{label:"Bank card",value:"CARD",icon:b},{label:"USSD",value:"USSD",icon:R},{label:"Bank transfer",value:"BANKTRANSFER",icon:D},{label:"NQR",value:"NQR",icon:j},{label:"Pay with Opay",value:"OPAY",icon:O},{label:"Pay with PalmPay",value:"PALMPAY",icon:z},{label:"Pay with Kuda",value:"KUDA",icon:U},{label:"Mobile Money",value:"MOBILEMONEY",icon:ba}],ft={visa:t.jsx(za,{}),mastercard:t.jsx(Na,{}),verve:t.jsx(Va,{}),"american-express":t.jsx(Ha,{}),discover:t.jsx(Ua,{})},ut=e=>{const{name:t,value:n}=e.target;if("number"===t){const e=n.replace(/\D/g,"").slice(0,19),t=e.replace(/(.{4})/g,"$1 ").trim();p(e=>Object.assign(Object.assign({},e),{number:t}));const A=y(e);return(e=>{const t=e.replace(/\s+/g,"").slice(0,6);return/^5061\d{2}/.test(t)||/^5078\d{2}/.test(t)||/^6500\d{2}/.test(t)||/^628051/.test(t)})(e)?He("verve"):A.length?He(A[0].type):He(null),void(e.length>=16&&et.current&&et.current.focus())}if("expiryMonth"===t){const e=n.replace(/\D/g,"").slice(0,2);return p(t=>Object.assign(Object.assign({},t),{expiryMonth:e})),void(2===e.length&&tt.current&&tt.current.focus())}if("expiryYear"===t){const e=n.replace(/\D/g,"").slice(0,2),t=C.expiryYear;return p(t=>Object.assign(Object.assign({},t),{expiryYear:e})),2===e.length&&nt.current&&nt.current.focus(),void(1===t.length&&""===e&&et.current&&et.current.focus())}if("cvv"===t){const e="american-express"===Ve?4:3,t=n.replace(/\D/g,"").slice(0,e),A=C.cvv;return p(e=>Object.assign(Object.assign({},e),{cvv:t})),void(1===A.length&&""===t&&tt.current&&tt.current.focus())}p(e=>Object.assign(Object.assign({},e),{[t]:n}))},Bt=A.useCallback(()=>l(void 0,void 0,void 0,function*(){var t,n,A,a,i,g,s,l,c;const d=E.join(""),f=C.number.replaceAll(" ","")||(null===(t=At.current)||void 0===t?void 0:t.value.replaceAll(" ",""));ue(!0);try{const t={client_transaction_reference:rt.current,amount:parseFloat(e.amount.toString()),currency:e.currencyCode,card_number:f,card_expiry_month:C.expiryMonth||(null===(n=et.current)||void 0===n?void 0:n.value),card_expiry_year:`20${C.expiryYear||(null===(A=tt.current)||void 0===A?void 0:A.value)}`,card_cvv:C.cvv||(null===(a=nt.current)||void 0===a?void 0:a.value),card_pin:"verve"===Ve?d:void 0,card_holder_name:C.cardHolderName||(null===(i=at.current)||void 0===i?void 0:i.value),customer_email:e.email,customer_phone_number:"+"+e.phoneNumber,customer_address:e.customerAddress,customer_first_name:e.firstName,customer_last_name:e.lastName,customer_city:e.customerCity,customer_state:e.customerState,customer_country:e.customerCountry,customer_postal_code:e.customerPostalCode,payment_description:C.productDescription,device_signature:e.deviceSignature,ip_address:e.ipAddress,metadata_order_id:e.metadataOrderId,metadata_product_info:e.metadataProductInfo},o=yield r.post("https://card.dev.mypaygate.co/api/v1/checkout-sdk/charge",t,{headers:{"Content-Type":"application/json","X-Business-API-Key":e.merchantSecretKey}});o.status&&De(o.data)}catch(e){console.error("Payment Error:",(null===(g=e.response)||void 0===g?void 0:g.data)||e.message),De(null===(s=e.response)||void 0===s?void 0:s.data),o("error",null===(l=e.response)||void 0===l?void 0:l.data.error_code,null===(c=e.response)||void 0===c?void 0:c.data.message)}finally{ue(!1)}}),[E]),Ct=A.useCallback(()=>l(void 0,void 0,void 0,function*(){var t,n,A,a,i;ue(!0);try{const{data:i}=yield r.post("https://subsidiary.dev.mypaygate.co/collection/v1/simulate-payin",{requestHeader:{clientId:"",requestType:"GHS"===(null===(t=e.transactionCurrency)||void 0===t?void 0:t.toUpperCase())?"GH":(null===(n=e.transactionCurrency)||void 0===n?void 0:n.toUpperCase())+"-Collections"},transactionReference:ze,transactionCountry:"GHS"===(null===(A=e.transactionCurrency)||void 0===A?void 0:A.toUpperCase())?"GH":null===(a=e.transactionCurrency)||void 0===a?void 0:a.toUpperCase()},{headers:{Accept:"application/json","Content-Type":"application/json"}});return"success"==i.responseMessage.toLowerCase()&&_e(!0),i}catch(e){console.error("Simulate PayIn Error:",(null===(i=e.response)||void 0===i?void 0:i.data)||e.message)}finally{ue(!1)}}),[ze]),pt=A.useCallback(()=>l(void 0,void 0,void 0,function*(){var t,n,A;ue(!0);try{const A=Sa();Ne(A);const{data:a}=yield r.post("https://subsidiary.dev.mypaygate.co/collection/v1/payin",{requestHeader:{clientId:e.clientId,requestType:"Collections"},customerName:e.firstName+e.lastName,customerEmail:e.email,customerNumber:he,transactionReference:A,transactionDescription:"",transactionAmount:e.amount,transactionCurrency:e.transactionCurrency,transactionCountry:"GHS"===(null===(t=e.transactionCurrency)||void 0===t?void 0:t.toUpperCase())?"GH":null===(n=e.transactionCurrency)||void 0===n?void 0:n.toUpperCase(),successUrl:"",errorUrl:"",cancelUrl:"",operatorCode:"",webhookUrl:""},{headers:{Accept:"application/json","X-module":Oa(e.amount,A,he.toString()),"X-business":ct,"X-app":"checkout","Content-Type":"application/json"}});ve(a),"failed"!==a.responseDetails.responseMessage.toLowerCase()?Ie("CALL"):o("error",a.responseDetails.failedReason,"Please check your account details and try again")}catch(e){console.error("PayIn Error:",(null===(A=e.response)||void 0===A?void 0:A.data)||e.message)}finally{ue(!1)}}),[he]),It=A.useCallback(()=>l(void 0,void 0,void 0,function*(){var t;try{const n="https://virtual-account.dev.mypaygate.co/va/blusalt/v1/paygate/generate_dynamic_virtual_account",A={account_reference:Ga(),business_fk:24,account_category:"Collection",channel:"VirtualAccount",expires_in_minutes:30,customer_first_name:null==e?void 0:e.firstName,customer_last_name:null==e?void 0:e.lastName,customer_email:null==e?void 0:e.email,customer_phone_number:"+"+(null==e?void 0:e.phoneNumber),transaction_description:"",transaction_amount:null===(t=null==ye?void 0:ye.data)||void 0===t?void 0:t.transaction_amount},a=yield r.post(n,A);Fe(a.data)}catch(e){console.error("handleVirtualAccount error --\x3e ",e)}}),[null===(a=null==ye?void 0:ye.data)||void 0===a?void 0:a.transaction_amount,null==e?void 0:e.email,null==e?void 0:e.firstName,null==e?void 0:e.lastName,null==e?void 0:e.phoneNumber]),ht=()=>{const e=Sa();return qe(e),rt.current=e,e},mt=A.useCallback(()=>l(void 0,void 0,void 0,function*(){const t=ht();Ze(t);try{const t={redirect_url:"",merchant_key:"",merchant_reference:e.merchantReference,biller_name:"",branch_id:"",payment_link_id:"",transaction_reference:rt.current,checkout_amount:e.amount,currency_code:e.currencyCode,first_name:e.firstName,last_name:e.lastName,email_address:e.email,phone_number:e.phoneNumber,country_code:e.countryCode,payment_channel:"",additional_details:{}},{data:n}=yield r.post("https://checkout-be.dev.mypaygate.co/checkout",t,{headers:{"Content-Type":"application/json",Authorization:"UEstMzEtYjc2ZmJmZDljY2ExNDVlYS1xQ243ckk1eWcteWwyTjdQT1o4S09RREhpbVBTYnVVQg=="}});n.status&&be(n)}catch(e){console.error("")}}),[]),Qt=()=>{p({number:"",expiryMonth:"",expiryYear:"",cvv:"",cardHolderName:"",productDescription:""}),M(["","","",""]),w(["","","","","",""]),h(""),Y("AUTH"),S(""),k(""),N(!1),H("AUTH"),W(""),K(""),J(!1),Ae("AUTH"),ge(""),le(""),de(!1),Ce(""),Ie("FORM"),me(""),Ee(""),xe({message:"",success:!1}),ve(void 0),Fe(void 0),B(!1),st(null),ot(!1),Xe(!1),Le(!1),Se(1800),_e(!1)},Et=A.useCallback(()=>l(void 0,void 0,void 0,function*(){var e,t;try{const n="https://virtual-account.dev.mypaygate.co/va/blusalt/v1/paygate/fund_virtual_account",{data:A}=yield r.post(n,{account_number:null===(e=null==ke?void 0:ke.data)||void 0===e?void 0:e.account_number,amount:null===(t=null==ye?void 0:ye.data)||void 0===t?void 0:t.transaction_amount});xe(A)}catch(e){console.error("fund_virtual_account error --\x3e ",e)}}),[ke]),Mt=A.useCallback(t=>l(void 0,void 0,void 0,function*(){try{const n="https://card.dev.mypaygate.co/api/v1/checkout-sdk/complete-otp",A={transaction_reference:rt.current,otp_code:t};"SUCCESSFUL"===(yield r.post(n,A,{headers:{"Content-Type":"application/json","X-Internal-API-Key":"checkout-sdk-key-101112","X-Business-API-Key":e.merchantSecretKey}})).data.status&&Xe(!0)}catch(e){console.error("handleOtp error -> ",e)}}),[]),xt=()=>{var e,t,n,A,a,r;const i=C.number.replace(/\s/g,"")||(null===(t=null===(e=At.current)||void 0===e?void 0:e.value)||void 0===t?void 0:t.replace(/\s/g,"")),o=C.expiryMonth||(null===(n=et.current)||void 0===n?void 0:n.value),g=C.expiryYear||(null===(A=tt.current)||void 0===A?void 0:A.value),s=C.cvv||(null===(a=nt.current)||void 0===a?void 0:a.value),l=C.cardHolderName||(null===(r=at.current)||void 0===r?void 0:r.value);return!!i&&i.length>=16&&!!o&&2===o.length&&!!g&&2===g.length&&!!s&&(3===s.length||"american-express"===Ve&&4===s.length)&&!!l};A.useEffect(()=>{mt(),_e(!1)},[]),A.useEffect(()=>{let e;return je&&Ge>0?e=setInterval(()=>{Se(e=>e-1)},1e3):0===Ge&&Ye(!1),()=>{e&&clearInterval(e)}},[je,Ge]),A.useEffect(()=>{var e,t,n;let A=null!==(n=null===(t=null===(e=null==ye?void 0:ye.data)||void 0===e?void 0:e.payment_options)||void 0===t?void 0:t.map(e=>e.paymentOption))&&void 0!==n?n:[];Pe(A)},[ye]),A.useEffect(()=>{"BANKTRANSFER"===d&&(It(),Ye(!0),Se(1800))},[d,It]),A.useEffect(()=>{Me&&Ye(!1)},[Me]),A.useEffect(()=>{(null==Re?void 0:Re.status)&&"verve"===Ve?B(!0):"PENDING_3DS"===(null==Re?void 0:Re.status)&&(null==Re?void 0:Re.redirect_url_3ds)?(st(null==Re?void 0:Re.redirect_url_3ds),ot(!0),o("info","3DS authentication","3DS authentication required. Please complete the challenge below.")):("SUCCESSFUL"===(null==Re?void 0:Re.status)&&Xe(!0),"FAILED"===(null==Re?void 0:Re.status)&&(Le(!0),setTimeout(()=>{Qt(),Le(!1)},3e3)))},[Re]),A.useEffect(()=>{("SUCCESS"===pe||Me.success)&&(o("info","Redirection Notification","You will be redirected in 10 seconds"),setTimeout(()=>{window.open(null==e?void 0:e.merchantSiteUrl,"_self")},1e4))},[Me,pe]);const wt=()=>t.jsxs(_r,Object.assign({bold:!0},{children:[t.jsx($r,{children:"Total Amount"}),t.jsx(ei,{children:Fa(e.amount,e.currencyCode)})]})),vt=()=>t.jsxs(Ai,{children:[t.jsx(ii,{}),t.jsx(ai,Object.assign({size:"18px",weight:500,style:{marginTop:"30px"}},{children:"Initializing SDK..."})),t.jsx(ai,Object.assign({size:"14px",weight:300},{children:"Setting up your secure payment environment."}))]});return ye?t.jsxs(t.Fragment,{children:[!Te&&!Ue&&!it&&!gt&&t.jsxs(fr,{children:[t.jsxs(ur,{children:[t.jsxs(Br,Object.assign({open:s},{children:[t.jsx(br,{children:"Make Payment"}),t.jsx(Dr,{}),dt.filter(e=>Oe.includes(e.value)).map(e=>{const n=e.icon,A=d===e.value;return t.jsxs(Ir,Object.assign({selected:A,onClick:()=>{Qt(),f(e.value),Q("FORM")},style:{backgroundColor:A?"#DED8FB":"transparent"}},{children:["string"==typeof n?t.jsx("img",{src:n||"/placeholder.svg",alt:`${e.label} icon`,style:{width:24,height:24,marginRight:8}}):t.jsx(n,{style:{marginRight:8,fontWeight:500},color:A?"#28119C":"#52525B"}),e.label]}),e.value)})]})),t.jsxs(hr,{children:[t.jsxs(Rr,{children:[t.jsx(pr,Object.assign({onClick:()=>c(!0)},{children:t.jsx(Da,{})})),"OTP"===ne||"OTP"===V||"OTP"===v?t.jsxs(Ur,{children:[t.jsx(qr,{children:"Enter OTP"}),t.jsxs(Kr,{children:["A 6-digit code has been sent to your phone number"," "]})]}):"CARD"===d?t.jsxs(Ur,{children:[t.jsx(Vr,{children:"Pay with bank card"}),t.jsx(Hr,{children:"Enter your card details to pay"})]}):"USSD"===d?t.jsxs(Ur,{children:[t.jsx(Vr,{children:"Pay with USSD"}),t.jsx(Hr,{children:"Select a bank to get the USSD code"})]}):t.jsxs(Ur,{children:[t.jsx(Vr,{children:"Pay via transfer"}),t.jsx(Hr,{children:"Make the transfer to the account below"})]})]}),!["OPAY","PALMPAY","KUDA","MOBILEMONEY"].includes(d)&&"PIN"!==m&&t.jsx(wt,{}),Oe.includes("CARD")&&"FORM"===m&&"CARD"===d&&t.jsx(t.Fragment,{children:!it&&!gt&&t.jsxs(t.Fragment,{children:[t.jsx(Sr,{children:"Card Number"}),t.jsxs(Mr,{children:[t.jsx(Er,{name:"number",placeholder:"0000 0000 0000 0000",value:C.number,onChange:ut,ref:At,style:{marginBottom:"0"}}),Ve?ft[Ve]:t.jsx(La,{})]}),t.jsxs(Zr,{children:[t.jsxs("div",{children:[t.jsx(Sr,{children:"Expiry Date"}),t.jsxs("div",Object.assign({style:{display:"flex",width:"100px",justifyContent:"space-between",alignItems:"center",maxWidth:"100px"}},{children:[t.jsx(Jr,Object.assign({width:"40px",style:{maxWidth:"30px",minWidth:"30px"},withSlash:!0},{children:t.jsx(Qr,{name:"expiryMonth",placeholder:"MM",maxLength:2,ref:et,value:C.expiryMonth,onChange:ut,style:{marginBottom:"0"}})})),t.jsx(Jr,Object.assign({width:"40px",style:{maxWidth:"30px",minWidth:"30px"}},{children:t.jsx(Qr,{name:"expiryYear",placeholder:"YY",maxLength:2,ref:tt,value:C.expiryYear,onChange:ut,style:{marginBottom:"0"}})}))]}))]}),t.jsxs(Jr,Object.assign({width:"50px",style:{paddingRight:"24px",maxWidth:"50px",minWidth:"50px"}},{children:[t.jsx(Sr,{children:"CVV"}),t.jsx(Qr,{name:"cvv",placeholder:"CVV",maxLength:4,ref:nt,value:C.cvv,onChange:ut,style:{marginBottom:"0"}})]}))]}),t.jsx(Sr,{children:"Card Holder Name"}),t.jsx(Qr,{name:"cardHolderName",type:"text",placeholder:"Card Holder Name",value:C.cardHolderName,onChange:ut,ref:at,style:{marginBottom:"0"}}),t.jsx(Sr,{children:"Description"}),t.jsx(Qr,{name:"productDescription",type:"text",placeholder:"Product Description Optional",value:C.productDescription,onChange:ut}),t.jsx(xr,Object.assign({onClick:()=>{"verve"===Ve?Q("PIN"):Bt()},disabled:fe||!xt(),isDisable:fe||!xt()},{children:fe?"Loading...":"Confirm"}))]})}),"PIN"===m&&"verve"===Ve&&t.jsx(t.Fragment,{children:!u&&t.jsxs(t.Fragment,{children:[t.jsx(mr,Object.assign({style:{width:"100%",textAlign:"center"}},{children:"Card Pin"})),t.jsx(vr,{children:E.map((e,n)=>t.jsx(yr,{ref:e=>{$e.current[n]=e},type:"password",maxLength:1,value:e,onChange:e=>{var t;((e,t)=>{const n=[...E];n[e]=t,M(n)})(n,e.target.value),e.target.value&&n<E.length-1&&(null===(t=$e.current[n+1])||void 0===t||t.focus())}},n))}),!(null==Re?void 0:Re.message.includes("Duplicate transaction reference"))&&t.jsx(xr,Object.assign({onClick:()=>{Bt()},disabled:fe},{children:fe?"Loading...":"Confirm"}))]})}),u&&t.jsx(ya,{setIsOtpModal:B,setOtp:w,otp:x,paymentMethod:"CARD",handleOtp:Mt}),(null==Re?void 0:Re.message.includes("Duplicate transaction reference"))&&t.jsx(xr,Object.assign({onClick:()=>{ht(),Bt()},disabled:fe},{children:fe?"Loading...":"Try Again"})),Oe.includes("USSD")&&"USSD"===d&&"FORM"===m&&t.jsxs(t.Fragment,{children:[t.jsx(mr,{children:"Choose bank"}),t.jsx(_,{selected:I,onChange:h,currency:"GH"}),I&&t.jsxs(t.Fragment,{children:[t.jsxs(wr,{children:[t.jsx("span",{children:"*737*000*1234#"}),t.jsx(T,{})]}),t.jsx("p",Object.assign({style:{fontSize:"14px",marginTop:"8px",textAlign:"center",color:"#666666"}},{children:"Tap on the code to dial"})),t.jsx(xr,{children:"I have made this payment"})]})]}),Oe.includes("BANKTRANSFER")&&"FORM"===m&&"BANKTRANSFER"===d&&t.jsxs(t.Fragment,{children:[!Me.success&&t.jsx(mr,{children:"Transfer to the account below"}),Me.success?t.jsxs(Or,Object.assign({style:{textAlign:"center"}},{children:[t.jsx(Ra,{}),t.jsx("h3",{children:Me.message}),t.jsx("p",Object.assign({style:{color:"#666666",fontSize:"14px"}},{children:"Your payment has been successfully completed"}))]})):t.jsxs(Or,{children:[t.jsxs(Pr,Object.assign({isLast:!1},{children:[t.jsx("span",Object.assign({className:"label"},{children:"ACCOUNT NUMBER"})),t.jsxs("span",Object.assign({className:"value"},{children:[null==ke?void 0:ke.data.account_number,t.jsx(T,{})]}))]})),t.jsxs(Pr,Object.assign({isLast:!1},{children:[t.jsx("span",Object.assign({className:"label"},{children:"BANK NAME"})),t.jsx("span",Object.assign({className:"value"},{children:null==ke?void 0:ke.data.bank_name}))]})),t.jsxs(kr,{children:[t.jsx($,{}),t.jsx("span",{children:"Account number only valid for this transaction"})]})]}),!Me.success&&t.jsxs(t.Fragment,{children:[t.jsxs(Fr,{children:[t.jsx(ee,{}),t.jsx("span",{children:(e=>{const t=e%60;return`${Math.floor(e/60).toString().padStart(2,"0")}:${t.toString().padStart(2,"0")}`})(Ge)})]}),t.jsx(xr,Object.assign({onClick:()=>Et()},{children:"I have made this payment"}))]})]}),Oe.includes("NQR")&&"NQR"===d&&"FORM"===m&&t.jsxs(t.Fragment,{children:[t.jsx(mr,Object.assign({style:{textAlign:"center"}},{children:"Scan the QR code to make payment"})),t.jsx(zr,{children:t.jsx(te,{})}),t.jsx(xr,{children:"I have made this payment"})]}),Oe.includes("OPAY")&&"OPAY"===d&&"FORM"===m&&t.jsxs(t.Fragment,{children:[t.jsxs(jr,Object.assign({style:{flexDirection:"column",alignItems:"flex-start"}},{children:[t.jsx(wt,{}),t.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"space-between",width:"100%",marginTop:8}},{children:[t.jsx("span",Object.assign({style:{color:"#71717A"}},{children:"Merchant Name"})),t.jsx("span",Object.assign({style:{fontWeight:600}},{children:null==e?void 0:e.merchantName}))]}))]})),t.jsx("div",Object.assign({style:{textAlign:"center",marginBottom:24,display:"flex",alignItems:"center",justifyContent:"center",width:"100%"}},{children:t.jsx("img",{src:re||"/placeholder.svg",alt:""})})),"AUTH"===v&&t.jsxs(t.Fragment,{children:[t.jsx("p",Object.assign({style:{textAlign:"center",marginBottom:24}},{children:"Click the button below to authenticate with your bank"})),t.jsx(xr,Object.assign({onClick:()=>Y("CREDS")},{children:"Authenticate"}))]}),"CREDS"===v&&t.jsxs(Nr,{children:[t.jsx(Lr,{placeholder:"Enter Your Ten Digit Phone Number",value:G,onChange:e=>S(e.target.value)}),t.jsxs(Tr,{children:[t.jsx(Lr,{type:F?"text":"password",placeholder:"Enter your 6-digit Opay password",value:P,onChange:e=>k(e.target.value)}),t.jsx(Xr,Object.assign({onClick:()=>N(e=>!e)},{children:t.jsx(da,{icon:F?ie:oe,color:"#979797",fontWeight:500})}))]}),t.jsx(Wr,Object.assign({disabled:!(G&&6===P.length),onClick:()=>Y("OTP"),style:{borderRadius:"24px"}},{children:"Next"}))]}),"OTP"===v&&t.jsx(ya,{otp:x,setOtp:w,setIsOtpModal:e=>{e||(f("CARD"),Q("FORM"),Y("AUTH"))},paymentMethod:"OPAY"})]}),Oe.includes("PALMPAY")&&"PALMPAY"===d&&"FORM"===m&&t.jsxs(t.Fragment,{children:[t.jsxs(jr,Object.assign({style:{flexDirection:"column",alignItems:"flex-start"}},{children:[t.jsx(wt,{}),t.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"space-between",width:"100%",marginTop:8}},{children:[t.jsx("span",Object.assign({style:{color:"#71717A"}},{children:"Merchant Name"})),t.jsx("span",Object.assign({style:{fontWeight:600}},{children:null==e?void 0:e.merchantName}))]}))]})),t.jsx("div",Object.assign({style:{textAlign:"center",marginBottom:24,display:"flex",alignItems:"center",justifyContent:"center",width:"100%"}},{children:t.jsx("img",{src:pa||"/placeholder.svg",alt:"PalmpayIcon"})})),"AUTH"===V&&t.jsxs(t.Fragment,{children:[t.jsx("p",Object.assign({style:{textAlign:"center",marginBottom:24}},{children:"Click the button below to authenticate with your bank"})),t.jsx(xr,Object.assign({onClick:()=>H("CREDS")},{children:"Authenticate"}))]}),"CREDS"===V&&t.jsxs(Nr,{children:[t.jsx(Lr,{placeholder:"Enter Your Ten Digit Phone Number",value:X,onChange:e=>W(e.target.value)}),t.jsxs(Tr,{children:[t.jsx(Lr,{type:Z?"text":"password",placeholder:"Enter your 6-digit Password for your PalmPay account",value:q,onChange:e=>K(e.target.value)}),t.jsx(Xr,Object.assign({onClick:()=>J(e=>!e)},{children:t.jsx(da,{icon:Z?ie:oe,color:"#979797"})}))]}),t.jsx(Wr,Object.assign({disabled:!(X&&6===q.length),onClick:()=>H("OTP"),style:{borderRadius:"24px"}},{children:"Next"}))]}),"OTP"===V&&t.jsx(ya,{otp:x,setOtp:w,setIsOtpModal:e=>{e||(f("CARD"),Q("FORM"),H("AUTH"))},paymentMethod:"PALMPAY"})]}),Oe.includes("KUDA")&&"KUDA"===d&&"FORM"===m&&t.jsxs(t.Fragment,{children:[t.jsxs(jr,Object.assign({style:{flexDirection:"column",alignItems:"flex-start"}},{children:[t.jsx(wt,{}),t.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"space-between",width:"100%",marginTop:8}},{children:[t.jsx("span",Object.assign({style:{color:"#71717A"}},{children:"Merchant Name"})),t.jsx("span",Object.assign({style:{fontWeight:600}},{children:null==e?void 0:e.merchantName}))]}))]})),t.jsx("div",Object.assign({style:{textAlign:"center",marginBottom:24,display:"flex",alignItems:"center",justifyContent:"center",width:"100%"}},{children:t.jsx("img",{src:Qa||"/placeholder.svg",alt:"Kuda"})})),"AUTH"===ne&&t.jsxs(t.Fragment,{children:[t.jsx("p",Object.assign({style:{textAlign:"center",marginBottom:24}},{children:"Click the button below to authenticate with your bank"})),t.jsx(xr,Object.assign({onClick:()=>Ae("CREDS")},{children:"Authenticate"}))]}),"CREDS"===ne&&t.jsxs(Nr,{children:[t.jsx(Lr,{placeholder:"Enter Your Email",value:ae,onChange:e=>ge(e.target.value)}),t.jsxs(Tr,{children:[t.jsx(Lr,{type:ce?"text":"password",placeholder:"Enter Your Password",value:se,onChange:e=>le(e.target.value)}),t.jsx(Xr,Object.assign({onClick:()=>de(e=>!e)},{children:t.jsx(da,{icon:ce?ie:oe,color:"#979797"})}))]}),t.jsx(Wr,Object.assign({disabled:!(ae&&se.length>0),onClick:()=>Ae("SELECT"),style:{borderRadius:"24px"}},{children:"Next"}))]}),"SELECT"===ne&&t.jsxs(Nr,Object.assign({style:{border:"2px solid transparent",borderRadius:16,padding:"0px 20px"}},{children:[[{id:"WALLET",label:"Wallet",balance:"470,000"},{id:"OWEALTH",label:"Owealth",balance:"470,000"}].map(e=>t.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 24px",fontWeight:500,color:"#52525B",cursor:"pointer",width:"90%"},onClick:()=>Ce(e.id)},{children:[t.jsxs("label",Object.assign({style:{display:"flex",alignItems:"center",gap:8,color:"#52525B",fontWeight:400}},{children:[t.jsx("input",{type:"radio",name:"kudaAcct",checked:Be===e.id,readOnly:!0}),e.label]})),t.jsx("span",{children:e.balance})]}),e.id)),t.jsx(Wr,Object.assign({style:{margin:"24px",backgroundColor:"#41276D",borderRadius:"24px"},disabled:!Be,onClick:()=>Ae("OTP")},{children:"Pay Now"}))]})),"OTP"===ne&&t.jsx(ya,{otp:x,setOtp:w,setIsOtpModal:e=>{e||(f("CARD"),Q("FORM"),Ae("AUTH"))},paymentMethod:"KUDA"})]}),Oe.includes("MOBILEMONEY")&&"MOBILEMONEY"===d&&"FORM"===m&&t.jsxs(t.Fragment,{children:[t.jsx(wt,{}),"FORM"===pe&&t.jsxs(t.Fragment,{children:[t.jsx("label",Object.assign({style:{display:"block",fontWeight:400,marginBottom:8,color:"#454D54",fontSize:"14px"}},{children:"Choose Network"})),t.jsx(ja,{selected:Qe,onChange:e=>{Ee(e)},currency:null!==(i=null==e?void 0:e.countryCode)&&void 0!==i?i:"GHA"}),t.jsx("label",Object.assign({style:{display:"block",fontWeight:400,marginBottom:8,color:"#999999",fontSize:"14px"}},{children:"Phone number"})),t.jsx(Qr,{type:"text",placeholder:"9012345678",value:he,onChange:e=>me(e.target.value)}),t.jsx(xr,Object.assign({onClick:()=>{pt()},disabled:!Qe||he.length<10||fe,isDisable:!Qe||he.length<10||fe},{children:fe?"Loading...":"Confirm"}))]}),"CALL"===pe&&"failed"!==(null==we?void 0:we.responseDetails.responseMessage.toLowerCase())&&t.jsxs(t.Fragment,{children:[t.jsxs("div",Object.assign({style:{textAlign:"center",margin:"40px 0"}},{children:[t.jsx("div",Object.assign({style:{width:80,height:80,borderRadius:"50%",backgroundColor:"#4f46e5",display:"flex",justifyContent:"center",alignItems:"center",margin:"0 auto 20px"}},{children:t.jsx("span",Object.assign({style:{fontSize:32,color:"white"}},{children:"📞"}))})),t.jsx("p",Object.assign({style:{color:"#a1a1aa",fontSize:"14px"}},{children:"Please kindly complete the payment on your mobile phone"}))]})),!Je&&t.jsx(xr,Object.assign({onClick:()=>{Ct()}},{children:"Verify Payment"})),Je&&t.jsx(xr,Object.assign({onClick:()=>{l(void 0,void 0,void 0,function*(){var t,n;ue(!0);const A=Pa(ze),a=Pa(null!==(t=e.merchantPublicKey)&&void 0!==t?t:""),i={requestHeader:{clientId:"",requestType:"GH-Collections"},transactionReference:ze,transactionCountry:"GH"};try{const{data:e}=yield r.post("https://subsidiary.dev.mypaygate.co/collection/v1/check-status",i,{headers:{Accept:"application/json","Content-Type":"application/json","X-module":A,"X-business":a,"X-app":"checkout"}});return"SUCCESS"!==e.serverResponse.responseDetails.responseMessage?Ie("FAILED"):Ie("SUCCESS"),e}catch(e){throw console.error("Error checking status:",(null===(n=e.response)||void 0===n?void 0:n.data)||e.message),e}finally{ue(!1)}})}},{children:"I have made this payment"}))]}),"SUCCESS"===pe&&t.jsxs("div",Object.assign({style:{textAlign:"center"}},{children:[t.jsx(Ra,{}),t.jsx("h3",{children:"Transaction Successful"}),t.jsx("p",Object.assign({style:{color:"#666666",fontSize:"14px"}},{children:"Your payment has been successfully completed"}))]})),"FAILED"===pe&&t.jsxs("div",Object.assign({style:{textAlign:"center",display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column"}},{children:[t.jsx(sr,{children:"✕"}),t.jsx("h3",{children:"Transaction Failed"}),t.jsx("p",Object.assign({style:{color:"#666666",fontSize:"14px"}},{children:"Your payment was not successful"})),t.jsx(Wr,Object.assign({onClick:()=>{f("MOBILEMONEY"),Ie("FORM"),Ee(""),me("")},style:{marginTop:24}},{children:"Try Again"}))]}))]})]})]}),t.jsxs(ti,{children:[t.jsx("span",Object.assign({style:{fontWeight:600,color:"rgb(40, 17, 156)"}},{children:"We accept:"})),t.jsxs(ni,{children:[t.jsx(za,{width:"40",height:"30"}),t.jsx(Na,{width:"40",height:"30"}),t.jsx(Va,{width:"40",height:"30"}),t.jsx(Ha,{width:"40",height:"30"}),t.jsx(Ua,{width:"40",height:"30"})]})]}),t.jsxs(Yr,{children:[t.jsx(L,{}),t.jsxs(Gr,{children:[t.jsx("span",Object.assign({style:{fontWeight:400,margin:"0px 5px",color:"#000"}},{children:"secured by"})),t.jsx("span",Object.assign({style:{color:"#28119C"}},{children:"Blusalt"}))]})]}),s&&t.jsx(Cr,{onClick:()=>c(!1)})]}),Te&&t.jsx(or,{reason:null==Re?void 0:Re.message,merchantSiteUrl:null==e?void 0:e.merchantSiteUrl}),Ue&&t.jsx(dr,{reason:null==Re?void 0:Re.message,merchantSiteUrl:null==e?void 0:e.merchantSiteUrl,handleReset:Qt,handleSelectedMethod:()=>{Q("FORM"),f("CARD")}}),it&>&&t.jsxs(fr,{children:[t.jsx("h2",{children:"3DS Authentication"}),t.jsx(oi,{ref:lt,src:gt,allow:"fullscreen"})]}),g()]}):t.jsx(vt,{})},si={setup:e=>{const{targetId:A,props:a}=e,r=document.getElementById(A);if(r){n.createRoot(r).render(t.jsx(gi,Object.assign({},a)))}else console.error(`Paygate SDK: Element with id "${A}" not found.`)}},li=si;return"undefined"!=typeof window&&(window.PaygateCheckoutSDK={PaygateSdk:si}),e.PaygateSdk=li,e}({},jsxRuntime,client,React,styled,axios);
|
|
798
798
|
//# sourceMappingURL=index.iife.jsx.map
|