@100pay-hq/checkout
Version:
accept crypto payments on your website and apps in 3 mins
1 lines • 6.53 kB
JavaScript
let charge;const shop100PayStyle=e=>`\n #show100Pay {\n top: 0;\n left: 0;\n position: fixed;\n background-color: #000000c2;\n width: 100%;\n height: 100%;\n z-index: 99999;\n pointer-events: auto;\n display: none;\n }\n .show100Pay {\n transition: 0.3s;\n height: 100%;\n width: 100%;\n max-width: ${e?.maxWidth||400};\n max-height: ${e?.maxHeight||"unset"};\n left: 50%;\n transform: translateX(-50%);\n position: fixed;\n z-index: 1050;\n top: 100%;\n padding-top: 0;\n border-radius: 16px 16px 0 0;\n overflow: hidden;\n}\n.show100Pay .show100Pay_modal {\n height: calc(100% - 66px);\n width: 100%;\n border: none;\n border-radius: 16px 16px 0 0;\n padding-bottom: 0;\n }\n .show100Pay.show {\n top: 66px;\n }\n #close_100pay_btn {\n padding: 15px 0;\n display: flex;\n color: white;\n max-width: ${e?.maxWidth||400};\n text-align: right;\n margin: auto;\n text-transform: uppercase;\n justify-content: end;\n align-items: center;\n }\n .img_wrapper {\n display: flex;\n gap: 8px;\n }\n .connected_img, .vic_hand_img {\n height: 20px;\n }\n .vic_hand_img {\n animation: shake 0.2s ease-in-out infinite alternate-reverse;\n }\n .close_100pay_btn {\n color: #fff;\n text-align: right;\n outline: none;\n border: none;\n padding: 6px 12px;\n border-radius: 8px;\n font-weight: 700;\n cursor: pointer;\n }\n .body-overflow-hidden {\n overflow: hidden;\n }\n @keyframes shake {\n 0% {\n transform: rotate(15deg);\n }\n 100% {\n transform: rotate(-15deg);\n }\n }\n\n`;class PayWith100Pay{constructor(e){}resolveCheckoutOrigin(){if("undefined"==typeof window||!window.location)return null;const{origin:e,host:t}=window.location;return e&&"null"!==e?e:t?`https://${t}`:null}normalizeHostFromOrigin(e){if(!e)return null;try{return new URL(e).hostname}catch{return null}}applyOriginMetadata(e){const t=e.origin||e.target_origin||e.targetOrigin||e?.metadata?.oauthOrigin||this.resolveCheckoutOrigin();if(!t)return e;const n={...e};n.metadata={...n.metadata||{}},n.metadata.oauthOrigin=t;const a=this.normalizeHostFromOrigin(t);return a&&!n.metadata.clientHostname&&(n.metadata.clientHostname=a),n}appendStyle(e){let t=document.createElement("STYLE");t.id="100pay_style",t.type="text/css",t.appendChild(document.createTextNode(e)),document.head.appendChild(t)}setup(e,t){const n=this.applyOriginMetadata(e||{});charge={...n};let a=charge.api_key;delete charge.callback,delete charge.api_key,delete charge.origin,delete charge.target_origin,delete charge.targetOrigin;let o=charge;const i=o?.metadata?.oauthOrigin||this.resolveCheckoutOrigin();fetch("https://api.100pay.co/api/v1/pay/charge",{method:"POST",headers:{"Content-Type":"application/json","api-key":a,...i?{"x-checkout-origin":i}:{}},body:JSON.stringify(o)}).then(async e=>{if(!e.ok){const t=await e.text();let n;try{n=JSON.parse(t)}catch{n={message:t,status:e.status}}throw new Error(`API Error (${e.status}): ${n.message||t}`)}const t=await e.text();try{return JSON.parse(t)}catch{return{message:t}}}).then(e=>{this.createElements(e,t)}).catch(e=>{charge.onError(e)})}createElements(e,t){this.appendStyle(shop100PayStyle(t));let n=document.createElement("div"),a=document.createElement("div"),o=document.createElement("iframe"),i=document.createElement("p"),r=document.createElement("div"),s=document.createElement("img"),d=document.createElement("img"),l=document.createElement("button");const c=document.createTextNode("Close");n.insertAdjacentHTML("afterbegin",'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="271px" height="271px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">\n <path fill="none" stroke="#ffffff" stroke-width="4" stroke-dasharray="220.66647827148438 35.92244995117187" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke-linecap="round" style="transform:scale(0.4);transform-origin:50px 50px">\n <animate attributeName="stroke-dashoffset" repeatCount="indefinite" dur="1.4492753623188404s" keyTimes="0;1" values="0;256.58892822265625"></animate>\n </path>\n <text x="50%" y="50%" fill="#ffffff" dy=".3em" style="font-size:24px;/* font-weight:bold; */text-anchor:middle;transform: scale(0.2);transform-origin: 50px 75px;"> Connecting you to the Blockchain </text>\n </svg>'),l.appendChild(c),n.id="100pay_loader",i.id="close_100pay_btn",r.className="img_wrapper",s.className="connected_img",d.className="vic_hand_img",d.src="https://res.cloudinary.com/estaterally/image/upload/v1647615169/100Pay/victory-hand_zaueti.svg",s.src="https://res.cloudinary.com/estaterally/image/upload/v1647617288/100Pay/100pay-connected_dov5km.svg",l.className="btn text-white close_100pay_btn",l.id="close_100pay_modal",i.appendChild(l),o.className="show100Pay_modal",o.id="show100PayModal",a.className="show100Pay",a.id="show100PayWrapper",a.appendChild(o),document.body.classList.add("body-overflow-hidden");const p=document.getElementById("show100Pay");let h=p;if(console.log({shop100TargetEl:h,targetEl:p}),!p){const e=document.createElement("div");e.id="show100Pay",document.body.appendChild(e),h=e}window.shop100TargetEl=h,h.style="display: block;",h.appendChild(i),h.appendChild(n),h.appendChild(a),document.getElementById("close_100pay_modal").addEventListener("click",()=>{confirm("Are you sure you want to close this payment?")&&this.closeModal(charge)});let m=document.getElementById("show100PayModal");m.addEventListener("load",()=>{document.getElementById("show100PayWrapper").classList.add("show"),window.addEventListener("message",e=>{const t=e.data;if(console.log({type:typeof t,data:t}),"string"!=typeof t)return;let n=t.split("_");2===n.length&&"100PAY-PAYMENT-REF"===n[0]?charge.onPayment(n[1]):charge.onPayment(e)})}),m.src=e.hosted_url}newPayment(e,t){e.onPayment(t)}closeModal(e){document.getElementById("show100PayWrapper").classList.remove("show");let t=document.getElementById("show100PayWrapper"),n=document.getElementById("close_100pay_btn");document.getElementById("100pay_loader").remove(),t.remove(),n.remove(),shop100TargetEl.style="display: none;",document.body.classList.remove("body-overflow-hidden"),document.getElementById("100pay_style").remove(),e.onClose()}}const shop100Pay=new PayWith100Pay;"undefined"!=typeof window&&(window.shop100Pay=shop100Pay);export{shop100Pay};