breezi-js
Version:
Vanilla JavaScript SDK for Breezi PayPal integration
3 lines (2 loc) • 4.54 kB
JavaScript
!function(){"use strict";class e{constructor(e){this.element=e,this.config=this.parseConfig(e),this.init()}parseConfig(e){const n=e.dataset;if(!n.breeziPaypal)throw new Error("Missing data-breezi-paypal attribute");if(!n.clientId)throw new Error("Missing data-client-id attribute");if(!n.amount)throw new Error("Missing data-amount attribute");return{clientId:n.clientId,amount:n.amount,currency:n.currency||"USD",environment:n.environment||"sandbox",onSuccess:n.onSuccess,onError:n.onError,onCancel:n.onCancel}}async init(){try{this.showLoading(),await this.loadPayPalSDK(),await this.initPayPalButton()}catch(e){this.showError(e)}}async loadPayPalSDK(){return new Promise((e,n)=>{if(window.paypal)return void e();const t=document.createElement("script");t.src=`https://www.paypal.com/sdk/js?client-id=${this.config.clientId}¤cy=${this.config.currency}&components=buttons`,t.onload=()=>e(),t.onerror=()=>n(new Error("Failed to load PayPal SDK")),document.head.appendChild(t)})}async initPayPalButton(){const e=document.createElement("div");e.id=`breezi-paypal-${Date.now()}`,this.element.innerHTML="",this.element.appendChild(e),window.paypal.Buttons({createOrder:(e,n)=>n.order.create({purchase_units:[{amount:{value:this.config.amount,currency_code:this.config.currency}}]}),onApprove:async(e,n)=>{try{const e=await n.order.capture();this.handleSuccess(e)}catch(e){this.handleError(e)}},onError:e=>{this.handleError(new Error(`PayPal Error: ${e}`))},onCancel:()=>{this.handleCancel()},style:{color:"blue",shape:"rect",label:"paypal",height:40}}).render(e)}showLoading(){this.element.innerHTML='\n <div style="display: flex; align-items: center; justify-content: center; padding: 12px 24px; background: #f3f4f6; border-radius: 6px; color: #6b7280;">\n <div style="width: 16px; height: 16px; border: 2px solid #d1d5db; border-top: 2px solid #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 8px;"></div>\n Loading PayPal...\n </div>\n <style>\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n </style>\n '}showError(e){this.element.innerHTML=`\n <div style="padding: 12px 24px; background: #fee2e2; border: 1px solid #fecaca; border-radius: 6px; color: #dc2626;">\n <strong>Payment Error:</strong> ${e.message}\n </div>\n `,this.handleError(e)}handleSuccess(e){console.log("✅ Payment successful:",e),this.element.innerHTML=`\n <div style="padding: 12px 24px; background: #d1fae5; border: 1px solid #a7f3d0; border-radius: 6px; color: #065f46;">\n <strong>✅ Payment Successful!</strong><br>\n Payment ID: ${e.id}<br>\n Amount: ${e.purchase_units[0].amount.value} ${e.purchase_units[0].amount.currency_code}\n </div>\n `,this.config.onSuccess&&"function"==typeof window[this.config.onSuccess]&&window[this.config.onSuccess](e),this.element.dispatchEvent(new CustomEvent("breezi:payment:success",{detail:e,bubbles:!0}))}handleError(e){console.error("❌ Payment error:",e),this.config.onError&&"function"==typeof window[this.config.onError]&&window[this.config.onError](e),this.element.dispatchEvent(new CustomEvent("breezi:payment:error",{detail:e,bubbles:!0}))}handleCancel(){console.log("❌ Payment cancelled by user"),this.element.innerHTML='\n <div style="padding: 12px 24px; background: #fef3c7; border: 1px solid #fde68a; border-radius: 6px; color: #92400e;">\n <strong>Payment Cancelled</strong><br>\n The payment was cancelled by the user.\n </div>\n ',this.config.onCancel&&"function"==typeof window[this.config.onCancel]&&window[this.config.onCancel](),this.element.dispatchEvent(new CustomEvent("breezi:payment:cancel",{bubbles:!0}))}}function n(){document.querySelectorAll("[data-breezi-paypal]").forEach(n=>{try{new e(n)}catch(e){console.error("Failed to initialize Breezi widget:",e)}})}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",n):n();new MutationObserver(n=>{n.forEach(n=>{n.addedNodes.forEach(n=>{if(n.nodeType===Node.ELEMENT_NODE){const t=n;if(t.hasAttribute("data-breezi-paypal"))try{new e(t)}catch(e){console.error("Failed to initialize Breezi widget:",e)}t.querySelectorAll("[data-breezi-paypal]").forEach(n=>{try{new e(n)}catch(e){console.error("Failed to initialize Breezi widget:",e)}})}})})}).observe(document.body,{childList:!0,subtree:!0}),window.BreeziPayPalWidget=e,window.initializeBreeziWidgets=n}();
//# sourceMappingURL=sdk.js.map