@pinerohit11/testwidget 0.1.22 → 0.1.24

package/dist/index.js

@@ -1 +1,495 @@
-var _=Object.defineProperty,$=Object.defineProperties;var ee=Object.getOwnPropertyDescriptors;var w=Object.getOwnPropertySymbols;var ae=Object.prototype.hasOwnProperty,oe=Object.prototype.propertyIsEnumerable;var A=(c,n,s)=>n in c?_(c,n,{enumerable:!0,configurable:!0,writable:!0,value:s}):c[n]=s,l=(c,n)=>{for(var s in n||(n={}))ae.call(n,s)&&A(c,s,n[s]);if(w)for(var s of w(n))oe.call(n,s)&&A(c,s,n[s]);return c},d=(c,n)=>$(c,ee(n));import P from"axios";import e,{useEffect as re,useState as g}from"react";import{Button as ne,Modal as Z}from"react-bootstrap";import"bootstrap/dist/css/bootstrap.min.css";function ge({name:c,amount:n,orderId:s,fractalPayClientKey:E}){let M="http://192.168.1.52:8082/",C="http://192.168.1.52:8081/";console.log(c,"name",window==null?void 0:window.DatacapWebToken);let[X,N]=g(""),[m,r]=g({}),[f,Q]=g(!1),[i,k]=g({name:"John Doe",card_number:"4761 7310 0000 0043",exp_month:"12",exp_year:"2024",cvv:"201",zip:""}),[le,h]=g(!1),[v,q]=g(!1),G=async o=>{var t,y,U,V,K,T,J;o.preventDefault();let a={description:"widget payment",amount:n||"1.00",phone_number:"1234567908",zip:i.zip,orderId:s||"",fractalpayPublicKey:E};if(Object.keys(m).length<1)try{h(!0);let x=await P.post(`${M}create-widget-order`,a,{headers:{"Content-Type":"application/json"}});if(x.data&&((t=x.data)!=null&&t.result)){console.log("token",(y=x.data)==null?void 0:y.data),N((V=(U=x.data)==null?void 0:U.data)==null?void 0:V.dctoken);let B=async b=>{var W,S,F;if(console.log("response for token call back",b),b.Error)alert("if"),console.log("Error: ",b),h(!1);else{let L={"Content-Type":"application/x-www-form-urlencoded"},H=l({name:i.name,postal_code:i.zip},b);try{let p=await P.post(`${C}quick-pay/${(S=(W=x.data)==null?void 0:W.data)==null?void 0:S.posSalesIdEncode}`,H,{headers:L});h(!1),console.log("quick response",p),(F=p==null?void 0:p.data)!=null&&F.result&&(p==null?void 0:p.status)===200?(console.log("Payment success!",p==null?void 0:p.data),k({name:"John Doe",card_number:"4761 7310 0000 0043",exp_month:"12",exp_year:"2024",cvv:"201",zip:""})):console.log("Payment failed!",p==null?void 0:p.data)}catch(p){console.log("Error: ",p),h(!1)}}};window==null||window.DatacapWebToken.requestToken((T=(K=x.data)==null?void 0:K.data)==null?void 0:T.dctoken,"PaymentForm",B)}else h(!1),console.log("res",(J=x.data)==null?void 0:J.data)}catch(x){h(!1),console.log(x)}},Y=o=>{let t=(""+o).replace(/\D/g,"").match(/^(\d{4})(\d{4})(\d{4})(\d{4})$/);return t?`${t[1]} ${t[2]} ${t[3]} ${t[4]}`:o},j=o=>{r(a=>d(l({},a),{card_number:""})),o&&o.match(/[a-zA-Z]/)?r(a=>d(l({},a),{card_number:"Invalid input. Please enter only numbers."})):o.length>12&&!(window!=null&&window.DatacapWebToken.validateCardNumber(o==null?void 0:o.replaceAll(" ","")))?r(a=>d(l({},a),{card_number:"Invalid Card Number"})):o.length?r({}):r(a=>d(l({},a),{card_number:"Card Number required"}))},z=o=>{r(a=>d(l({},a),{exp_month:""})),/^\d{0,2}$/.test(o)&&(o===""||parseInt(o,10)>=1&&parseInt(o,10)<=12)?r({}):o.length?r(a=>d(l({},a),{exp_month:"Value should be between 1 and 12"})):r(a=>d(l({},a),{exp_month:"Month is required"}))},R=o=>{r(a=>d(l({},a),{exp_year:""})),window!=null&&window.DatacapWebToken.validateExpirationDate(i.exp_month,o)?r({}):o.length?r(a=>d(l({},a),{exp_year:"Invalid Expiration Date."})):r(a=>d(l({},a),{exp_year:"Year is required"}))},D=o=>{r(a=>d(l({},a),{cvv:""})),window!=null&&window.DatacapWebToken.validateCVV(o)?r({}):o.length?r(a=>d(l({},a),{cvv:"Invalid CVV."})):r(a=>d(l({},a),{cvv:"CVV is required"}))},u=o=>{let a=o.target.getAttribute("data-token")||"",t=o.target.value;k(y=>d(l({},y),{[a]:t})),a==="card_number"&&j(t),a==="exp_month"&&z(t),a==="exp_year"&&R(t),a==="cvv"&&D(t)};re(()=>{let o="my-script";if(!document.getElementById(o)){let t=document.createElement("script");t.src="https://token-cert.dcap.com/v1/client",t.id=o,t.async=!0,t.onload=()=>{typeof window!="undefined"&&window.DatacapWebToken?console.log("DatacapWebToken",window.DatacapWebToken):console.log("DatacapWebToken is not loaded yet.")},document.head.appendChild(t)}return()=>{let t=document.getElementById(o);t&&document.head.removeChild(t)}},[]);let I=()=>{q(!1)},O=()=>{console.log("open"),q(!0)};return console.log(v,"open"),e.createElement(e.Fragment,null,e.createElement("div",{style:{width:"100%",textAlign:"center"}},e.createElement(ne,{onClick:O},"Show")),e.createElement(Z,{show:v,onHide:I,backdrop:"static",keyboard:!1,size:"lg"},e.createElement(Z.Body,null,e.createElement("div",{className:"bg-black"},e.createElement("div",{className:"container bg-black"},e.createElement("div",{className:"row bg-light no-gutters"},e.createElement("div",{className:"col-sm-12"},e.createElement("div",{className:"bd-example bd-example-tabs right-tabs mttabs m-3 "},e.createElement("div",{className:"payment-popup"},e.createElement("button",{className:"close-pop",onClick:()=>{q(!1)}},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:37,height:37,viewBox:"0 0 21 21"},e.createElement("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",d:"m7.5 7.5l6 6m0-6l-6 6"}))),e.createElement("div",{className:"row"},e.createElement("div",{className:"comp-name"},e.createElement("img",{src:"https://invoicestaging.skysystemz.com/assets/products/65c49a2740ff1.png",alt:"",className:"client-logo"})),e.createElement("div",{className:""},e.createElement("div",{id:"Checkout",className:"inline"},e.createElement("div",{className:"header"},e.createElement("h1",null,"Pay"),e.createElement("i",{className:"fa fa-qrcode fa-2x",id:"qrIcon",title:"Show QR Code",onClick:()=>Q(!f)})),e.createElement("div",{id:"qrCode",style:{display:f?"block":"none"}},e.createElement("img",{src:"data:image/png;base64,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",alt:"QRCode",srcSet:""})),e.createElement("form",{id:"PaymentForm",className:"payment-form",onSubmit:G},e.createElement("input",{type:"hidden",id:"dctoken",defaultValue:X,name:"dctoken"}),e.createElement("div",{className:"form-group top-amnt"},e.createElement("div",{className:"amtleft"},e.createElement("label",{htmlFor:"Amount"},"Payment amount"),e.createElement("div",{className:"amount-placeholder"},e.createElement("span",null,"$"),e.createElement("span",null," ",n||1," "))),e.createElement("div",{className:"card-row"},e.createElement("span",{className:"visa"}),e.createElement("span",{className:"mastercard"}),e.createElement("span",{className:"amex"}),e.createElement("span",{className:"discover"}))),e.createElement("div",{className:"form-group"},e.createElement("label",{htmlFor:"NameOnCard"},"Name on card"),e.createElement("input",{"data-token":"name",id:"NameOnCard",className:"form-control required",type:"text",maxLength:100,placeholder:"name",value:i==null?void 0:i.name,onChange:u}),e.createElement("span",{id:"NameOnCard-error",style:{color:"red"}})),e.createElement("div",{className:"form-group"},e.createElement("input",{"data-token":"card_number",className:"null card-image form-control required",type:"text",maxLength:19,placeholder:"0000 0000 0000 0000",value:Y(i==null?void 0:i.card_number),onChange:u}),m.card_number&&e.createElement("span",{id:"card_number-error",style:{color:"red"}},m.card_number)),e.createElement("div",{className:"expiry-date-group form-group"},e.createElement("input",{"data-token":"exp_month",className:"form-control required",type:"text",placeholder:"MM",maxLength:2,value:i==null?void 0:i.exp_month,onChange:u}),m.exp_month&&e.createElement("span",{id:"exp_month-error",style:{color:"red"}},m.exp_month)),e.createElement("div",{className:"expiry-date-group form-group"},e.createElement("input",{"data-token":"exp_year",className:"form-control required",type:"text",placeholder:"YYYY",maxLength:4,value:i==null?void 0:i.exp_year,onChange:u}),m.exp_year&&e.createElement("span",{id:"exp_year-error",style:{color:"red"}},m.exp_year)),e.createElement("div",{className:"security-code-group form-group"},e.createElement("div",{className:"input-container"},e.createElement("input",{"data-token":"cvv",className:"form-control required",type:"text",maxLength:4,placeholder:"CVC",value:i==null?void 0:i.cvv,onChange:u}),e.createElement("i",{id:"cvc",className:"fa fa-question-circle"})),m.cvv&&e.createElement("span",{id:"cvv-error",style:{color:"red"}},m.cvv),e.createElement("div",{className:"cvc-preview-container two-card hide"},e.createElement("div",{className:"amex-cvc-preview"}),e.createElement("div",{className:"visa-mc-dis-cvc-preview"}))),e.createElement("div",{className:"zip-code-group form-group"},e.createElement("label",{htmlFor:"ZIPCode"},"Postal code"),e.createElement("div",{className:"input-container"},e.createElement("input",{id:"ZIPCode","data-token":"zip",className:"form-control required",type:"text",maxLength:7,placeholder:"000000",value:i==null?void 0:i.zip,onChange:u}),e.createElement("a",{tabIndex:0,role:"button","data-toggle":"popover","data-trigger":"focus","data-placement":"left","data-content":"Enter the ZIP/Postal code for your credit card billing address."},e.createElement("i",{className:"fa fa-question-circle"})),e.createElement("span",{id:"ZIPCode-error",style:{color:"red",display:"none"}},"This field is required"))),e.createElement("button",{id:"PayButton",className:"btn btn-block btn-success submit-button",type:"submit"},e.createElement("span",{className:"submit-button-lock"}),e.createElement("span",{className:"align-middle"},"Pay $",n||1))),e.createElement("div",{className:"powerd-by-part",style:{display:"flex",fontSize:"12px",textAlign:"center",alignItems:"center",justifyContent:"center",margin:"8px 0 20px 0"}},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,viewBox:"0 0 26 26"},e.createElement("path",{fill:"currentColor",d:"M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"})),"Secure payments powered by Fractal",e.createElement("img",{src:"https://ui.fractalpay.com/favicon.ico",alt:"Fractal logo",className:"powered-logo",style:{width:"18px",height:"18px",float:"right",padding:"2px",background:"#000",borderRadius:"4px",marginLeft:"5px"}}))))))))))))))}export{ge as PaywithFractal};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/app/components/Greet.tsx
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { Button, Modal } from "react-bootstrap";
+
+// src/app/globals.css
+import styleInject from "#style-inject";
+styleInject('body {\n  background: #d5d5d5;\n  font-family: "Poppins", sans-serif;\n}\ninput::placeholder {\n  font-weight: 500;\n  opacity: 0.5;\n  color: #35254D !important;\n}\n.bg-light {\n  background: #d5d5d5 !important;\n  height: 100vh;\n}\n.payment-popup {\n  padding: 0px;\n  background: #fff;\n  border-radius: 20px;\n  position: relative;\n  margin: 0 auto;\n}\n@media (max-width:460px) {\n  .payment-popup {\n    padding: 35px 25px;\n    width: 98%;\n  }\n}\n.close-pop {\n  position: absolute;\n  right: 8px;\n  top: 8px;\n  border: 0;\n  padding: 0;\n  background: none !important;\n}\n.amex {\n}\n.visa {\n}\n.mastercard {\n}\n.discover {\n}\n.expiry-date-group {\n  float: left;\n  width: 30%;\n}\n.expiry-date-group input {\n  width: calc(100% + 1px);\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.expiry-date-group input:focus {\n  position: relative;\n  z-index: 10;\n}\n.security-code-group {\n  float: right;\n  width: 40%;\n  position: relative;\n}\n.security-code-group input {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.zip-code-group {\n  clear: both;\n}\n#submitButton {\n  outline: 0 !important;\n  height: 46px;\n  font-size: 16px;\n  background-color: #161616 !important;\n  border: none;\n  display: block;\n  width: 100%;\n  border-radius: 180px;\n}\n#PayButton {\n  outline: 0 !important;\n  height: 46px;\n  font-size: 16px;\n  background-color: #161616 !important;\n  border: none;\n  display: block;\n  width: 100%;\n  border-radius: 180px;\n}\n#PayButton:hover {\n  background-color: #61C699 !important;\n}\n#PayButton:active {\n  background-color: #61C699 !important;\n}\n#PayButton:disabled {\n  background: rgb(172, 44, 170) !important;\n  color: #FFF !important;\n}\n.form-control {\n  color: #35254D;\n}\n.container {\n  margin-top: 10px;\n}\n#Checkout {\n  z-index: 100001;\n  width: 100%;\n  height: 100%;\n  min-height: 100%;\n  background: 0 0 #ffffff;\n  border-radius: 24px;\n  border: 1px solid #E0DFE2;\n  margin-left: auto;\n  margin-right: auto;\n  display: block;\n}\n#Checkout .header {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  padding: 8px;\n  border-bottom: 1px solid #DEDEDE;\n  margin: 0 10px 20px 10px;\n}\n#Checkout .header button {\n  border: 0;\n  background: none;\n  padding: 0;\n}\n#Checkout h1 {\n  margin: 0;\n  flex: 1;\n  padding: 10px;\n  font-size: 23px;\n  font-weight: 500;\n  color: #35254D;\n  display: flex;\n}\n#Checkout > form {\n  margin: 0 25px 10px 25px;\n}\nlabel {\n  color: rgba(53, 37, 77, 0.6);\n  margin-bottom: 2px;\n  text-transform: uppercase;\n  font-family: "IBM Plex Mono", monospace;\n  font-weight: 500;\n  font-size: 12px;\n}\n.input-container {\n  position: relative;\n}\n.input-container input {\n  padding-right: 25px;\n}\n#zipcode {\n  text-transform: capitalize !important;\n}\n#zipcode {\n  width: 18px;\n  position: absolute;\n  right: 8px;\n  top: 9px;\n}\n#zipcode .zip-tip {\n  display: none;\n  background-color: rgb(0, 0, 0, 0.4);\n  padding: 5px 8px;\n  border-radius: 6px;\n  position: absolute;\n  right: 26px;\n  top: -9px;\n  font-size: 12.5px;\n  text-transform: capitalize !important;\n  color: #fff;\n  width: 240px;\n  line-height: 16px;\n}\n#zipcode .zip-tip:before {\n  width: 0;\n  height: 0;\n  border-top: 7px solid transparent;\n  border-bottom: 7px solid transparent;\n  border-left: 7px solid #000;\n  opacity: 0.4;\n  position: absolute;\n  right: -7px;\n  top: 50%;\n  transform: translateY(-50%);\n  content: "";\n}\n#zipcode:hover .zip-tip {\n  display: block;\n}\n.input-container > i,\na[role=button] {\n  color: #d3d3d3;\n  width: 25px;\n  height: 30px;\n  line-height: 30px;\n  font-size: 16px;\n  position: absolute;\n  top: 5px;\n  right: 6px;\n  cursor: pointer;\n  text-align: center;\n}\n.input-container > i:hover,\na[role=button]:hover {\n  color: #777;\n}\n.amount-placeholder {\n  white-space: nowrap;\n  font-size: 44px;\n  font-weight: 600;\n  line-height: 40px;\n}\n.amount-placeholder > button {\n  float: right;\n  width: 60px;\n}\n.amount-placeholder > span {\n  line-height: 34px;\n}\n.top-amnt {\n  display: flex;\n  margin-bottom: 10px;\n  align-items: center;\n  justify-content: space-between;\n}\n.amtleft {\n  text-align: center;\n}\n.amtleft span {\n  color: #35254D;\n  margin: 0 -5px;\n}\n.card-row {\n  text-align: right;\n  margin: 8px 0 0 0;\n  max-width: 85px;\n  line-height: 20px;\n}\n.yer {\n  border-radius: 0;\n}\n.card-row span {\n  width: 33px;\n  height: 21px;\n  margin: 0 2px;\n  background-repeat: no-repeat;\n  display: inline-block;\n  background-size: contain;\n}\n.card-image {\n  background-repeat: no-repeat;\n  padding-right: 50px;\n  background-position: right 2px center;\n  background-size: auto 90%;\n}\n.cvc-preview-container {\n  position: absolute;\n  z-index: 9999;\n  right: -71px;\n  top: -54px;\n  width: 165px;\n  border-radius: 5px;\n  padding: 5px;\n  background-color: rgb(0, 0, 0, 0.3);\n  display: none;\n}\n.cvc-preview-container:before {\n  position: absolute;\n  left: 50%;\n  transform: translate(-50%);\n  bottom: -5px;\n  width: 0;\n  height: 0;\n  border-left: 5px solid transparent;\n  border-right: 5px solid transparent;\n  border-top: 5px solid #000;\n  opacity: 0.3;\n  content: "";\n}\n.security-code-group #cvc:hover .cvc-preview-container {\n  display: block;\n}\n.cvc-preview-container.two-card div {\n  width: 50%;\n  height: 45px;\n}\n.cvc-preview-container.two-card div.amex-cvc-preview {\n  float: right;\n}\n.cvc-preview-container.two-card div.visa-mc-dis-cvc-preview {\n  float: left;\n}\n.amex-cvc-preview {\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAACOCAYAAAAlzXSMAAAAAXNSR0IArs4c6QAAFg9JREFUeNrtnfeTFcXaxw+ZBZacM0oGySBIXECiSBQQAQFhJaclo+SgAsuS2QVBlrCLSlQBAVGCCpK5XiW4vFVvvXX/gPvDe9+qt+r2Pd9eeuiZ6TkBzuI563erPgVn5jk93T397X76mTndPl+Qv0+v3I/PuHW/MiEkMkBTvnD/3vr883wZdx6NyriX9XXmvax/Zt57LAghkSbrn9AYtAbNBRTlwTuP22Tce/wbK42QFwc0B+0ZRXno9h8D/Ab/YkUR8qeI81/QoE2U++8+apF59/H/soII+RPxaxBaVLrMk3k36yYrhpBoEGfWTWjSl3H30ZusEEKiyK31a9IvzMfprAxCokmYj9N9B289/Acrg5DoAZr0Zdz54/9ZGYRE0Yjp16SPFUFI9EFhEkJhEkIoTEIoTEIIhUkIhUkIoTAJoTBZCYRQmIQQCpMQCpMQQmESQmESQihMQihMEsFfn2eJTad+ENvP/8z6iEIO3flDpHx9QWw5c1kcuv0o4vYxJcx1R06LPHnzSuJLlhLp13832jVt38myA/O27radT0pJtZ1v1qGLda5VQnfbOROVatay7Nt072W0KRRXRJSuUFG07NJNLE//wnb9es1bSZvqdeq78p588rxo0q6D/L7P55PEFYsXvUeOFXt/vudZN598eSqkumnbo4+0yV+goPyO83zF6jXl+b6jxwe8F60SXg9eTzWy62lx2n6RN18+eaxByzay09HTavJaR+s7i9PSjfWK7xcoVEiWrU6T5mL6J5uN5fK6Dy06dxPLPjts+86rr/cOWobyVavZvoOy4PoFCxe27g/y1q5nX5HyzfeueoJ93aYtXPbIL4SaK4SJxqkKByav3mC0e6VtB5td73fG2M73HD7adh4NQ53DDdTPmahQrYatgQazhwhWZxy3voMbheNVX65jy9f0jzfZbqATNJJdl26a68ZfRt12yhpz3aAxKhvkwykSXAPn+owaF/BeoMMJWk9Vq1v2nfsPto6/v/wj6/iMdVus4x3fGGAdb921R9D0xy9ZbSyXF/nyFxArDxx92ql26xn0O2UrVbbsl+7NlKJ6ml5+m22p8hVE2sUblj06At3GZV+uvEj74XpsC3P/jd9F0eIlbAXDyBOKMJ0CqFzzJW9hduoqjxUrUVKsPfyVkfXHvnUJs0h8/FObzJNixf4vRbchw61roIdU30GP68xX6ve/iLiixeTxkmXLiVnJ26UIMYK26/WGlU7XwcOeq26cDThx2dpnEqbqwHDdUOpp95XbokSZstZ30CDhAaBx4lh8qdK2TsdZr2syT8iG3n/cRKuB4zvKLVTlKlykqOs+vD70Hau8EKNTmPBIvMqw7ugZy755x4Qn+S8uVh86Jju1fdf+LgZOmGKlPyhxqqstoQyrDh6V9um//CYGJj61x3djWphwXVRh2vd50/q/fvOdwqxet75lt/PCNXkOczZ1rEa9Bp4jJhpRKPlSDQgulmte4W80ELjMi+a2mkbM7m+NsPKFRuicn6AsaNCv9e7nrhv/SBtq3TiFifzpggh3xCxRumzI93DWhm220VH3gKau3RhyveojHeZserkgAtP8rnjpMvJ8lZdqu9JBHYSSf9WeXm7c1JV+w1avSjd98MTp1nHVvl5q+IrbvnXbbPv3p8W2MBu3bS8LWa1OPbHju6vS/ze5qbowMV8sV7mKzbWD+6vcLNWj5ZQw0eDhPuF8sw6dAwoT8zHlXpqugxHH6Xaa6gYdT6C6UQ1YdRigy4C3XogwnS6qyqdeN047U7126DvASkN1KoGEiborULCgPI+28azC1N1xeCRwpbd+e9nTHvUajn3MCXPz6UtWAUfMWmAFeJRb4Qx06MLs3H+I/H+nNwfJc/gXnxMGDQsoTIDAgQm9d1fCRGCi39hESd9R70mXs0zFylZaSSk7PYV58NZDyz3r2G9geHVz6qKrblAer7pRDRi9Na6lvrt83+fPPMf0rqdk1/fQqUI8+ndNjVUJE2WAO7/hxDnpPg6blmTVlT6HVeXCfN55HzBPVNebuX6rceT1KsOkless+61nr9g6NAWmRhj59Pnls9jHnDDht8seNk8esf3cTy73zRkE0oU5edV6a2KOc4jQZbtOyUGF6YV+s4IFfzCi6MEOkzC3nf3xaaDK7949c908ebQSqG50YWKep+amGG3RQUQy+DNxxSdG916fYmC+HWxkNYHy6p1dsOAPXNkJS9Z4usReJC5d4xokMOdHR2wKCqKj1O3hamP6YbT3dyxO+5gRJvxxJSbcUMy/AHp45SbWbdbSU5jojfVRS/0fjdgoTC34s3L/ESN6JE0fMfu/N0mOQqpHR8+48/trrjI5hXng5gPLrTPNIT3rxt/ITXWTHQ0sYAwC6cLEZzQ8VScjkxaGLUwIO5R6UoyYOd/VQJ2CCdThYRRD3udv22MsF1xW3Ad4Ruo+YJqAkdprrorgj1cZEJQzlf+zq7+K2Rt3iB7DR8lOX+WvVsPGnvZof3gioNvXbNAoNoU5f9unQXs1oEfPdGHic7kqVS0h4F88q9NFaBLm88wxP9h1wAqrl6lQyfWSgGmOid5W3qj6DY3XeXvmPOmeobGEWzd6EMgpTMxbVX7Q6OE6hhOVDWeOCZdUzfXQOPFdKYyixaTbZ6pXdJCIZIJAD+ZNc8wlezIsceJ68ExMwgxljokOFp7S8BlzRfKJ87ZzyFujNu2s+t59+ZYUdCB7FRcAOenS5pgwdXcD8wcn6lyvEe96ClOfhAM8xvAUZoSCP4jOqeshAqcHboJFZdGgnEEkPBqQvX/NWlZaodaNHgRyClO9nKA/n8uJ4A/yjNFbpT9nU5qc75keWQUL/oQqTDB0ymzrGvVbtrbdh3CEiY7D1NYUqC/rCYBfxPr0BKOk0x4vcKjzptE8qoWJXidYUKRq7bpPAx3+nsgkTBWJVUz7KCWoMJHeotR9nuDZYSBhYr4GN8XkrpmEiV5TjVZoXIjgrT9+Vr4JA/dIpTN24TKrBw+rbp4EgUzCBP3GTAhLmOHW05gFS43PdPW5qv5MNVC0OxxhYpR9qVET6xrjFq9wu7L+ETtQGVTdwZtR81uMhHhzB3PE8R+usjwB5Y1J+yf3X9pPn5Nt75+j4t6qOaf+skrMCPOd2QutClWvajkZPfeDp4GOVeuNwtR7L72HUo0r3OCPmqMG69nxCqGa66HBqPmm15s/GEUw3/G6Jhof5txyrjZrQXh18yQIBFGYhIk5kB69jETwR9bTuZ9kYywUF2cJWZ9347x6sQL/Kncz3BFTlcv0uAQdnPIgUL/q/ocS/NGflcKzMAVx9Mc/+twX9z+4/aexJ0z47XgLBg/nVYN0gpEG8zjY4f1KHEPUDJ/xqETZ4aEwjunPCREgwDE8lHceC4ZqXHCT8Rmjkyl/EJD6jmrsaNT4DBfXaY9GgEamgjrobRG8wEiJIJGyw3fDqRuIGsfgxut1pTN3yy4rr0MmzQj6TC+kerpwTY7o6rPqPHUwgqjz6plqsHp1ospVpdbLxvMj5yyyrtHz7WzXEo/MQimDPjfFfBH3R3k36lU/zBmd7+KqebWXPV7x469LYpBPr9zxi/E+6yKK7w+mW5i25IQ9hUkIf49JCKEwCaEwCSEUJiGEwiSEwiSEUJiEUJiEEAqTEAqTEEJhEkIoTEIoTEIIhUkIhUkIoTAJoTAJIRQmIYTCJITCJIRQmIRQmIQQCpMQCpOQP53Dtx6IIxdvRD+Xbsq8UpgkV3N29wHxt4FDRFar1uK/mjePCZDXXwcOlnmnMEmu4+e5i2JGjF6gDBQmyTWc2XfYNQo96JIQEzhHd5SFwiS5gtujx1oN+/qUGeLwk705Y2I+7M8r8qzyj7JQmCRX8LBjJ6thf3nldszlH3lW+X/YqTOFSXIHuivIMlCYhMKkMAmhMClMQmFSmIRQmBQm+YsLc89Pd0WVl2qLWg0bu87NWLdFNG7bXlSqWUs0fvU1+Vk/v/n0JdHpzUGiWp16omHrtmLq2o2e15m7ZZcoU6GSSBg4lMIkFGYg0n/5TTTvmCB8Pp8oUaas7Vzi0jXyOIgvVdr6P47jfNrFGyK+ZCl5rHjpMtb5sQuXua6z69JNmT7Ot+zSjcIkFKYXszZsE2UqVrYE5RRmlVovy+PTP9ksP4+as1h+rl63vvwMAeJzh74DRMbdLDFp5Tr5GaOn81pte/SxrkNhEgozgB0EVqBgQdFvzASXMCG0aR+liJFJC8WBm/flsaV7M6Vdxeo1Lbvt536SIyf+//7yj+T5Zh262K6DdJSgKUxCYQZp1GMWLhVbzlwWySfOG0dMJ537D5F2pjli6649RP4CBUWpcuXFx19881S4538WRYsXl3PYmeu3UpiEwgy1UYcizOHT50ibQnFF5CjpnKcWLFxYnkeQaMH2vda5Zh06izx584rVh46JuZvTKExCYUZKmEMmzZDn4fYu3PGZ6zzcXrBi/5fSDiPn1rNXxIQl2cGjnsNHi92Xb1kuLcSKzxQmoTCfUZhDp8y2RsoPdx90CRKu6t6f79nmrbDHY5UWnbtZAR8Tau5KYRIK08CGE+eMwkxK2SmP582XT4ry0O1HFjiPuSbOv/HuePn50yt3RL78BeSxlfuPiIGJU+SzT0X1OtmixSMWfD546yGFSSjMcEfMmvUbGkc6BHNwHuKDaHGsYatXZbQW/2/Qso04dOcP4wsGnGMSCjPERp3yzfeiZNlyoka9Btaxrd9elhFWHHeCCKsuNvW8s3CRoqJz/8Ge88dFqfvk92FDYRIK8wWQfv13Oefku7KE8CV2CpNQmBQmIRQmhUlyF/e797Aa9bGzV2Iu/8izyj/KQmGSXMGNxElWw743ZKj46tiZ2NgiwQ/yijyr/KMsFCbJFZz8+oLIatUq5ldiRxlQFgqT5Bq+25wmstq0iV1R+vOOMkSqPihMEjUcP3NJXJ09T24s9CCha/RvkeDPI/KKPCPvkawLCpOQKITCJITCJIRQmIRQmIQQCpMQCjM4+KEplnXoO3q8ixGzFojPrv7NZr/q4FGjbb+xicYlIYbPmGu0x3GszK3brz38lfyVuivtMRPEwp37nquc646cluno6aZ+/4un/bvzl5jzPX2O63eA+AGwM22AsuDX+aafLo2cs8hajjEUBiVOdaU/YPxkkfbDdZvduMUrjMcjwfSPNxnrBOCcyd50P6es2eCyxdIhgydOd9lidYJNp35w2c9K3m5Me+KKT1w/C8N9HjJ5pjvtCVPkvYtKYeIGFihUyHO9lN7vjLHZ939vkqdtvvz5bSubQXhYw8XLPmHQMOO6LyawAhp+aPus5YQQnGliqQtjZ3X7kW3FbydYVFi3f++DlQHXnMHKbbq9Wkxq6tpkWwcZSKhFi5dw10mePK7OEPUEFqelR1yYccXiPcuIc7otFtMKVCezN+6w2ddv2drTFj+Q1m3VurNe6PUKmrbv5GlbtlLl6HVlsVgRRkYnpcpXkCuNOe1NtuOXrJYFXb7vc0faD4z2FarVkEtDuNP+1WWLHhZp45fpz1NOlTZG60DCBFgnxpTv2k2aiaq167rs9137u8t2/rY9TxqKfZ8N1BGOT1613jr29sx5ch0bLNHoJcxWCd1t6WPkdTUMj/VYIwE6WXRKznLiGM45PQ7VKem28FxwHPdAt0dHiC0UnGljvxJ0QLqt2lJhyZ4Mmy1GVhyHd6Hbl6tcRTRq086Vdve3Rkh7Uz1G9RyzdIWKRmGaQCMzCdOLSjVqGYVpAkvsR0KYitFzPwgqTC/qNmtpW/IiEGg4oQqz/7iJ8pjXchkQZpvuvYJeE43Y6YlEUpjt+7zpOo5jXsJcd/SM7Tg2B/ISJjoeZ9ooi5cwnZ4IXFYch/vrFOYrbTu40u414t3YFCbWTQlVmBNXfByWML1GTBNYojAWhfnBrgMvXJimKUIkhYmFs96ZvdAGjlGYOSRMTJixMBIqDmDugky36/WG0X7Pj3cs282nLlqbucBVCZb28vQv5DzIaxUzzE31tDu+MUCmjcDTixSmLR9PwBZyps1slIuv22J+juvM27o7IsJEJ6nSxkLHpmUZc1KYanU6EyEL038/KcwwgF9uqnDMk5y2+2/8bgwY1WzQyLhQkprTOYGLaooSm4IMGKVMSxXmlDD7jBong1mmfKOjMH2nXJWqLlusAIf6ioQwnWmjwTkjyzkpTHQ8G7/6zkWLTl0pzJwSZvLJ87Ky8DgAdBsy3BiVVWArNGU7dOpsuZcE1v5E2Ntpi0k5ghvKHkvZI+2ug80NCFE1ZTtsWpIMtuDmmMLmz4La5g3C3PHdVf8cqb/YdvZHV8cDV1vlQ4EgF4JIpnQRadRtX27cNLsBZRw3ChMjEFxjgPm8qVHpedbTfn3YyGxxr97gEmaJ0mWtdBX1mreSUe+cEOxrvfs9tzCxLyaFGaJrWyQ+3rXVmRdqD0O4qaHOX7F4bzjz10g9AtBHTBU5TUpJtc5j1MIxjGLPcx21uQ320nA+r4UHoFOsRElpi8YSStpolPrmrrowcd+c6WMtVtR5tAqTIyajsi9MmF5RWRPBXNlQhekVlUWjR+PPiXbCqOxfVJhqv8O/ojCxkQ48BWegJ9CI+aKFGdaISWGGBuZT2EIbE3gn2A7N+ZbLnE1pcnclpy2WvUch9c1E0ZiwTL0p7UJxcfKBsvNtEVPaiIQibbwx86zlRJQZUWCkB9dO7YOh5oEmYeKRjinv4xYtt88Z/e67SlunTpPmMp25ISxd4SVMtcUcXvbQ08acUd8eXR8xy1So5MoL5p05Icz1x8/Khu8Uptr1GZ2vng886MdxbGar25evWk3m0ZlvlCWuaDHXq35IA3Wg20J8OD5i5nybPWIU2GDImTbyja381OZFUSVM7JyEhmraOwLPp9ZmnrSPNvM+NO41gQpEQML5pg0eLZjSxo5M2CxGt0dgBQ3QaYuRG2+zPE9UFiO6KW0AASK6aAnzym2jnaLn26NdIzry6LTD9dCxBdoGTk8DbxU5Gwk6N8yxa7/S1FbvuF6bbj1dbwq169nXeH9wzHl/IsHSPZmygTufsWKkR+N35gWf8Yoc6thZfgTDXPemanWRuGyt/V1jf5mxs7TzfiJt7O7ljFSjY0Rw0pk2OgPERvjrEkL46xJCCIVJCKEwCaEwCSEUJiEUJiGEwiSEwiSEUJiEUJisBEIoTEIIhUkIhUkIoTAJoTAJIRQmIX9tYR649YAVQUgUAU36sHQDK4OQ6AGa9G0+ffH/WBmERA/QpG/ZZ59nsTIIiR6gSV/Spp2bd164xgohJAqAFqFJ3+wN29su3LFXpF//jRVDyJ8INAgtQpM+/PkVehILGXvtQkwIyWFR+rUHDUKLPvU3c2NqpaSUnf+zYPtese3cj8Yt8AghkQdag+agPWgQWvTpf7OSU1/xn/jvOZtS5Q7GySfOibSLN+RehtiTgRASGaApaAsag9agOWgPGvSZ/makpFTwGxxK2pT6bxgTQnIWaA2ag/Z8wf5mJW9tNGfjjmX+L13w8yApJfUfhJAIAU35tQWNQWsmDf4HqpjHZRJqxUwAAAAASUVORK5CYII=) center center/contain no-repeat;\n}\n.visa-mc-dis-cvc-preview {\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAACOCAMAAAASE4S+AAAAAXNSR0IArs4c6QAAAadQTFRFAAAAzbFj+NyAyLNg+N2DzbRk+96CzrVj+96AzrNj+92By7Rl+92AzbRl/eCDzrRl/t+DzrVl/t+CzbVm/t+C3MFt3MFv/N2B/N6CzrRm/uCDzrRm/uCC7M93/N6CAAAAAQEBAgIBBAQCBQUDBwcECQgFDAsGDg0HEA4IEQ8JFRMLFxUMIBwQIR0RJSETKyYWLikYLyoYMCsZMSsZNC4bNzEcOTIdQDkhQTkhQzsiRT0jRj4kSkEmTEMnWE4tWU8uWk8uXFEvXVIwXlMwX1QxaV02bWA4bmE5cWQ6eGo+eWs+fW5Afm9Bi3pHjHtIkH9KmIZOmYdPnIlQnYpRo5BUppJVqJRWqpZXq5dYrJdYrZhZuaNfvaZhvqdiwKljwapjxK1lybFnyrJoy7NozrVm1Ltq171u2L5v2b9s2b9t2sBt3cNy3zEx3zIx38Rz4MVz4cZ04kI552NI6GVJ6Mx36s5368957dF674xb79J78NN78dV78tV789Z99Nd99dh+9rZv9th+9tl+99l/+duA+sx5+sx6+t2B+92B/N6B/d+C/uCD////AikOogAAAB90Uk5TACQkJSU9PT4+Q0NERJqav7/AwNjY4uLi4u7u8/P6+u6knPAAAAJkSURBVHja7d3pTxNBGMfxQbwAW06Pcj0tntQT8b7v+0JFxaserQcuKlQUFbFUaqvjH+1uG0lMfEETie4z39+bJ/tik/1kjt3MbDLGBFkWbeu0CtPZFq03v7KwxSpO04KKcmm7VZ32xeW2VK70nUF7tlj1afJnH+tA6k3UBWbUrHKBudJ0u8DsNtaJwIQJEyZMmDBhwoQJEyZMmPPCFCcCEyZMmDBhwoQJEyZMmDBhwoQJEyZMmDBhwoQJ010m+5swYcKECRMmTJgwYcKECRMmTJgwYcIMFfPHP8/vz5PLjnpzzmg2F07mxIhXVUYmwsjMVan0nbkQMrOeN1aY+zAsjHleNoRMf1x+rWa6KfjjM4RMvxdWN63+4QaYMGHC/EvM6b0HgpI6tvtoyq9vz+4/clcf89sJ2eiXIZGEyJD9sEl6RAa1MVPbpczsk8vT52SHHZCDUxelXxtzW/x4wPx+6cxn+0A2208PX9pB2aONef7xk3JrBjkth4Jysnf9fX1T0Czzmqx+6pcvcel/pJd5RRLXg1p6d0vWvdHKHJCeG2XljLVb5aZS5r2E3A6uTiUu2Km1klLK3CXxZDK5xd6RNYd3St+MTuaryr94G6y92iuy77X+b9rSi/d8usOEyZIXC5gsR7O5MN9bRexvwoQJEyZMmDBhwoQJEyZMmDBhwoT5vzNLLihLJu8CM2+6XGB2meUuMFeYyEf9ysmIqcsUtSuLmQZjGp8pdxafNxtjamIZ1f12MhOrDQ6uXhRLD4/nVb4/S/nx4XRsSeUY8prGtOI0186eKl8Xae3QSOxojTSUgT8BEvkXyqDHONgAAAAASUVORK5CYII=) center center/contain no-repeat;\n}\n.submit-button-lock {\n  height: 15px;\n  margin-top: -2px;\n  margin-right: 7px;\n  vertical-align: middle;\n  background: url(data:image/png;base64,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NQxdFfpzGC4sNKwm7Hm4VXh+eHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4+ziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD/iRPCqeVMrvRfuXflBNeTu4f7kufGK+eN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl/ygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ/KUcwR5vTkmuRuyx3J88n7fjVmNXd1Z752/ob8wTXuaw6thdauXNu5Tnddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrblyJe0fViy+KK4k8l3JLr31l9V/ndzPaE7b2l9qX7d+B2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3FgD2mPZI+0MqiyvUqvakfVp+qk6oEaj5rmvep7t+2d2sfb17/fbX/TAY0DxQc+HhQcvH/I91BrrUFtxWHc4azDz+ui6rq/Z39ff0TtSPGRz0eFR6XHwo911TvU1zeoN5Q2wo2SxrHjccdv/eD1Q3sTq+lQM6O5+AQ4ITnx4sf4H++eDDzZeYp9qukn/Z/2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0/m/989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66tOTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX+x+aem172296XCz/ZbjrY6+BX3n+l37L972un3ljv+dGwOLBvruLr57/17cPel93v3RB6kPXj/Mejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy//lfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0+OFvyn+tveV0auffnf7vWdiycTwa9HrmT9K3qi+OfrW9m3nZOjk03dp76anit6rvj/2gf2h+2P0x5Hp7E/4T5WfjT93fAn88ngmbWbm3/eE8/syOll+AAAAYFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////98JRy6AAAAH3RSTlMAAgYMEyIzOUpTVFViY3N2gJmcnaipq7fX3ebx+Pn8eTEuDQAAAI9JREFUKM/N0UkOglAQRdFHDyK90n64+9+lAyQgookjuaNKTlJJpaQlO2n6sW8SW/uCjrku2EloWDLhi3gDa4O3pTtA5Tt+BXDbiDsBmSQpAyZ3pRhoLUmS1QLxSilQPOcCSFfKgfxgPgfZ9ch7Y21LCcdd5wVH5SckEzkXc0ylpPJnMpETmX/d9eUpH1/5AKrsQVrz7YPBAAAAAElFTkSuQmCC) center center/contain no-repeat;\n  width: 14px;\n  display: inline-block;\n}\n.align-middle {\n  vertical-align: middle;\n}\ninput {\n  box-shadow: none !important;\n}\n.powerd-by-part {\n  display: flex;\n  font-size: 12px;\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n  margin: 8px 0 20px 0;\n}\n.powered-logo {\n  width: 18px;\n  height: 18px;\n  float: right;\n  padding: 2px;\n  background: #000000;\n  border-radius: 4px;\n  margin-left: 5px;\n}\n.comp-name {\n  display: block;\n  margin-bottom: 8px;\n}\n.client-logo {\n  max-width: 140px;\n  display: block;\n  margin: auto;\n  padding: 5px;\n}\n#qrCode {\n  text-align: center;\n}\n#qrIcon {\n  cursor: pointer;\n  border: 1px solid rgb(252, 252, 252);\n  padding: 10px;\n  border-radius: 5px;\n  background: #ffffff;\n}\n#target {\n  display: none;\n  text-align: center;\n  transition: all 5s;\n  padding: 5px;\n  transition: max-height 0.5s, overflow 0.5s 0.5s;\n}\n.payment-success {\n  border-radius: 24px;\n  padding: 160px 24px;\n  text-align: center;\n  background:\n    linear-gradient(white, white) padding-box,\n    linear-gradient(\n      to bottom,\n      #B0E2CC,\n      #DBFCEE) border-box;\n  border-radius: 24px;\n  border: 1px solid transparent;\n}\n.payment-icon {\n  width: 60px;\n  height: 60px;\n  border-radius: 180px;\n  border: #61C699 1px solid;\n  margin: 0 auto 15px auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.payment-success h2 {\n  font-size: 24px;\n  color: #35254D;\n  line-height: 25px;\n}\n.payment-success p {\n  font-size: 14px;\n  color: #9A92A6;\n  line-height: 15px;\n}\n.bg-light {\n  background: #fff !important;\n}\n.app-pagination .page-item .page-link {\n  color: #2e2f2f;\n}\n.app-pagination .page-item.active .page-link {\n  background-color: #a9aeb3;\n  border-color: #ddd;\n  color: #2e2f2f;\n}\n.app-pagination .page-item.disabled .page-link {\n  color: #2e2f2f;\n}\n.app-pagination .page-item .page-link:hover {\n  text-decoration: none;\n  color: #2e2f2f;\n}\n.loader {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgba(255, 255, 255, 0.521);\n  backdrop-filter: blur(.5px);\n  z-index: 9999;\n}\n.lds-ellipsis {\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n.lds-ellipsis div {\n  position: absolute;\n  top: 33px;\n  width: 13px;\n  height: 13px;\n  border-radius: 50%;\n  background: #000;\n  animation-timing-function: cubic-bezier(0, 1, 1, 0);\n}\n.lds-ellipsis div:nth-child(1) {\n  left: 8px;\n  animation: lds-ellipsis1 0.6s infinite;\n}\n.lds-ellipsis div:nth-child(2) {\n  left: 8px;\n  animation: lds-ellipsis2 0.6s infinite;\n}\n.lds-ellipsis div:nth-child(3) {\n  left: 32px;\n  animation: lds-ellipsis2 0.6s infinite;\n}\n.lds-ellipsis div:nth-child(4) {\n  left: 56px;\n  animation: lds-ellipsis3 0.6s infinite;\n}\n@keyframes lds-ellipsis1 {\n  0% {\n    transform: scale(0);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes lds-ellipsis2 {\n  0% {\n    transform: translate(0, 0);\n  }\n  100% {\n    transform: translate(24px, 0);\n  }\n}\n@keyframes lds-ellipsis3 {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n}\n.requestPayment {\n  max-width: 420px;\n}\n.paymentBtn {\n  background-color: black;\n  border: none;\n  color: white;\n  padding: 15px 32px;\n  text-align: center;\n  text-decoration: none;\n  display: inline-block;\n  font-size: 16px;\n  margin: 4px 2px;\n  border-radius: 180px;\n}\n.PayButton {\n  outline: 0 !important;\n  height: 46px;\n  background-color: #161616 !important;\n  width: 100%;\n  color: #fff;\n  margin: 10px 0;\n}\n.requpay-main {\n  max-width: 400px;\n  width: 100%;\n  height: auto;\n  padding: 20px;\n  border-radius: 20px !important;\n  position: relative;\n  margin: 30px auto;\n}\n.requpay-main h3 {\n  font-size: 20px;\n  padding-left: 10px;\n}\n.requpay-in {\n  width: 100%;\n  background: 0 0 #ffffff;\n  border-radius: 24px;\n  border: 1px solid #e0dfe2;\n  padding: 20px;\n}\n.requpay-in .mb-1 {\n  margin-bottom: 10px;\n}\n.requpay-in .pay-amount {\n  position: relative;\n}\n.requpay-in .pay-amount input {\n  padding-left: 20px;\n}\n.requpay-in .pay-amount .dlr-sign {\n  position: absolute;\n  left: 10px;\n  top: 7px;\n}\n.requpay-in .PayButton {\n  border-radius: 4px;\n  border: 0;\n  height: 43px;\n}\n');
+
+// src/app/components/Greet.tsx
+import "bootstrap/dist/css/bootstrap.min.css";
+function PaywithFractal({ name, amount, orderId, fractalPayClientKey }) {
+  const baseUrl = "http://192.168.1.52:8082/";
+  const masterBaseUrl = "http://192.168.1.52:8081/";
+  console.log(name, "name", window == null ? void 0 : window.DatacapWebToken);
+  const [dcToken, setDcToken] = useState("");
+  const [error, setError] = useState({});
+  const [toggleQr, setToggleQr] = useState(false);
+  const [formData, setFormData] = useState({
+    name: "John Doe",
+    card_number: "4761 7310 0000 0043",
+    exp_month: "12",
+    exp_year: "2024",
+    cvv: "201",
+    zip: ""
+  });
+  const [loading, setLoading] = useState(false);
+  const [show, setShow] = useState(false);
+  const handleSubmit = async (e) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    e.preventDefault();
+    const data = {
+      description: "widget payment",
+      amount: amount || "1.00",
+      phone_number: "1234567908",
+      zip: formData.zip,
+      orderId: orderId || "",
+      fractalpayPublicKey: fractalPayClientKey
+    };
+    if (Object.keys(error).length < 1) {
+      try {
+        setLoading(true);
+        const res = await axios.post(`${baseUrl}create-widget-order`, data, {
+          headers: {
+            "Content-Type": "application/json"
+          }
+        });
+        if (res.data && ((_a = res.data) == null ? void 0 : _a.result)) {
+          console.log("token", (_b = res.data) == null ? void 0 : _b.data);
+          setDcToken((_d = (_c = res.data) == null ? void 0 : _c.data) == null ? void 0 : _d.dctoken);
+          const tokenCallback = async (response) => {
+            var _a2, _b2, _c2;
+            console.log("response for token call back", response);
+            if (response.Error) {
+              alert("if");
+              console.log("Error: ", response);
+              setLoading(false);
+            } else {
+              const headers = {
+                "Content-Type": "application/x-www-form-urlencoded"
+              };
+              const quickData = __spreadValues({
+                name: formData.name,
+                postal_code: formData.zip
+              }, response);
+              try {
+                const resp = await axios.post(`${masterBaseUrl}quick-pay/${(_b2 = (_a2 = res.data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.posSalesIdEncode}`, quickData, {
+                  headers
+                });
+                setLoading(false);
+                console.log("quick response", resp);
+                if (((_c2 = resp == null ? void 0 : resp.data) == null ? void 0 : _c2.result) && (resp == null ? void 0 : resp.status) === 200) {
+                  console.log("Payment success!", resp == null ? void 0 : resp.data);
+                  setFormData({
+                    name: "John Doe",
+                    card_number: "4761 7310 0000 0043",
+                    exp_month: "12",
+                    exp_year: "2024",
+                    cvv: "201",
+                    zip: ""
+                  });
+                } else {
+                  console.log("Payment failed!", resp == null ? void 0 : resp.data);
+                }
+              } catch (error2) {
+                console.log("Error: ", error2);
+                setLoading(false);
+              }
+            }
+          };
+          window == null ? void 0 : window.DatacapWebToken.requestToken((_f = (_e = res.data) == null ? void 0 : _e.data) == null ? void 0 : _f.dctoken, "PaymentForm", tokenCallback);
+        } else {
+          setLoading(false);
+          console.log("res", (_g = res.data) == null ? void 0 : _g.data);
+        }
+      } catch (error2) {
+        setLoading(false);
+        console.log(error2);
+      }
+    }
+  };
+  const handleCardFormat = (numericValue) => {
+    const cleaned = ("" + numericValue).replace(/\D/g, "");
+    const match = cleaned.match(/^(\d{4})(\d{4})(\d{4})(\d{4})$/);
+    if (match) {
+      return `${match[1]} ${match[2]} ${match[3]} ${match[4]}`;
+    }
+    return numericValue;
+  };
+  const handleCardNumberChange = (value) => {
+    setError((prev) => __spreadProps(__spreadValues({}, prev), { card_number: "" }));
+    if (value && value.match(/[a-zA-Z]/)) {
+      setError((prev) => __spreadProps(__spreadValues({}, prev), {
+        card_number: "Invalid input. Please enter only numbers."
+      }));
+    } else if (value.length > 12 && !(window == null ? void 0 : window.DatacapWebToken.validateCardNumber(value == null ? void 0 : value.replaceAll(" ", "")))) {
+      setError((prev) => __spreadProps(__spreadValues({}, prev), {
+        card_number: "Invalid Card Number"
+      }));
+    } else if (!value.length) {
+      setError((prev) => __spreadProps(__spreadValues({}, prev), {
+        card_number: "Card Number required"
+      }));
+    } else {
+      setError({});
+    }
+  };
+  const handleMonthChange = (value) => {
+    setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_month: "" }));
+    if (/^\d{0,2}$/.test(value) && (value === "" || parseInt(value, 10) >= 1 && parseInt(value, 10) <= 12)) {
+      setError({});
+    } else if (!value.length) {
+      setError((prev) => __spreadProps(__spreadValues({}, prev), {
+        exp_month: "Month is required"
+      }));
+    } else {
+      setError((prev) => __spreadProps(__spreadValues({}, prev), {
+        exp_month: "Value should be between 1 and 12"
+      }));
+    }
+  };
+  const handleYearChange = (value) => {
+    setError((prev) => __spreadProps(__spreadValues({}, prev), { exp_year: "" }));
+    if (window == null ? void 0 : window.DatacapWebToken.validateExpirationDate(formData.exp_month, value)) {
+      setError({});
+    } else if (!value.length) {
+      setError((prev) => __spreadProps(__spreadValues({}, prev), {
+        exp_year: "Year is required"
+      }));
+    } else {
+      setError((prev) => __spreadProps(__spreadValues({}, prev), {
+        exp_year: "Invalid Expiration Date."
+      }));
+    }
+  };
+  const handleCVVChange = (value) => {
+    setError((prev) => __spreadProps(__spreadValues({}, prev), { cvv: "" }));
+    if (window == null ? void 0 : window.DatacapWebToken.validateCVV(value)) {
+      setError({});
+    } else if (!value.length) {
+      setError((prev) => __spreadProps(__spreadValues({}, prev), {
+        cvv: "CVV is required"
+      }));
+    } else {
+      setError((prev) => __spreadProps(__spreadValues({}, prev), {
+        cvv: "Invalid CVV."
+      }));
+    }
+  };
+  const handleChange = (e) => {
+    const token = e.target.getAttribute("data-token") || "";
+    const value = e.target.value;
+    setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [token]: value }));
+    if (token === "card_number") {
+      handleCardNumberChange(value);
+    }
+    if (token === "exp_month") {
+      handleMonthChange(value);
+    }
+    if (token === "exp_year") {
+      handleYearChange(value);
+    }
+    if (token === "cvv") {
+      handleCVVChange(value);
+    }
+  };
+  useEffect(() => {
+    const scriptId = "my-script";
+    const existingScript = document.getElementById(scriptId);
+    if (!existingScript) {
+      const script = document.createElement("script");
+      script.src = "https://token-cert.dcap.com/v1/client";
+      script.id = scriptId;
+      script.async = true;
+      script.onload = () => {
+        if (typeof window !== "undefined" && window.DatacapWebToken) {
+          console.log("DatacapWebToken", window.DatacapWebToken);
+        } else {
+          console.log("DatacapWebToken is not loaded yet.");
+        }
+      };
+      document.head.appendChild(script);
+    }
+    return () => {
+      const script = document.getElementById(scriptId);
+      if (script) {
+        document.head.removeChild(script);
+      }
+    };
+  }, []);
+  const handleClose = () => {
+    setShow(false);
+  };
+  const handleOpen = () => {
+    console.log("open");
+    setShow(true);
+  };
+  console.log(show, "open");
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: { width: "100%", textAlign: "center" } }, /* @__PURE__ */ React.createElement(Button, { onClick: handleOpen }, "Show")), /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      show,
+      onHide: handleClose,
+      backdrop: "static",
+      keyboard: false,
+      size: "lg"
+    },
+    /* @__PURE__ */ React.createElement(Modal.Body, null, /* @__PURE__ */ React.createElement("div", { className: "bg-black" }, /* @__PURE__ */ React.createElement("div", { className: "container bg-black" }, /* @__PURE__ */ React.createElement("div", { className: "row bg-light no-gutters" }, /* @__PURE__ */ React.createElement("div", { className: "col-sm-12" }, /* @__PURE__ */ React.createElement("div", { className: "bd-example bd-example-tabs right-tabs mttabs m-3 " }, /* @__PURE__ */ React.createElement("div", { className: "payment-popup" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "close-pop",
+        onClick: () => {
+          setShow(false);
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: 37,
+          height: 37,
+          viewBox: "0 0 21 21"
+        },
+        /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            d: "m7.5 7.5l6 6m0-6l-6 6"
+          }
+        )
+      )
+    ), /* @__PURE__ */ React.createElement("div", { className: "row" }, /* @__PURE__ */ React.createElement("div", { className: "comp-name" }, /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: "https://invoicestaging.skysystemz.com/assets/products/65c49a2740ff1.png",
+        alt: "",
+        className: "client-logo"
+      }
+    )), /* @__PURE__ */ React.createElement("div", { className: "" }, /* @__PURE__ */ React.createElement("div", { id: "Checkout", className: "inline" }, /* @__PURE__ */ React.createElement("div", { className: "header" }, /* @__PURE__ */ React.createElement("h1", null, "Pay"), /* @__PURE__ */ React.createElement(
+      "i",
+      {
+        className: "fa fa-qrcode fa-2x",
+        id: "qrIcon",
+        title: "Show QR Code",
+        onClick: () => setToggleQr(!toggleQr)
+      }
+    )), /* @__PURE__ */ React.createElement("div", { id: "qrCode", style: {
+      display: toggleQr ? "block" : "none"
+    } }, /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARQAAAEUCAYAAADqcMl5AAAAAklEQVR4AewaftIAABJaSURBVO3BQY7gRhLAQFLo/3+ZO8c8FSCoemwvMsL+YK21LnhYa61LHtZa65KHtda65GGttS55WGutSx7WWuuSh7XWuuRhrbUueVhrrUse1lrrkoe11rrkYa21LnlYa61LHtZa65KHtda65IePVP6miknlpGJSualiUjmpOFGZKk5UpopJ5YuKE5WpYlI5qZhU3qiYVKaKSeWkYlI5qXhD5aRiUvmbKr54WGutSx7WWuuSh7XWuuSHyypuUvlNFW+oTCpTxRsqU8UXKlPFicqJylRxonJScVLxhspU8UbFGxX/pIqbVG56WGutSx7WWuuSh7XWuuSHX6byRsVNKlPFpPJGxW9SmSreqJhUTiomlROVk4ovVL5QOak4UTlR+TdReaPiNz2stdYlD2utdcnDWmtd8sN/XMWkMlVMKlPFpHKiMlWcqJxUTCqTyk0Vk8pJxaQyVUwqN1WcqEwVk8qk8kXFpPJGxaTy/+RhrbUueVhrrUse1lrrkh/+z6lMFScVN1VMKpPKVDGpTBWTyknFFyonKlPFpDJVTConKjdVnKhMFZPKScWkMqlMFf9PHtZa65KHtda65GGttS754ZdV/CaVqWJS+UJlqjhROamYVCaVE5WpYlKZKt6oeEPlpGJSmSreUJkq3lCZKt6omFTeqLip4t/kYa21LnlYa61LHtZa65IfLlP5L1GZKt5QmSomlTcqJpWpYlKZKiaVqeINlaniDZWpYlKZKiaVqWJSmSpOKiaVqWJSmSpuUpkqTlT+zR7WWuuSh7XWuuRhrbUu+eGjin+zipOKSeWNikllqjipmFS+UJkqJpU3Kr6omFROVN6omFSmikllqphUpopJZaqYVKaKSeWNiv+Sh7XWuuRhrbUueVhrrUvsD36RyhsVk8pUMamcVJyofFHxhcpJxaQyVUwqU8Wk8jdVnKhMFZPKGxVvqJxUnKhMFScqN1WcqLxR8cXDWmtd8rDWWpc8rLXWJT98pDJV3FQxqUwVN1VMKicqU8WkMlWcVJxUTCq/qeJE5Q2VqeKkYlI5UZkqJpWp4kTlDZWTihOVqeJE5Y2K3/Sw1lqXPKy11iUPa611yQ8fVZxUTConKicVk8pU8UbFScWk8jep/E0Vk8pJxRsVb6i8UTGpTBUnKlPFTSonFZPKVDFVTCpTxaRyUvHFw1prXfKw1lqXPKy11iU//GUVk8pJxRcqU8VvUjlRmSomlZOKSWWqmFS+qJhU3lA5qZhU/iaVE5UvKr6omFSmiqliUpkqJpWbHtZa65KHtda65GGttS754TKVqWJSmSpOVP5JKlPFicobKlPFb6qYVCaV31TxRcWkMqmcqEwVk8pJxRcVb6icqLyhMlXc9LDWWpc8rLXWJQ9rrXWJ/cEHKlPFicpJxYnKVDGp/JMqTlT+pooTlTcqTlTeqDhRmSq+UDmpOFH5omJSeaNiUjmpOFGZKr54WGutSx7WWuuSh7XWuuSHjyomlaliqphUTlTeqJhUpopJZap4Q+WmihOVk4oTlTcq3qg4UZlUpoqp4kTljYo3VKaKSeWkYlI5qbhJZar4TQ9rrXXJw1prXfKw1lqX/PCRyhcVk8pUMalMKlPFFyonFW+o3FRxonJSMam8ofJGxUnFpPJGxRcqb6icVEwqU8WJylQxqZxUTCp/08Naa13ysNZalzystdYl9gf/IionFScqU8WJylQxqbxRcaIyVZyoTBWTylQxqZxUnKhMFZPKVDGpnFR8oTJVTConFZPKVDGpTBVfqEwVb6icVJyoTBVfPKy11iUPa611ycNaa13ywy9TmSomlanib6qYVE4qJpUTlTdUTlS+qDhROVGZKiaVk4pJ5aRiUvmiYlKZKk4qJpU3KqaKSeWLin/Sw1prXfKw1lqXPKy11iX2Bx+oTBWTyk0Vk8pUMalMFb9J5Y2KE5XfVDGpTBVfqJxUTConFW+oTBUnKjdVTConFW+ofFFx08Naa13ysNZalzystdYl9gcfqEwV/2Yqb1RMKlPFFypTxRsqU8WkMlVMKlPFv5nKGxVvqEwVk8obFW+oTBWTyknFP+lhrbUueVhrrUse1lrrkh8+qphUpopJZao4UZkqJpWp4o2KNyomlTcqTlTeqJhUvlA5qThRmSomlaliUjmp+ELlpoovVKaKSeWkYlJ5o+Kmh7XWuuRhrbUueVhrrUvsDz5QeaPiJpWTiknli4ovVE4qJpWp4kRlqphUTireUJkqJpU3Kr5QmSpOVE4qTlTeqDhRmSr+Sx7WWuuSh7XWuuRhrbUu+eGjihOVE5WpYlKZKk4qvqi4SeWLihOVqWJSmSpOVN6oOKm4SeWkYlKZKk4q3qh4Q2WqmComlaliUvmi4qaHtda65GGttS55WGutS374SGWqOFF5o2JSmSomlZOKE5WpYlI5qZgqTlQmlaliUvlNFScqX6hMFZPKGxWTylQxqUwVk8pJxYnKVDFV3FTxhsqkMlV88bDWWpc8rLXWJQ9rrXXJDx9VTCpTxRcqU8WkMlW8oTJVnFR8ofKGylTxhcpU8YXKVPGGylRxonJSMal8UXGiMlWcqEwVb6j8mz2stdYlD2utdcnDWmtd8sNlFW+onFRMKm+oTBU3qZxUTBVvqPybVLyhMlVMKpPKVDFVTCpvVEwqU8WkMlV8UTGpnFScqJxUTCq/6WGttS55WGutSx7WWusS+4MPVKaKSWWqmFS+qJhUpoo3VE4qTlS+qJhUpopJZaq4SWWqOFE5qZhUpooTlZOKL1SmiknlN1VMKl9U/E0Pa611ycNaa13ysNZal/xwmcqJyhsVb1T8m1RMKm9UTCpvqEwVk8pJxYnKScWkMlVMKlPFVDGpnKhMFZPKicpUcZPKScUbKpPKGxVfPKy11iUPa611ycNaa13yw2UVk8oXKm9UTCpTxRsVb1RMKlPFpDKpvFExqdyk8oXKVDGp/KaKSWWqeEPljYo3VG6qmFSmipse1lrrkoe11rrkYa21Lvnho4pJ5YuKN1TeUPlCZaqYVE5UpopJZao4UXlD5aTiDZWTipOKSWVSOamYVL5QOan4TRVvqEwVk8pUMalMFV88rLXWJQ9rrXXJw1prXfLDZRUnKm+oTBUnKlPFGyqTyonKVDGp3KRyUjGpTBWTyonKVPGFylQxVZyoTCpTxYnKpDJVvKFyUjGpvKEyVbxRMalMFTc9rLXWJQ9rrXXJw1prXfLDRyq/qeJvqjhROVH5omJSmSreqPii4o2KL1SmipOKE5Wp4jdV3FTxhspJxaQyVXzxsNZalzystdYlD2utdYn9wT9I5aaKE5WbKiaVNyreUDmpOFH5TRWTyknFFypTxRsqJxWTylTxhspvqjhRmSpuelhrrUse1lrrkoe11rrE/uADlS8q/p+oTBV/k8pJxYnKVDGpTBV/k8pJxaQyVdykMlXcpDJVnKicVEwqU8UXD2utdcnDWmtd8rDWWpf8cFnFicqkclPFicpUMan8k1S+qJhUTlSmipOKSWWqmFSmijdUpoovVN6o+ELlpGJSmSreqPgnPay11iUPa611ycNaa13yw2Uqb1RMKlPFicqkMlV8UXGiMlWcqEwVU8WJyonKicpUcaLyN6lMFZPKVHFSMalMFZPKGxUnFZPKScWkMlWcqJxU/KaHtda65GGttS55WGutS374yyreUJkqTipOKt5QmSreUPlC5TepfFHxN1VMKlPFpDJVfKEyVUwqU8VUMam8oTJVTBX/pIe11rrkYa21LnlYa61L7A8+UJkqJpUvKiaVqeINlaliUpkqJpWpYlKZKiaVNypuUpkqJpUvKm5S+aJiUpkq/iaVNypOVKaKN1Smii8e1lrrkoe11rrkYa21Lvnhl1VMKlPFpDKp/E0Vk8o/SWWqmFSmiknlpooTlZOKSeWNiknlRGWqOFE5qfiiYlI5UTmpmFSmikllqrjpYa21LnlYa61LHtZa6xL7gw9UTiomlaniDZWp4kTli4ovVKaKL1SmiknlpOJE5aTiDZWTiknlpOINlTcqJpUvKiaVqeILlZOKv+lhrbUueVhrrUse1lrrkh8+qnijYlKZKiaVLyomlaniDZWp4guV31RxonJScaJyUjGpTCpvqEwVb1ScqHxRMalMFZPKVDGpTBU3qUwVXzystdYlD2utdcnDWmtd8sNHKlPFicobFZPKpDJVTCpTxd9UcVLxhcpNFScqU8UXFZPKScWJylQxqZxUTCpTxaQyqUwVk8qJyonKTRU3Pay11iUPa611ycNaa13yw0cVk8pJxaQyqZxUTConFW+onFS8ofJGxaTyhcpJxaRyUnGiclLxRsWkMlWcqEwVJypTxaQyVUwqX1RMKlPFFyonFV88rLXWJQ9rrXXJw1prXfLDX6ZyUnGTylQxqZxUvKHyRsUXFScqU8UXKicVJyonFZPKVHGTyonKVHFS8YXKFypTxVTxmx7WWuuSh7XWuuRhrbUusT+4SGWqOFF5o+INlaliUnmj4kRlqphUTireUDmpmFSmit+kMlVMKicV/2YqU8UXKicV/2YPa611ycNaa13ysNZal/zwy1Smijcq3lCZKk4qvlCZKiaVN1SmikllqjhRmSreUHmjYqq4SWWqOFGZKt5QmSpOVKaKSeWkYlI5UZkq/kkPa611ycNaa13ysNZal9gffKAyVZyoTBWTyhsVX6hMFZPKVHGiclLxhcpJxaRyUnGiMlWcqJxU3KRyUvGFylQxqXxRMam8UTGpTBWTyknFFw9rrXXJw1prXfKw1lqX2B98oHJSMamcVLyhMlVMKlPFpHJS8ZtUTip+k8pUMamcVEwqU8XfpDJVTCpTxaRyUjGpTBWTylQxqZxU/Jc8rLXWJQ9rrXXJw1prXfLDZRVvVJyonFRMKjepTBUnKlPFpHJScaIyVZyovKEyVbxRMalMFScqU8WJylTxhspUMalMKlPFGypTxYnKVDGp3FTxxcNaa13ysNZalzystdYlP/wylaniRGWqmFS+UHmjYlK5qeILlTcqTlTeUJkqvqg4UZkqJpWpYqp4o+INlaniROUNlaniDZXf9LDWWpc8rLXWJQ9rrXXJDx9VvKHyhsobFV+onFRMKl+oTBU3VUwqU8VUMam8ofKGylQxqZyoTBWTylQxqZxUTCpTxVQxqZxUTCpTxRsqU8Xf9LDWWpc8rLXWJQ9rrXXJDx+pvFExqUwVJyo3qUwVk8obFZPKFyonFZPKGypTxUnFpPKbKm5SmSomld9UMam8oXJScVIxqdz0sNZalzystdYlD2utdckPf5nKVHGiMlX8JpWp4ouKE5VJZaqYVH6TyonKGxWTyonKScWk8kbFpHKiMlVMKlPFicobKv8lD2utdcnDWmtd8rDWWpfYH/yHqUwVv0llqjhRmSpOVKaKSWWqmFSmihOVqeINlaliUpkqJpWTikllqjhROak4UfmbKt5QOan4mx7WWuuSh7XWuuRhrbUu+eEjlb+pYqqYVE4q3lCZKiaVL1SmikllqphUpooTlTdUporfVHFSMam8UTGpTBUnFTepnKhMFW+onFTc9LDWWpc8rLXWJQ9rrXXJD5dV3KTyRsWk8obKP0llqnhD5aaKN1SmipOKSWWqOKmYVKaKN1Smiknlb6p4o2JS+Zse1lrrkoe11rrkYa21Lvnhl6m8UfGGym+qmFROKiaVSWWqOFE5qZhUvlD5omJS+UJlqphUpopJ5aRiUnmjYlKZKiaVE5UvVN5QmSq+eFhrrUse1lrrkoe11rrkh/9zFZPKScVJxYnKVPGbVKaKSWWqmFROKiaVqeKkYlKZKk5UTiomlZOKk4qTikllqphUTipOVKaKm1RuelhrrUse1lrrkoe11rrkh/8zFZPKVDGpTConFZPKVDGpnFRMKlPFpDJVfFExqZxUnKi8oXJSMalMFVPFFyonFVPFpDJVnKhMFVPFpPJFxW96WGutSx7WWuuSh7XWuuSHX1bxmyomlaliUnmj4qRiUpkqJpWTipOKSWWqOFF5Q+WkYqqYVKaKSeVE5QuVqWJSmSreUJkqJpWTikllqpgq/s0e1lrrkoe11rrkYa21LvnhMpV/UsWkMlVMKicqJxVTxRcqU8VJxRsVJypTxRsqX1S8oTJVnKhMFZPKScVUMalMFScqU8WkclIxqfyTHtZa65KHtda65GGttS6xP1hrrQse1lrrkoe11rrkYa21LnlYa61LHtZa65KHtda65GGttS55WGutSx7WWuuSh7XWuuRhrbUueVhrrUse1lrrkoe11rrkYa21Lvkf/C+HzIiJCzEAAAAASUVORK5CYII=",
+        alt: "QRCode",
+        srcSet: ""
+      }
+    )), /* @__PURE__ */ React.createElement(
+      "form",
+      {
+        id: "PaymentForm",
+        className: "payment-form",
+        onSubmit: handleSubmit
+      },
+      /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type: "hidden",
+          id: "dctoken",
+          defaultValue: dcToken,
+          name: "dctoken"
+        }
+      ),
+      /* @__PURE__ */ React.createElement("div", { className: "form-group top-amnt" }, /* @__PURE__ */ React.createElement("div", { className: "amtleft" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "Amount" }, "Payment amount"), /* @__PURE__ */ React.createElement("div", { className: "amount-placeholder" }, /* @__PURE__ */ React.createElement("span", null, "$"), /* @__PURE__ */ React.createElement("span", null, " ", amount || 1, " "))), /* @__PURE__ */ React.createElement("div", { className: "card-row" }, /* @__PURE__ */ React.createElement("span", { className: "visa" }), /* @__PURE__ */ React.createElement("span", { className: "mastercard" }), /* @__PURE__ */ React.createElement("span", { className: "amex" }), /* @__PURE__ */ React.createElement("span", { className: "discover" }))),
+      /* @__PURE__ */ React.createElement("div", { className: "form-group" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "NameOnCard" }, "Name on card"), /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          "data-token": "name",
+          id: "NameOnCard",
+          className: "form-control required",
+          type: "text",
+          maxLength: 100,
+          placeholder: "name",
+          value: formData == null ? void 0 : formData.name,
+          onChange: handleChange
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          id: "NameOnCard-error",
+          style: { color: "red" }
+        }
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "form-group" }, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          "data-token": "card_number",
+          className: "null card-image form-control required",
+          type: "text",
+          maxLength: 19,
+          placeholder: "0000 0000 0000 0000",
+          value: handleCardFormat(formData == null ? void 0 : formData.card_number),
+          onChange: handleChange
+        }
+      ), error.card_number && /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          id: "card_number-error",
+          style: { color: "red" }
+        },
+        error.card_number
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          "data-token": "exp_month",
+          className: "form-control required",
+          type: "text",
+          placeholder: "MM",
+          maxLength: 2,
+          value: formData == null ? void 0 : formData.exp_month,
+          onChange: handleChange
+        }
+      ), error.exp_month && /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          id: "exp_month-error",
+          style: { color: "red" }
+        },
+        error.exp_month
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "expiry-date-group form-group" }, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          "data-token": "exp_year",
+          className: "form-control required",
+          type: "text",
+          placeholder: "YYYY",
+          maxLength: 4,
+          value: formData == null ? void 0 : formData.exp_year,
+          onChange: handleChange
+        }
+      ), error.exp_year && /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          id: "exp_year-error",
+          style: { color: "red" }
+        },
+        error.exp_year
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "security-code-group form-group" }, /* @__PURE__ */ React.createElement("div", { className: "input-container" }, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          "data-token": "cvv",
+          className: "form-control required",
+          type: "text",
+          maxLength: 4,
+          placeholder: "CVC",
+          value: formData == null ? void 0 : formData.cvv,
+          onChange: handleChange
+        }
+      ), /* @__PURE__ */ React.createElement("i", { id: "cvc", className: "fa fa-question-circle" })), error.cvv && /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          id: "cvv-error",
+          style: { color: "red" }
+        },
+        error.cvv
+      ), /* @__PURE__ */ React.createElement("div", { className: "cvc-preview-container two-card hide" }, /* @__PURE__ */ React.createElement("div", { className: "amex-cvc-preview" }), /* @__PURE__ */ React.createElement("div", { className: "visa-mc-dis-cvc-preview" }))),
+      /* @__PURE__ */ React.createElement("div", { className: "zip-code-group form-group" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "ZIPCode" }, "Postal code"), /* @__PURE__ */ React.createElement("div", { className: "input-container" }, /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          id: "ZIPCode",
+          "data-token": "zip",
+          className: "form-control required",
+          type: "text",
+          maxLength: 7,
+          placeholder: "000000",
+          value: formData == null ? void 0 : formData.zip,
+          onChange: handleChange
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "a",
+        {
+          tabIndex: 0,
+          role: "button",
+          "data-toggle": "popover",
+          "data-trigger": "focus",
+          "data-placement": "left",
+          "data-content": "Enter the ZIP/Postal code for your credit card billing address."
+        },
+        /* @__PURE__ */ React.createElement("i", { className: "fa fa-question-circle" })
+      ), /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          id: "ZIPCode-error",
+          style: { color: "red", display: "none" }
+        },
+        "This field is required"
+      ))),
+      /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          id: "PayButton",
+          className: "btn btn-block btn-success submit-button",
+          type: "submit"
+        },
+        /* @__PURE__ */ React.createElement("span", { className: "submit-button-lock" }),
+        /* @__PURE__ */ React.createElement("span", { className: "align-middle" }, "Pay $", amount || 1)
+      )
+    ), /* @__PURE__ */ React.createElement("div", { className: "powerd-by-part", style: {
+      display: "flex",
+      fontSize: "12px",
+      textAlign: "center",
+      alignItems: "center",
+      justifyContent: "center",
+      margin: "8px 0 20px 0"
+    } }, /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 20,
+        height: 20,
+        viewBox: "0 0 26 26"
+      },
+      /* @__PURE__ */ React.createElement(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M23.633 5.028a1.074 1.074 0 0 0-.777-.366c-2.295-.06-5.199-2.514-7.119-3.477C14.551.592 13.768.201 13.18.098a1.225 1.225 0 0 0-.36.001c-.588.103-1.371.494-2.556 1.087c-1.92.962-4.824 3.416-7.119 3.476a1.08 1.08 0 0 0-.778.366a1.167 1.167 0 0 0-.291.834c.493 10.023 4.088 16.226 10.396 19.831c.164.093.346.141.527.141s.363-.048.528-.141c6.308-3.605 9.902-9.808 10.396-19.831a1.161 1.161 0 0 0-.29-.834zM18.617 8.97l-5.323 7.855c-.191.282-.491.469-.788.469c-.298 0-.629-.163-.838-.372l-3.752-3.753a.656.656 0 0 1 0-.926l.927-.929a.658.658 0 0 1 .926 0l2.44 2.44l4.239-6.257a.657.657 0 0 1 .91-.173l1.085.736a.657.657 0 0 1 .174.91z"
+        }
+      )
+    ), "Secure payments powered by Fractal", /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: "https://ui.fractalpay.com/favicon.ico",
+        alt: "Fractal logo",
+        className: "powered-logo",
+        style: {
+          width: "18px",
+          height: "18px",
+          float: "right",
+          padding: "2px",
+          background: "#000",
+          borderRadius: "4px",
+          marginLeft: "5px"
+        }
+      }
+    ))))))))))))
+  ));
+}
+export {
+  PaywithFractal
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinerohit11/testwidget",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "private": false,
   "scripts": {
     "dev": "next dev",
@@ -28,6 +28,7 @@
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "15.0.3",
+    "style-inject": "^0.3.0",
     "tsup": "^8.3.5",
     "typescript": "^5"
   },