@reevit/vue 0.2.0 → 0.2.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReevitCheckout.vue.d.ts","sourceRoot":"","sources":["../../src/components/ReevitCheckout.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ReevitCheckout.vue.d.ts","sourceRoot":"","sources":["../../src/components/ReevitCheckout.vue"],"names":[],"mappings":"AAyPA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAKhD,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,GAAG,cAAc,GAAG,eAAe,CAAC,EAAE,CAAC;IAC/D,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAqIF,iBAAS,cAAc;WAqNT,OAAO,IAA6B;;;;;YAXrB,GAAG;+BACG,GAAG;;;;EAerC;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;6FAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),u=require("@reevit/core");function Q(t){const a=t.toLowerCase();return a.includes("paystack")?"paystack":a.includes("hubtel")?"hubtel":a.includes("flutterwave")?"flutterwave":"paystack"}function W(t,a){return{id:t.id,clientSecret:t.client_secret,amount:t.amount,currency:t.currency,status:t.status,recommendedPsp:Q(t.provider),availableMethods:a.paymentMethods||["card","mobile_money"],connectionId:t.connection_id,provider:t.provider,feeAmount:t.fee_amount,feeCurrency:t.fee_currency,netAmount:t.net_amount,metadata:a.metadata}}function D(t){const{config:a,onSuccess:n,onError:l,onClose:p,onStateChange:c,apiBaseUrl:i}=t,o=e.ref(u.createInitialState()),k=new u.ReevitAPIClient({publicKey:a.publicKey,baseUrl:i}),m=s=>{o.value=u.reevitReducer(o.value,s)};e.watch(()=>o.value.status,s=>{c?.(s)});const y=async s=>{m({type:"INIT_START"});try{const r=a.reference||u.generateReference(),d=u.detectCountryFromCurrency(a.currency),M=s||a.paymentMethods?.[0]||"card",{data:O,error:T}=await k.createPaymentIntent({...a,reference:r},M,d);if(T){m({type:"INIT_ERROR",payload:T}),l?.(T);return}if(!O){const $={code:"INIT_FAILED",message:"No data received from API",recoverable:!0};m({type:"INIT_ERROR",payload:$}),l?.($);return}const J=W(O,{...a,reference:r});m({type:"INIT_SUCCESS",payload:J})}catch(r){const d={code:"INIT_FAILED",message:r instanceof Error?r.message:"Failed to initialize checkout",recoverable:!0,originalError:r};m({type:"INIT_ERROR",payload:d}),l?.(d)}},h=s=>{m({type:"SELECT_METHOD",payload:s})},b=async s=>{if(!(!o.value.paymentIntent||!o.value.selectedMethod)){m({type:"PROCESS_START"});try{const{data:r,error:d}=await k.confirmPayment(o.value.paymentIntent.id);if(d){m({type:"PROCESS_ERROR",payload:d}),l?.(d);return}const M={paymentId:o.value.paymentIntent.id,reference:s.reference||o.value.paymentIntent.metadata?.reference||"",amount:o.value.paymentIntent.amount,currency:o.value.paymentIntent.currency,paymentMethod:o.value.selectedMethod,psp:o.value.paymentIntent.recommendedPsp,pspReference:s.pspReference||r?.provider_ref_id||"",status:"success",metadata:s};m({type:"PROCESS_SUCCESS",payload:M}),n?.(M)}catch(r){const d={code:"PAYMENT_FAILED",message:r instanceof Error?r.message:"Payment failed",recoverable:!0,originalError:r};m({type:"PROCESS_ERROR",payload:d}),l?.(d)}}},I=async s=>{await b(s)},V=s=>{m({type:"PROCESS_ERROR",payload:s}),l?.(s)},f=()=>{m({type:"RESET"})},C=async()=>{if(o.value.paymentIntent&&o.value.status!=="success")try{await k.cancelPaymentIntent(o.value.paymentIntent.id)}catch{}m({type:"CLOSE"}),p?.()},E=e.computed(()=>o.value.status),R=e.computed(()=>o.value.paymentIntent),N=e.computed(()=>o.value.selectedMethod),B=e.computed(()=>o.value.error),v=e.computed(()=>o.value.result),_=e.computed(()=>o.value.status==="loading"||o.value.status==="processing"),S=e.computed(()=>o.value.status==="ready"||o.value.status==="method_selected"||o.value.status==="processing"),w=e.computed(()=>o.value.status==="success"),g=e.computed(()=>o.value.error?.recoverable??!1);return{status:e.readonly(E),paymentIntent:e.readonly(R),selectedMethod:e.readonly(N),error:e.readonly(B),result:e.readonly(v),initialize:y,selectMethod:h,processPayment:b,handlePspSuccess:I,handlePspError:V,reset:f,close:C,isLoading:e.readonly(_),isReady:e.readonly(S),isComplete:e.readonly(w),canRetry:e.readonly(g)}}const X={class:"reevit-method-selector"},Z={class:"reevit-amount-display"},ee={class:"reevit-methods-grid"},te=["onClick"],ne={class:"reevit-method-icon"},oe={class:"reevit-method-info"},re={class:"reevit-method-name"},ae={class:"reevit-method-description"},se={class:"reevit-method-radio"},le={key:0,class:"reevit-radio-inner"},j=e.defineComponent({__name:"PaymentMethodSelector",props:{methods:{},selected:{},amount:{},currency:{}},emits:["select"],setup(t,{emit:a}){const n=t,l=a,p=e.computed(()=>[{id:"card",name:"Card",description:"Visa, Mastercard, Maestro",icon:"💳"},{id:"mobile_money",name:"Mobile Money",description:"MTN, Vodafone, AirtelTigo",icon:"📱"},{id:"bank_transfer",name:"Bank Transfer",description:"Transfer directly from your bank",icon:"🏦"}].filter(c=>n.methods.includes(c.id)));return(c,i)=>(e.openBlock(),e.createElementBlock("div",X,[i[0]||(i[0]=e.createElementVNode("h3",{class:"reevit-section-title"},"Select Payment Method",-1)),e.createElementVNode("p",Z," Pay "+e.toDisplayString(e.unref(u.formatAmount)(t.amount,t.currency)),1),e.createElementVNode("div",ee,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,o=>(e.openBlock(),e.createElementBlock("button",{key:o.id,type:"button",class:e.normalizeClass(e.unref(u.cn)("reevit-method-card",t.selected===o.id&&"reevit-method-card--selected")),onClick:k=>l("select",o.id)},[e.createElementVNode("span",ne,e.toDisplayString(o.icon),1),e.createElementVNode("div",oe,[e.createElementVNode("span",re,e.toDisplayString(o.name),1),e.createElementVNode("span",ae,e.toDisplayString(o.description),1)]),e.createElementVNode("div",se,[t.selected===o.id?(e.openBlock(),e.createElementBlock("div",le)):e.createCommentVNode("",!0)])],10,te))),128))])]))}}),ce={class:"reevit-form-group"},ie=["disabled"],de={class:"reevit-network-selector"},ue={class:"reevit-networks-grid"},me=["onClick","disabled"],pe={key:0,class:"reevit-error-message"},ye=["disabled"],ve={key:0,class:"reevit-spinner"},he={key:1},A=e.defineComponent({__name:"MobileMoneyForm",props:{initialPhone:{},loading:{type:Boolean}},emits:["submit"],setup(t,{emit:a}){const n=t,l=a,p=e.ref(n.initialPhone||""),c=e.ref(null),i=e.ref(null);e.watch(p,m=>{const y=u.detectNetwork(m);y&&(c.value=y),i.value&&(i.value=null)});const o=()=>{if(!u.validatePhone(p.value)){i.value="Please enter a valid phone number";return}if(!c.value){i.value="Please select your mobile network";return}l("submit",{phone:p.value,network:c.value})},k=[{id:"mtn",name:"MTN",color:"#FFCC00"},{id:"vodafone",name:"Vodafone",color:"#E60000"},{id:"airteltigo",name:"AirtelTigo",color:"#005596"}];return(m,y)=>(e.openBlock(),e.createElementBlock("form",{class:"reevit-momo-form",onSubmit:e.withModifiers(o,["prevent"])},[e.createElementVNode("div",ce,[y[1]||(y[1]=e.createElementVNode("label",{class:"reevit-label",for:"reevit-phone"},"Phone Number",-1)),e.withDirectives(e.createElementVNode("input",{id:"reevit-phone","onUpdate:modelValue":y[0]||(y[0]=h=>p.value=h),type:"tel",class:e.normalizeClass(["reevit-input",{"reevit-input--error":i.value&&!e.unref(u.validatePhone)(p.value)}]),placeholder:"e.g. 024 123 4567",disabled:t.loading,autocomplete:"tel"},null,10,ie),[[e.vModelText,p.value]])]),e.createElementVNode("div",de,[y[2]||(y[2]=e.createElementVNode("label",{class:"reevit-label"},"Select Network",-1)),e.createElementVNode("div",ue,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(k,h=>e.createElementVNode("button",{key:h.id,type:"button",class:e.normalizeClass(e.unref(u.cn)("reevit-network-btn",c.value===h.id&&"reevit-network-btn--selected")),onClick:b=>c.value=h.id,disabled:t.loading},[e.createElementVNode("div",{class:"reevit-network-dot",style:e.normalizeStyle({backgroundColor:h.color})},null,4),e.createTextVNode(" "+e.toDisplayString(h.name),1)],10,me)),64))])]),i.value?(e.openBlock(),e.createElementBlock("p",pe,e.toDisplayString(i.value),1)):e.createCommentVNode("",!0),e.createElementVNode("button",{type:"submit",class:"reevit-submit-btn",disabled:t.loading||!p.value},[t.loading?(e.openBlock(),e.createElementBlock("span",ve)):(e.openBlock(),e.createElementBlock("span",he,"Continue"))],8,ye),y[3]||(y[3]=e.createElementVNode("p",{class:"reevit-secure-text"}," 🔒 Secure mobile money payment via Reevit ",-1))],32))}}),F=new Map;function P(t,a){const n=F.get(a);if(n)return n;const l=new Promise((p,c)=>{if(document.getElementById(a)){p();return}const i=document.createElement("script");i.id=a,i.src=t,i.async=!0,i.onload=()=>p(),i.onerror=()=>c(new Error(`Failed to load ${a} script`)),document.head.appendChild(i)});return F.set(a,l),l}function K(){return P("https://js.paystack.co/v1/inline.js","paystack-script")}function L(){return P("https://checkout.hubtel.com/js/hubtel-checkout.js","hubtel-script")}function z(){return P("https://checkout.flutterwave.com/v3.js","flutterwave-script")}function x(){return P("https://js.stripe.com/v3/","stripe-script")}function U(){return P("https://sdk.monnify.com/plugin/monnify.js","monnify-script")}async function H(t){if(await K(),!window.PaystackPop)throw new Error("Paystack script not loaded");window.PaystackPop.setup({key:t.key,email:t.email,amount:t.amount,currency:t.currency,ref:t.ref,metadata:t.metadata,callback:t.onSuccess,onClose:t.onClose}).openIframe()}async function q(t){if(await L(),!window.HubtelCheckout)throw new Error("Hubtel script not loaded");window.HubtelCheckout.initPay({clientId:t.clientId,purchaseDescription:t.purchaseDescription,amount:t.amount,callbackUrl:t.callbackUrl,customerPhone:t.customerPhone,customerEmail:t.customerEmail,onSuccess:t.onSuccess,onClose:t.onClose})}async function Y(t){if(await z(),!window.FlutterwaveCheckout)throw new Error("Flutterwave script not loaded");window.FlutterwaveCheckout({public_key:t.public_key,tx_ref:t.tx_ref,amount:t.amount,currency:t.currency,customer:t.customer,payment_options:t.payment_options,customizations:t.customizations,callback:t.callback,onclose:t.onclose})}async function G(t){if(await x(),!window.Stripe)throw new Error("Stripe.js not loaded");return window.Stripe(t)}async function ke(t){const n=await(await G(t.publishableKey)).confirmPayment({elements:t.elements,clientSecret:t.clientSecret,redirect:"if_required"});n.error?t.onError({message:n.error.message||"Payment failed"}):n.paymentIntent&&t.onSuccess({paymentIntentId:n.paymentIntent.id,status:n.paymentIntent.status})}async function be(t){if(await U(),!window.MonnifySDK)throw new Error("Monnify SDK not loaded");window.MonnifySDK.initialize({amount:t.amount,currency:t.currency,reference:t.reference,customerName:t.customerName,customerEmail:t.customerEmail,customerMobileNumber:t.customerPhone,apiKey:t.apiKey,contractCode:t.contractCode,paymentDescription:t.paymentDescription||"Payment",isTestMode:t.isTestMode??!1,metadata:t.metadata,onComplete:a=>{a.status==="SUCCESS"?t.onSuccess({transactionReference:a.transactionReference,paymentReference:a.paymentReference,...a}):t.onError?.({message:a.message||"Payment failed"})},onClose:t.onClose})}async function fe(t,a){t.onInitiated();try{const n=await fetch(a,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({phone_number:t.phoneNumber,amount:t.amount,reference:t.reference,description:t.description})});if(!n.ok){const c=(await n.json().catch(()=>({}))).message||"Failed to initiate M-Pesa payment";return t.onError({message:c}),{status:"failed",message:c}}const l=await n.json();return{status:"initiated",message:"Please check your phone and enter your M-Pesa PIN to complete the payment.",transactionId:l.checkout_request_id||l.transaction_id}}catch(n){const l=n instanceof Error?n.message:"Network error";return t.onError({message:l}),{status:"failed",message:l}}}const Ee=["disabled"],Se={key:0,class:"reevit-spinner"},we={class:"reevit-modal-body"},Pe={key:0,class:"reevit-loading-state"},Ce={key:1,class:"reevit-error-state"},Ne={key:2,class:"reevit-success-state"},_e={key:1,class:"reevit-method-form-container"},Me={key:2,class:"reevit-card-info"},Ie=["disabled"],Ve={key:0,class:"reevit-spinner"},Re={key:1},Be=e.defineComponent({__name:"ReevitCheckout",props:{publicKey:{},amount:{},currency:{},email:{},phone:{},reference:{},metadata:{},paymentMethods:{},theme:{},isOpen:{type:Boolean}},emits:["success","error","close"],setup(t,{emit:a}){const n=t,l=a,{status:p,paymentIntent:c,selectedMethod:i,error:o,isLoading:k,isReady:m,initialize:y,selectMethod:h,handlePspSuccess:b,handlePspError:I,close:V}=D({config:{publicKey:n.publicKey,amount:n.amount,currency:n.currency,email:n.email,phone:n.phone,reference:n.reference,metadata:n.metadata,paymentMethods:n.paymentMethods},onSuccess:s=>l("success",s),onError:s=>l("error",s),onClose:()=>l("close")}),f=e.ref(n.isOpen??!1);e.watch(()=>n.isOpen,s=>{s!==void 0&&(f.value=s)});const C=()=>{f.value=!0,c.value||y()},E=()=>{f.value=!1,V()},R=s=>{h(s)},N=async s=>{if(!c.value)return;const r=c.value.recommendedPsp;try{r==="paystack"?await H({key:n.publicKey,email:n.email||"",amount:n.amount,currency:n.currency,ref:c.value.id,onSuccess:d=>b(d),onClose:()=>{}}):r==="hubtel"?await q({clientId:n.publicKey,purchaseDescription:`Payment for ${n.amount} ${n.currency}`,amount:n.amount,customerPhone:s?.phone||n.phone,customerEmail:n.email,onSuccess:d=>b(d),onClose:()=>{}}):r==="flutterwave"&&await Y({public_key:n.publicKey,tx_ref:c.value.id,amount:n.amount,currency:n.currency,customer:{email:n.email||"",phone_number:s?.phone||n.phone},callback:d=>b(d),onclose:()=>{}})}catch(d){I({code:"BRIDGE_ERROR",message:d instanceof Error?d.message:"Failed to open payment gateway"})}},B=e.computed(()=>u.createThemeVariables(n.theme||{}));e.watch(f,s=>{s?document.body.style.overflow="hidden":document.body.style.overflow=""}),e.onUnmounted(()=>{document.body.style.overflow=""});const v=e.computed(()=>p.value),_=e.computed(()=>o.value),S=e.computed(()=>i.value),w=e.computed(()=>k.value),g=e.computed(()=>m.value);return(s,r)=>(e.openBlock(),e.createElementBlock("div",{class:"reevit-sdk-container",style:e.normalizeStyle(B.value)},[e.renderSlot(s.$slots,"default",{open:C,isLoading:w.value},()=>[e.createElementVNode("button",{type:"button",class:"reevit-pay-button",onClick:C,disabled:w.value},[w.value?(e.openBlock(),e.createElementBlock("span",Se)):e.renderSlot(s.$slots,"button-text",{key:1},()=>[r[1]||(r[1]=e.createTextVNode("Pay Now",-1))])],8,Ee)]),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[f.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"reevit-modal-overlay",onClick:e.withModifiers(E,["self"])},[e.createElementVNode("div",{class:e.normalizeClass(["reevit-modal-content",{"reevit-modal--dark":n.theme?.darkMode}])},[e.createElementVNode("button",{class:"reevit-modal-close",onClick:E,"aria-label":"Close"}," × "),r[9]||(r[9]=e.createElementVNode("div",{class:"reevit-modal-header"},[e.createElementVNode("h2",{class:"reevit-modal-title"},"Reevit Checkout"),e.createElementVNode("p",{class:"reevit-modal-subtitle"},"Secure payment powered by Reevit")],-1)),e.createElementVNode("div",we,[v.value==="loading"?(e.openBlock(),e.createElementBlock("div",Pe,[...r[2]||(r[2]=[e.createElementVNode("div",{class:"reevit-spinner reevit-spinner--large"},null,-1),e.createElementVNode("p",null,"Initializing payment...",-1)])])):v.value==="failed"&&_.value?(e.openBlock(),e.createElementBlock("div",Ce,[r[3]||(r[3]=e.createElementVNode("div",{class:"reevit-error-icon"},"⚠️",-1)),r[4]||(r[4]=e.createElementVNode("h3",null,"Payment Failed",-1)),e.createElementVNode("p",null,e.toDisplayString(_.value.message),1),e.createElementVNode("button",{class:"reevit-retry-btn",onClick:r[0]||(r[0]=d=>e.unref(y)())},"Retry")])):v.value==="success"?(e.openBlock(),e.createElementBlock("div",Ne,[r[5]||(r[5]=e.createElementVNode("div",{class:"reevit-success-icon"},"✅",-1)),r[6]||(r[6]=e.createElementVNode("h3",null,"Payment Successful",-1)),r[7]||(r[7]=e.createElementVNode("p",null,"Thank you for your payment.",-1)),e.createElementVNode("button",{class:"reevit-done-btn",onClick:E},"Done")])):g.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[v.value==="ready"||v.value==="method_selected"||v.value==="processing"?(e.openBlock(),e.createBlock(j,{key:0,methods:n.paymentMethods||["card","mobile_money"],selected:S.value,amount:n.amount,currency:n.currency,onSelect:R},null,8,["methods","selected","amount","currency"])):e.createCommentVNode("",!0),(v.value==="method_selected"||v.value==="processing")&&S.value==="mobile_money"?(e.openBlock(),e.createElementBlock("div",_e,[e.createVNode(A,{"initial-phone":n.phone,loading:v.value==="processing",onSubmit:N},null,8,["initial-phone","loading"])])):e.createCommentVNode("",!0),(v.value==="method_selected"||v.value==="processing")&&S.value==="card"?(e.openBlock(),e.createElementBlock("div",Me,[r[8]||(r[8]=e.createElementVNode("p",{class:"reevit-info-text"},"You will be redirected to our secure payment partner to complete your card payment.",-1)),e.createElementVNode("button",{class:"reevit-submit-btn",onClick:N,disabled:v.value==="processing"},[v.value==="processing"?(e.openBlock(),e.createElementBlock("span",Ve)):(e.openBlock(),e.createElementBlock("span",Re,"Proceed to Card Payment"))],8,Ie)])):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0)]),r[10]||(r[10]=e.createElementVNode("div",{class:"reevit-modal-footer"},[e.createElementVNode("div",{class:"reevit-trust-badges"},[e.createElementVNode("span",null,"PCI DSS Compliant"),e.createElementVNode("span",null,"•"),e.createElementVNode("span",null,"SSL Secure")])],-1))],2)])):e.createCommentVNode("",!0)]))],4))}});Object.defineProperty(exports,"ReevitAPIClient",{enumerable:!0,get:()=>u.ReevitAPIClient});Object.defineProperty(exports,"cn",{enumerable:!0,get:()=>u.cn});Object.defineProperty(exports,"createReevitClient",{enumerable:!0,get:()=>u.createReevitClient});Object.defineProperty(exports,"detectCountryFromCurrency",{enumerable:!0,get:()=>u.detectCountryFromCurrency});Object.defineProperty(exports,"detectNetwork",{enumerable:!0,get:()=>u.detectNetwork});Object.defineProperty(exports,"formatAmount",{enumerable:!0,get:()=>u.formatAmount});Object.defineProperty(exports,"formatPhone",{enumerable:!0,get:()=>u.formatPhone});Object.defineProperty(exports,"validatePhone",{enumerable:!0,get:()=>u.validatePhone});exports.MobileMoneyForm=A;exports.PaymentMethodSelector=j;exports.ReevitCheckout=Be;exports.confirmStripePayment=ke;exports.createStripeInstance=G;exports.initiateMPesaSTKPush=fe;exports.loadFlutterwaveScript=z;exports.loadHubtelScript=L;exports.loadMonnifyScript=U;exports.loadPaystackScript=K;exports.loadStripeScript=x;exports.openFlutterwaveModal=Y;exports.openHubtelPopup=q;exports.openMonnifyModal=be;exports.openPaystackPopup=H;exports.useReevit=D;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),u=require("@reevit/core");function Q(t){const a=t.toLowerCase();return a.includes("paystack")?"paystack":a.includes("hubtel")?"hubtel":a.includes("flutterwave")?"flutterwave":"paystack"}function W(t,a){return{id:t.id,clientSecret:t.client_secret,amount:t.amount,currency:t.currency,status:t.status,recommendedPsp:Q(t.provider),availableMethods:a.paymentMethods||["card","mobile_money"],connectionId:t.connection_id,provider:t.provider,feeAmount:t.fee_amount,feeCurrency:t.fee_currency,netAmount:t.net_amount,metadata:a.metadata}}function D(t){const{config:a,onSuccess:n,onError:l,onClose:p,onStateChange:c,apiBaseUrl:i}=t,o=e.ref(u.createInitialState()),k=new u.ReevitAPIClient({publicKey:a.publicKey,baseUrl:i}),m=s=>{o.value=u.reevitReducer(o.value,s)};e.watch(()=>o.value.status,s=>{c?.(s)});const y=async s=>{m({type:"INIT_START"});try{const r=a.reference||u.generateReference(),d=u.detectCountryFromCurrency(a.currency),M=s||a.paymentMethods?.[0]||"card",{data:O,error:T}=await k.createPaymentIntent({...a,reference:r},M,d);if(T){m({type:"INIT_ERROR",payload:T}),l?.(T);return}if(!O){const $={code:"INIT_FAILED",message:"No data received from API",recoverable:!0};m({type:"INIT_ERROR",payload:$}),l?.($);return}const J=W(O,{...a,reference:r});m({type:"INIT_SUCCESS",payload:J})}catch(r){const d={code:"INIT_FAILED",message:r instanceof Error?r.message:"Failed to initialize checkout",recoverable:!0,originalError:r};m({type:"INIT_ERROR",payload:d}),l?.(d)}},h=s=>{m({type:"SELECT_METHOD",payload:s})},b=async s=>{if(!(!o.value.paymentIntent||!o.value.selectedMethod)){m({type:"PROCESS_START"});try{const{data:r,error:d}=await k.confirmPayment(o.value.paymentIntent.id);if(d){m({type:"PROCESS_ERROR",payload:d}),l?.(d);return}const M={paymentId:o.value.paymentIntent.id,reference:s.reference||o.value.paymentIntent.metadata?.reference||"",amount:o.value.paymentIntent.amount,currency:o.value.paymentIntent.currency,paymentMethod:o.value.selectedMethod,psp:o.value.paymentIntent.recommendedPsp,pspReference:s.pspReference||r?.provider_ref_id||"",status:"success",metadata:s};m({type:"PROCESS_SUCCESS",payload:M}),n?.(M)}catch(r){const d={code:"PAYMENT_FAILED",message:r instanceof Error?r.message:"Payment failed",recoverable:!0,originalError:r};m({type:"PROCESS_ERROR",payload:d}),l?.(d)}}},I=async s=>{await b(s)},V=s=>{m({type:"PROCESS_ERROR",payload:s}),l?.(s)},f=()=>{m({type:"RESET"})},C=async()=>{if(o.value.paymentIntent&&o.value.status!=="success")try{await k.cancelPaymentIntent(o.value.paymentIntent.id)}catch{}m({type:"CLOSE"}),p?.()},E=e.computed(()=>o.value.status),R=e.computed(()=>o.value.paymentIntent),N=e.computed(()=>o.value.selectedMethod),B=e.computed(()=>o.value.error),v=e.computed(()=>o.value.result),_=e.computed(()=>o.value.status==="loading"||o.value.status==="processing"),S=e.computed(()=>o.value.status==="ready"||o.value.status==="method_selected"||o.value.status==="processing"),P=e.computed(()=>o.value.status==="success"),g=e.computed(()=>o.value.error?.recoverable??!1);return{status:e.readonly(E),paymentIntent:e.readonly(R),selectedMethod:e.readonly(N),error:e.readonly(B),result:e.readonly(v),initialize:y,selectMethod:h,processPayment:b,handlePspSuccess:I,handlePspError:V,reset:f,close:C,isLoading:e.readonly(_),isReady:e.readonly(S),isComplete:e.readonly(P),canRetry:e.readonly(g)}}const X={class:"reevit-method-selector"},Z={class:"reevit-amount-display"},ee={class:"reevit-methods-grid"},te=["onClick"],ne={class:"reevit-method-icon"},oe={class:"reevit-method-info"},re={class:"reevit-method-name"},ae={class:"reevit-method-description"},se={class:"reevit-method-radio"},le={key:0,class:"reevit-radio-inner"},j=e.defineComponent({__name:"PaymentMethodSelector",props:{methods:{},selected:{},amount:{},currency:{}},emits:["select"],setup(t,{emit:a}){const n=t,l=a,p=e.computed(()=>[{id:"card",name:"Card",description:"Visa, Mastercard, Maestro",icon:"💳"},{id:"mobile_money",name:"Mobile Money",description:"MTN, Vodafone, AirtelTigo",icon:"📱"},{id:"bank_transfer",name:"Bank Transfer",description:"Transfer directly from your bank",icon:"🏦"}].filter(c=>n.methods.includes(c.id)));return(c,i)=>(e.openBlock(),e.createElementBlock("div",X,[i[0]||(i[0]=e.createElementVNode("h3",{class:"reevit-section-title"},"Select Payment Method",-1)),e.createElementVNode("p",Z," Pay "+e.toDisplayString(e.unref(u.formatAmount)(t.amount,t.currency)),1),e.createElementVNode("div",ee,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,o=>(e.openBlock(),e.createElementBlock("button",{key:o.id,type:"button",class:e.normalizeClass(e.unref(u.cn)("reevit-method-card",t.selected===o.id&&"reevit-method-card--selected")),onClick:k=>l("select",o.id)},[e.createElementVNode("span",ne,e.toDisplayString(o.icon),1),e.createElementVNode("div",oe,[e.createElementVNode("span",re,e.toDisplayString(o.name),1),e.createElementVNode("span",ae,e.toDisplayString(o.description),1)]),e.createElementVNode("div",se,[t.selected===o.id?(e.openBlock(),e.createElementBlock("div",le)):e.createCommentVNode("",!0)])],10,te))),128))])]))}}),ce={class:"reevit-form-group"},ie=["disabled"],de={class:"reevit-network-selector"},ue={class:"reevit-networks-grid"},me=["onClick","disabled"],pe={key:0,class:"reevit-error-message"},ye=["disabled"],ve={key:0,class:"reevit-spinner"},he={key:1},A=e.defineComponent({__name:"MobileMoneyForm",props:{initialPhone:{},loading:{type:Boolean}},emits:["submit"],setup(t,{emit:a}){const n=t,l=a,p=e.ref(n.initialPhone||""),c=e.ref(null),i=e.ref(null);e.watch(p,m=>{const y=u.detectNetwork(m);y&&(c.value=y),i.value&&(i.value=null)});const o=()=>{if(!u.validatePhone(p.value)){i.value="Please enter a valid phone number";return}if(!c.value){i.value="Please select your mobile network";return}l("submit",{phone:p.value,network:c.value})},k=[{id:"mtn",name:"MTN",color:"#FFCC00"},{id:"vodafone",name:"Vodafone",color:"#E60000"},{id:"airteltigo",name:"AirtelTigo",color:"#005596"}];return(m,y)=>(e.openBlock(),e.createElementBlock("form",{class:"reevit-momo-form",onSubmit:e.withModifiers(o,["prevent"])},[e.createElementVNode("div",ce,[y[1]||(y[1]=e.createElementVNode("label",{class:"reevit-label",for:"reevit-phone"},"Phone Number",-1)),e.withDirectives(e.createElementVNode("input",{id:"reevit-phone","onUpdate:modelValue":y[0]||(y[0]=h=>p.value=h),type:"tel",class:e.normalizeClass(["reevit-input",{"reevit-input--error":i.value&&!e.unref(u.validatePhone)(p.value)}]),placeholder:"e.g. 024 123 4567",disabled:t.loading,autocomplete:"tel"},null,10,ie),[[e.vModelText,p.value]])]),e.createElementVNode("div",de,[y[2]||(y[2]=e.createElementVNode("label",{class:"reevit-label"},"Select Network",-1)),e.createElementVNode("div",ue,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(k,h=>e.createElementVNode("button",{key:h.id,type:"button",class:e.normalizeClass(e.unref(u.cn)("reevit-network-btn",c.value===h.id&&"reevit-network-btn--selected")),onClick:b=>c.value=h.id,disabled:t.loading},[e.createElementVNode("div",{class:"reevit-network-dot",style:e.normalizeStyle({backgroundColor:h.color})},null,4),e.createTextVNode(" "+e.toDisplayString(h.name),1)],10,me)),64))])]),i.value?(e.openBlock(),e.createElementBlock("p",pe,e.toDisplayString(i.value),1)):e.createCommentVNode("",!0),e.createElementVNode("button",{type:"submit",class:"reevit-submit-btn",disabled:t.loading||!p.value},[t.loading?(e.openBlock(),e.createElementBlock("span",ve)):(e.openBlock(),e.createElementBlock("span",he,"Continue"))],8,ye),y[3]||(y[3]=e.createElementVNode("p",{class:"reevit-secure-text"}," 🔒 Secure mobile money payment via Reevit ",-1))],32))}}),F=new Map;function w(t,a){const n=F.get(a);if(n)return n;const l=new Promise((p,c)=>{if(document.getElementById(a)){p();return}const i=document.createElement("script");i.id=a,i.src=t,i.async=!0,i.onload=()=>p(),i.onerror=()=>c(new Error(`Failed to load ${a} script`)),document.head.appendChild(i)});return F.set(a,l),l}function K(){return w("https://js.paystack.co/v1/inline.js","paystack-script")}function L(){return w("https://checkout.hubtel.com/js/hubtel-checkout.js","hubtel-script")}function z(){return w("https://checkout.flutterwave.com/v3.js","flutterwave-script")}function U(){return w("https://js.stripe.com/v3/","stripe-script")}function x(){return w("https://sdk.monnify.com/plugin/monnify.js","monnify-script")}async function H(t){if(await K(),!window.PaystackPop)throw new Error("Paystack script not loaded");window.PaystackPop.setup({key:t.key,email:t.email,amount:t.amount,currency:t.currency,ref:t.ref,metadata:t.metadata,callback:t.onSuccess,onClose:t.onClose}).openIframe()}async function q(t){if(await L(),!window.HubtelCheckout)throw new Error("Hubtel script not loaded");window.HubtelCheckout.initPay({clientId:t.clientId,purchaseDescription:t.purchaseDescription,amount:t.amount,callbackUrl:t.callbackUrl,customerPhone:t.customerPhone,customerEmail:t.customerEmail,onSuccess:t.onSuccess,onClose:t.onClose})}async function Y(t){if(await z(),!window.FlutterwaveCheckout)throw new Error("Flutterwave script not loaded");window.FlutterwaveCheckout({public_key:t.public_key,tx_ref:t.tx_ref,amount:t.amount,currency:t.currency,customer:t.customer,payment_options:t.payment_options,customizations:t.customizations,callback:t.callback,onclose:t.onclose})}async function G(t){if(await U(),!window.Stripe)throw new Error("Stripe.js not loaded");return window.Stripe(t)}async function ke(t){const n=await(await G(t.publishableKey)).confirmPayment({elements:t.elements,clientSecret:t.clientSecret,redirect:"if_required"});n.error?t.onError({message:n.error.message||"Payment failed"}):n.paymentIntent&&t.onSuccess({paymentIntentId:n.paymentIntent.id,status:n.paymentIntent.status})}async function be(t){if(await x(),!window.MonnifySDK)throw new Error("Monnify SDK not loaded");window.MonnifySDK.initialize({amount:t.amount,currency:t.currency,reference:t.reference,customerName:t.customerName,customerEmail:t.customerEmail,customerMobileNumber:t.customerPhone,apiKey:t.apiKey,contractCode:t.contractCode,paymentDescription:t.paymentDescription||"Payment",isTestMode:t.isTestMode??!1,metadata:t.metadata,onComplete:a=>{a.status==="SUCCESS"?t.onSuccess({transactionReference:a.transactionReference,paymentReference:a.paymentReference,...a}):t.onError?.({message:a.message||"Payment failed"})},onClose:t.onClose})}async function fe(t,a){t.onInitiated();try{const n=await fetch(a,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({phone_number:t.phoneNumber,amount:t.amount,reference:t.reference,description:t.description})});if(!n.ok){const c=(await n.json().catch(()=>({}))).message||"Failed to initiate M-Pesa payment";return t.onError({message:c}),{status:"failed",message:c}}const l=await n.json();return{status:"initiated",message:"Please check your phone and enter your M-Pesa PIN to complete the payment.",transactionId:l.checkout_request_id||l.transaction_id}}catch(n){const l=n instanceof Error?n.message:"Network error";return t.onError({message:l}),{status:"failed",message:l}}}const Ee=["disabled"],Se={key:0,class:"reevit-spinner"},Pe={class:"reevit-modal-body"},we={key:0,class:"reevit-loading-state"},Ce={key:1,class:"reevit-error-state"},Ne={key:2,class:"reevit-success-state"},_e={key:1,class:"reevit-method-form-container"},Me={key:2,class:"reevit-card-info"},Ie=["disabled"],Ve={key:0,class:"reevit-spinner"},Re={key:1},Be=e.defineComponent({__name:"ReevitCheckout",props:{publicKey:{},amount:{},currency:{},email:{},phone:{},reference:{},metadata:{},paymentMethods:{},theme:{},isOpen:{type:Boolean},apiBaseUrl:{}},emits:["success","error","close"],setup(t,{emit:a}){const n=t,l=a,{status:p,paymentIntent:c,selectedMethod:i,error:o,isLoading:k,isReady:m,initialize:y,selectMethod:h,handlePspSuccess:b,handlePspError:I,close:V}=D({config:{publicKey:n.publicKey,amount:n.amount,currency:n.currency,email:n.email,phone:n.phone,reference:n.reference,metadata:n.metadata,paymentMethods:n.paymentMethods},apiBaseUrl:n.apiBaseUrl,onSuccess:s=>l("success",s),onError:s=>l("error",s),onClose:()=>l("close")}),f=e.ref(n.isOpen??!1);e.watch(()=>n.isOpen,s=>{s!==void 0&&(f.value=s)});const C=()=>{f.value=!0,c.value||y()},E=()=>{f.value=!1,V()},R=s=>{h(s)},N=async s=>{if(!c.value)return;const r=c.value.recommendedPsp;try{r==="paystack"?await H({key:n.publicKey,email:n.email||"",amount:n.amount,currency:n.currency,ref:c.value.id,onSuccess:d=>b(d),onClose:()=>{}}):r==="hubtel"?await q({clientId:n.publicKey,purchaseDescription:`Payment for ${n.amount} ${n.currency}`,amount:n.amount,customerPhone:s?.phone||n.phone,customerEmail:n.email,onSuccess:d=>b(d),onClose:()=>{}}):r==="flutterwave"&&await Y({public_key:n.publicKey,tx_ref:c.value.id,amount:n.amount,currency:n.currency,customer:{email:n.email||"",phone_number:s?.phone||n.phone},callback:d=>b(d),onclose:()=>{}})}catch(d){I({code:"BRIDGE_ERROR",message:d instanceof Error?d.message:"Failed to open payment gateway"})}},B=e.computed(()=>u.createThemeVariables(n.theme||{}));e.watch(f,s=>{s?document.body.style.overflow="hidden":document.body.style.overflow=""}),e.onUnmounted(()=>{document.body.style.overflow=""});const v=e.computed(()=>p.value),_=e.computed(()=>o.value),S=e.computed(()=>i.value),P=e.computed(()=>k.value),g=e.computed(()=>m.value);return(s,r)=>(e.openBlock(),e.createElementBlock("div",{class:"reevit-sdk-container",style:e.normalizeStyle(B.value)},[e.renderSlot(s.$slots,"default",{open:C,isLoading:P.value},()=>[e.createElementVNode("button",{type:"button",class:"reevit-pay-button",onClick:C,disabled:P.value},[P.value?(e.openBlock(),e.createElementBlock("span",Se)):e.renderSlot(s.$slots,"button-text",{key:1},()=>[r[1]||(r[1]=e.createTextVNode("Pay Now",-1))])],8,Ee)]),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[f.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"reevit-modal-overlay",onClick:e.withModifiers(E,["self"])},[e.createElementVNode("div",{class:e.normalizeClass(["reevit-modal-content",{"reevit-modal--dark":n.theme?.darkMode}])},[e.createElementVNode("button",{class:"reevit-modal-close",onClick:E,"aria-label":"Close"}," × "),r[9]||(r[9]=e.createElementVNode("div",{class:"reevit-modal-header"},[e.createElementVNode("img",{src:"https://i.imgur.com/bzUR5Lm.png",alt:"Reevit",class:"reevit-modal__logo"})],-1)),e.createElementVNode("div",Pe,[v.value==="loading"?(e.openBlock(),e.createElementBlock("div",we,[...r[2]||(r[2]=[e.createElementVNode("div",{class:"reevit-spinner reevit-spinner--large"},null,-1),e.createElementVNode("p",null,"Initializing payment...",-1)])])):v.value==="failed"&&_.value?(e.openBlock(),e.createElementBlock("div",Ce,[r[3]||(r[3]=e.createElementVNode("div",{class:"reevit-error-icon"},"⚠️",-1)),r[4]||(r[4]=e.createElementVNode("h3",null,"Payment Failed",-1)),e.createElementVNode("p",null,e.toDisplayString(_.value.message),1),e.createElementVNode("button",{class:"reevit-retry-btn",onClick:r[0]||(r[0]=d=>e.unref(y)())},"Retry")])):v.value==="success"?(e.openBlock(),e.createElementBlock("div",Ne,[r[5]||(r[5]=e.createElementVNode("div",{class:"reevit-success-icon"},"✅",-1)),r[6]||(r[6]=e.createElementVNode("h3",null,"Payment Successful",-1)),r[7]||(r[7]=e.createElementVNode("p",null,"Thank you for your payment.",-1)),e.createElementVNode("button",{class:"reevit-done-btn",onClick:E},"Done")])):g.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[v.value==="ready"||v.value==="method_selected"||v.value==="processing"?(e.openBlock(),e.createBlock(j,{key:0,methods:n.paymentMethods||["card","mobile_money"],selected:S.value,amount:n.amount,currency:n.currency,onSelect:R},null,8,["methods","selected","amount","currency"])):e.createCommentVNode("",!0),(v.value==="method_selected"||v.value==="processing")&&S.value==="mobile_money"?(e.openBlock(),e.createElementBlock("div",_e,[e.createVNode(A,{"initial-phone":n.phone,loading:v.value==="processing",onSubmit:N},null,8,["initial-phone","loading"])])):e.createCommentVNode("",!0),(v.value==="method_selected"||v.value==="processing")&&S.value==="card"?(e.openBlock(),e.createElementBlock("div",Me,[r[8]||(r[8]=e.createElementVNode("p",{class:"reevit-info-text"},"You will be redirected to our secure payment partner to complete your card payment.",-1)),e.createElementVNode("button",{class:"reevit-submit-btn",onClick:N,disabled:v.value==="processing"},[v.value==="processing"?(e.openBlock(),e.createElementBlock("span",Ve)):(e.openBlock(),e.createElementBlock("span",Re,"Proceed to Card Payment"))],8,Ie)])):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0)]),r[10]||(r[10]=e.createElementVNode("div",{class:"reevit-modal-footer"},[e.createElementVNode("div",{class:"reevit-trust-badges"},[e.createElementVNode("span",null,"PCI DSS Compliant"),e.createElementVNode("span",null,"•"),e.createElementVNode("span",null,"SSL Secure")])],-1))],2)])):e.createCommentVNode("",!0)]))],4))}});Object.defineProperty(exports,"ReevitAPIClient",{enumerable:!0,get:()=>u.ReevitAPIClient});Object.defineProperty(exports,"cn",{enumerable:!0,get:()=>u.cn});Object.defineProperty(exports,"createReevitClient",{enumerable:!0,get:()=>u.createReevitClient});Object.defineProperty(exports,"detectCountryFromCurrency",{enumerable:!0,get:()=>u.detectCountryFromCurrency});Object.defineProperty(exports,"detectNetwork",{enumerable:!0,get:()=>u.detectNetwork});Object.defineProperty(exports,"formatAmount",{enumerable:!0,get:()=>u.formatAmount});Object.defineProperty(exports,"formatPhone",{enumerable:!0,get:()=>u.formatPhone});Object.defineProperty(exports,"validatePhone",{enumerable:!0,get:()=>u.validatePhone});exports.MobileMoneyForm=A;exports.PaymentMethodSelector=j;exports.ReevitCheckout=Be;exports.confirmStripePayment=ke;exports.createStripeInstance=G;exports.initiateMPesaSTKPush=fe;exports.loadFlutterwaveScript=z;exports.loadHubtelScript=L;exports.loadMonnifyScript=x;exports.loadPaystackScript=K;exports.loadStripeScript=U;exports.openFlutterwaveModal=Y;exports.openHubtelPopup=q;exports.openMonnifyModal=be;exports.openPaystackPopup=H;exports.useReevit=D;
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ref as R, watch as D, computed as h, readonly as k, defineComponent as
|
|
1
|
+
import { ref as R, watch as D, computed as h, readonly as k, defineComponent as V, createElementBlock as m, openBlock as l, createElementVNode as n, toDisplayString as C, unref as T, Fragment as z, renderList as W, normalizeClass as A, createCommentVNode as P, withModifiers as X, withDirectives as oe, vModelText as ae, createTextVNode as Z, normalizeStyle as ee, onUnmounted as re, renderSlot as Y, createBlock as G, Teleport as se, createVNode as ie } from "vue";
|
|
2
2
|
import { createInitialState as le, ReevitAPIClient as ce, generateReference as ue, detectCountryFromCurrency as de, reevitReducer as me, formatAmount as pe, cn as te, detectNetwork as ye, validatePhone as J, createThemeVariables as ve } from "@reevit/core";
|
|
3
3
|
import { ReevitAPIClient as yt, cn as vt, createReevitClient as ht, detectCountryFromCurrency as bt, detectNetwork as ft, formatAmount as kt, formatPhone as wt, validatePhone as St } from "@reevit/core";
|
|
4
4
|
function he(e) {
|
|
@@ -38,13 +38,13 @@ function fe(e) {
|
|
|
38
38
|
const v = async (s) => {
|
|
39
39
|
p({ type: "INIT_START" });
|
|
40
40
|
try {
|
|
41
|
-
const a = r.reference || ue(), d = de(r.currency),
|
|
41
|
+
const a = r.reference || ue(), d = de(r.currency), O = s || r.paymentMethods?.[0] || "card", { data: H, error: x } = await w.createPaymentIntent(
|
|
42
42
|
{ ...r, reference: a },
|
|
43
|
-
|
|
43
|
+
O,
|
|
44
44
|
d
|
|
45
45
|
);
|
|
46
|
-
if (
|
|
47
|
-
p({ type: "INIT_ERROR", payload:
|
|
46
|
+
if (x) {
|
|
47
|
+
p({ type: "INIT_ERROR", payload: x }), i?.(x);
|
|
48
48
|
return;
|
|
49
49
|
}
|
|
50
50
|
if (!H) {
|
|
@@ -78,7 +78,7 @@ function fe(e) {
|
|
|
78
78
|
p({ type: "PROCESS_ERROR", payload: d }), i?.(d);
|
|
79
79
|
return;
|
|
80
80
|
}
|
|
81
|
-
const
|
|
81
|
+
const O = {
|
|
82
82
|
paymentId: o.value.paymentIntent.id,
|
|
83
83
|
reference: s.reference || o.value.paymentIntent.metadata?.reference || "",
|
|
84
84
|
amount: o.value.paymentIntent.amount,
|
|
@@ -89,7 +89,7 @@ function fe(e) {
|
|
|
89
89
|
status: "success",
|
|
90
90
|
metadata: s
|
|
91
91
|
};
|
|
92
|
-
p({ type: "PROCESS_SUCCESS", payload:
|
|
92
|
+
p({ type: "PROCESS_SUCCESS", payload: O }), t?.(O);
|
|
93
93
|
} catch (a) {
|
|
94
94
|
const d = {
|
|
95
95
|
code: "PAYMENT_FAILED",
|
|
@@ -113,17 +113,17 @@ function fe(e) {
|
|
|
113
113
|
} catch {
|
|
114
114
|
}
|
|
115
115
|
p({ type: "CLOSE" }), y?.();
|
|
116
|
-
}, E = h(() => o.value.status),
|
|
116
|
+
}, E = h(() => o.value.status), U = h(() => o.value.paymentIntent), g = h(() => o.value.selectedMethod), B = h(() => o.value.error), b = h(() => o.value.result), F = h(
|
|
117
117
|
() => o.value.status === "loading" || o.value.status === "processing"
|
|
118
118
|
), I = h(
|
|
119
119
|
() => o.value.status === "ready" || o.value.status === "method_selected" || o.value.status === "processing"
|
|
120
|
-
), M = h(() => o.value.status === "success"),
|
|
120
|
+
), M = h(() => o.value.status === "success"), j = h(() => o.value.error?.recoverable ?? !1);
|
|
121
121
|
return {
|
|
122
122
|
// State (readonly refs)
|
|
123
123
|
status: k(E),
|
|
124
|
-
paymentIntent: k(
|
|
125
|
-
selectedMethod: k(
|
|
126
|
-
error: k(
|
|
124
|
+
paymentIntent: k(U),
|
|
125
|
+
selectedMethod: k(g),
|
|
126
|
+
error: k(B),
|
|
127
127
|
result: k(b),
|
|
128
128
|
// Actions
|
|
129
129
|
initialize: v,
|
|
@@ -134,16 +134,16 @@ function fe(e) {
|
|
|
134
134
|
reset: _,
|
|
135
135
|
close: N,
|
|
136
136
|
// Computed
|
|
137
|
-
isLoading: k(
|
|
137
|
+
isLoading: k(F),
|
|
138
138
|
isReady: k(I),
|
|
139
139
|
isComplete: k(M),
|
|
140
|
-
canRetry: k(
|
|
140
|
+
canRetry: k(j)
|
|
141
141
|
};
|
|
142
142
|
}
|
|
143
|
-
const ke = { class: "reevit-method-selector" }, we = { class: "reevit-amount-display" }, Se = { class: "reevit-methods-grid" }, _e = ["onClick"],
|
|
143
|
+
const ke = { class: "reevit-method-selector" }, we = { class: "reevit-amount-display" }, Se = { class: "reevit-methods-grid" }, _e = ["onClick"], Pe = { class: "reevit-method-icon" }, Ce = { class: "reevit-method-info" }, Ee = { class: "reevit-method-name" }, Ie = { class: "reevit-method-description" }, Me = { class: "reevit-method-radio" }, Re = {
|
|
144
144
|
key: 0,
|
|
145
145
|
class: "reevit-radio-inner"
|
|
146
|
-
}, Te = /* @__PURE__ */
|
|
146
|
+
}, Te = /* @__PURE__ */ V({
|
|
147
147
|
__name: "PaymentMethodSelector",
|
|
148
148
|
props: {
|
|
149
149
|
methods: {},
|
|
@@ -175,33 +175,33 @@ const ke = { class: "reevit-method-selector" }, we = { class: "reevit-amount-dis
|
|
|
175
175
|
].filter((c) => t.methods.includes(c.id)));
|
|
176
176
|
return (c, u) => (l(), m("div", ke, [
|
|
177
177
|
u[0] || (u[0] = n("h3", { class: "reevit-section-title" }, "Select Payment Method", -1)),
|
|
178
|
-
n("p", we, " Pay " +
|
|
178
|
+
n("p", we, " Pay " + C(T(pe)(e.amount, e.currency)), 1),
|
|
179
179
|
n("div", Se, [
|
|
180
|
-
(l(!0), m(
|
|
180
|
+
(l(!0), m(z, null, W(y.value, (o) => (l(), m("button", {
|
|
181
181
|
key: o.id,
|
|
182
182
|
type: "button",
|
|
183
183
|
class: A(T(te)("reevit-method-card", e.selected === o.id && "reevit-method-card--selected")),
|
|
184
184
|
onClick: (w) => i("select", o.id)
|
|
185
185
|
}, [
|
|
186
|
-
n("span",
|
|
187
|
-
n("div",
|
|
188
|
-
n("span", Ee,
|
|
189
|
-
n("span", Ie,
|
|
186
|
+
n("span", Pe, C(o.icon), 1),
|
|
187
|
+
n("div", Ce, [
|
|
188
|
+
n("span", Ee, C(o.name), 1),
|
|
189
|
+
n("span", Ie, C(o.description), 1)
|
|
190
190
|
]),
|
|
191
191
|
n("div", Me, [
|
|
192
|
-
e.selected === o.id ? (l(), m("div", Re)) :
|
|
192
|
+
e.selected === o.id ? (l(), m("div", Re)) : P("", !0)
|
|
193
193
|
])
|
|
194
194
|
], 10, _e))), 128))
|
|
195
195
|
])
|
|
196
196
|
]));
|
|
197
197
|
}
|
|
198
|
-
}), $e = { class: "reevit-form-group" }, Ne = ["disabled"],
|
|
198
|
+
}), $e = { class: "reevit-form-group" }, Ne = ["disabled"], ge = { class: "reevit-network-selector" }, Fe = { class: "reevit-networks-grid" }, Oe = ["onClick", "disabled"], De = {
|
|
199
199
|
key: 0,
|
|
200
200
|
class: "reevit-error-message"
|
|
201
201
|
}, Ae = ["disabled"], Ke = {
|
|
202
202
|
key: 0,
|
|
203
203
|
class: "reevit-spinner"
|
|
204
|
-
}, Le = { key: 1 },
|
|
204
|
+
}, Le = { key: 1 }, Ue = /* @__PURE__ */ V({
|
|
205
205
|
__name: "MobileMoneyForm",
|
|
206
206
|
props: {
|
|
207
207
|
initialPhone: {},
|
|
@@ -253,10 +253,10 @@ const ke = { class: "reevit-method-selector" }, we = { class: "reevit-amount-dis
|
|
|
253
253
|
[ae, y.value]
|
|
254
254
|
])
|
|
255
255
|
]),
|
|
256
|
-
n("div",
|
|
256
|
+
n("div", ge, [
|
|
257
257
|
v[2] || (v[2] = n("label", { class: "reevit-label" }, "Select Network", -1)),
|
|
258
|
-
n("div",
|
|
259
|
-
(l(), m(
|
|
258
|
+
n("div", Fe, [
|
|
259
|
+
(l(), m(z, null, W(w, (f) => n("button", {
|
|
260
260
|
key: f.id,
|
|
261
261
|
type: "button",
|
|
262
262
|
class: A(T(te)("reevit-network-btn", c.value === f.id && "reevit-network-btn--selected")),
|
|
@@ -267,11 +267,11 @@ const ke = { class: "reevit-method-selector" }, we = { class: "reevit-amount-dis
|
|
|
267
267
|
class: "reevit-network-dot",
|
|
268
268
|
style: ee({ backgroundColor: f.color })
|
|
269
269
|
}, null, 4),
|
|
270
|
-
Z(" " +
|
|
271
|
-
], 10,
|
|
270
|
+
Z(" " + C(f.name), 1)
|
|
271
|
+
], 10, Oe)), 64))
|
|
272
272
|
])
|
|
273
273
|
]),
|
|
274
|
-
u.value ? (l(), m("p", De,
|
|
274
|
+
u.value ? (l(), m("p", De, C(u.value), 1)) : P("", !0),
|
|
275
275
|
n("button", {
|
|
276
276
|
type: "submit",
|
|
277
277
|
class: "reevit-submit-btn",
|
|
@@ -296,23 +296,23 @@ function $(e, r) {
|
|
|
296
296
|
});
|
|
297
297
|
return Q.set(r, i), i;
|
|
298
298
|
}
|
|
299
|
-
function
|
|
299
|
+
function Be() {
|
|
300
300
|
return $("https://js.paystack.co/v1/inline.js", "paystack-script");
|
|
301
301
|
}
|
|
302
|
-
function
|
|
302
|
+
function je() {
|
|
303
303
|
return $("https://checkout.hubtel.com/js/hubtel-checkout.js", "hubtel-script");
|
|
304
304
|
}
|
|
305
|
-
function
|
|
305
|
+
function xe() {
|
|
306
306
|
return $("https://checkout.flutterwave.com/v3.js", "flutterwave-script");
|
|
307
307
|
}
|
|
308
|
-
function
|
|
308
|
+
function Ve() {
|
|
309
309
|
return $("https://js.stripe.com/v3/", "stripe-script");
|
|
310
310
|
}
|
|
311
|
-
function
|
|
311
|
+
function ze() {
|
|
312
312
|
return $("https://sdk.monnify.com/plugin/monnify.js", "monnify-script");
|
|
313
313
|
}
|
|
314
314
|
async function He(e) {
|
|
315
|
-
if (await
|
|
315
|
+
if (await Be(), !window.PaystackPop)
|
|
316
316
|
throw new Error("Paystack script not loaded");
|
|
317
317
|
window.PaystackPop.setup({
|
|
318
318
|
key: e.key,
|
|
@@ -326,7 +326,7 @@ async function He(e) {
|
|
|
326
326
|
}).openIframe();
|
|
327
327
|
}
|
|
328
328
|
async function qe(e) {
|
|
329
|
-
if (await
|
|
329
|
+
if (await je(), !window.HubtelCheckout)
|
|
330
330
|
throw new Error("Hubtel script not loaded");
|
|
331
331
|
window.HubtelCheckout.initPay({
|
|
332
332
|
clientId: e.clientId,
|
|
@@ -340,7 +340,7 @@ async function qe(e) {
|
|
|
340
340
|
});
|
|
341
341
|
}
|
|
342
342
|
async function Ye(e) {
|
|
343
|
-
if (await
|
|
343
|
+
if (await xe(), !window.FlutterwaveCheckout)
|
|
344
344
|
throw new Error("Flutterwave script not loaded");
|
|
345
345
|
window.FlutterwaveCheckout({
|
|
346
346
|
public_key: e.public_key,
|
|
@@ -355,7 +355,7 @@ async function Ye(e) {
|
|
|
355
355
|
});
|
|
356
356
|
}
|
|
357
357
|
async function Ge(e) {
|
|
358
|
-
if (await
|
|
358
|
+
if (await Ve(), !window.Stripe)
|
|
359
359
|
throw new Error("Stripe.js not loaded");
|
|
360
360
|
return window.Stripe(e);
|
|
361
361
|
}
|
|
@@ -371,7 +371,7 @@ async function lt(e) {
|
|
|
371
371
|
});
|
|
372
372
|
}
|
|
373
373
|
async function ct(e) {
|
|
374
|
-
if (await
|
|
374
|
+
if (await ze(), !window.MonnifySDK)
|
|
375
375
|
throw new Error("Monnify SDK not loaded");
|
|
376
376
|
window.MonnifySDK.initialize({
|
|
377
377
|
amount: e.amount,
|
|
@@ -444,7 +444,7 @@ const Je = ["disabled"], Qe = {
|
|
|
444
444
|
}, ot = ["disabled"], at = {
|
|
445
445
|
key: 0,
|
|
446
446
|
class: "reevit-spinner"
|
|
447
|
-
}, rt = { key: 1 }, dt = /* @__PURE__ */
|
|
447
|
+
}, rt = { key: 1 }, dt = /* @__PURE__ */ V({
|
|
448
448
|
__name: "ReevitCheckout",
|
|
449
449
|
props: {
|
|
450
450
|
publicKey: {},
|
|
@@ -456,7 +456,8 @@ const Je = ["disabled"], Qe = {
|
|
|
456
456
|
metadata: {},
|
|
457
457
|
paymentMethods: {},
|
|
458
458
|
theme: {},
|
|
459
|
-
isOpen: { type: Boolean }
|
|
459
|
+
isOpen: { type: Boolean },
|
|
460
|
+
apiBaseUrl: {}
|
|
460
461
|
},
|
|
461
462
|
emits: ["success", "error", "close"],
|
|
462
463
|
setup(e, { emit: r }) {
|
|
@@ -483,6 +484,7 @@ const Je = ["disabled"], Qe = {
|
|
|
483
484
|
metadata: t.metadata,
|
|
484
485
|
paymentMethods: t.paymentMethods
|
|
485
486
|
},
|
|
487
|
+
apiBaseUrl: t.apiBaseUrl,
|
|
486
488
|
onSuccess: (s) => i("success", s),
|
|
487
489
|
onError: (s) => i("error", s),
|
|
488
490
|
onClose: () => i("close")
|
|
@@ -494,9 +496,9 @@ const Je = ["disabled"], Qe = {
|
|
|
494
496
|
_.value = !0, c.value || v();
|
|
495
497
|
}, E = () => {
|
|
496
498
|
_.value = !1, L();
|
|
497
|
-
},
|
|
499
|
+
}, U = (s) => {
|
|
498
500
|
f(s);
|
|
499
|
-
},
|
|
501
|
+
}, g = async (s) => {
|
|
500
502
|
if (!c.value) return;
|
|
501
503
|
const a = c.value.recommendedPsp;
|
|
502
504
|
try {
|
|
@@ -537,16 +539,16 @@ const Je = ["disabled"], Qe = {
|
|
|
537
539
|
message: d instanceof Error ? d.message : "Failed to open payment gateway"
|
|
538
540
|
});
|
|
539
541
|
}
|
|
540
|
-
},
|
|
542
|
+
}, B = h(() => ve(t.theme || {}));
|
|
541
543
|
D(_, (s) => {
|
|
542
544
|
s ? document.body.style.overflow = "hidden" : document.body.style.overflow = "";
|
|
543
545
|
}), re(() => {
|
|
544
546
|
document.body.style.overflow = "";
|
|
545
547
|
});
|
|
546
|
-
const b = h(() => y.value),
|
|
548
|
+
const b = h(() => y.value), F = h(() => o.value), I = h(() => u.value), M = h(() => w.value), j = h(() => p.value);
|
|
547
549
|
return (s, a) => (l(), m("div", {
|
|
548
550
|
class: "reevit-sdk-container",
|
|
549
|
-
style: ee(
|
|
551
|
+
style: ee(B.value)
|
|
550
552
|
}, [
|
|
551
553
|
Y(s.$slots, "default", {
|
|
552
554
|
open: N,
|
|
@@ -578,17 +580,20 @@ const Je = ["disabled"], Qe = {
|
|
|
578
580
|
"aria-label": "Close"
|
|
579
581
|
}, " × "),
|
|
580
582
|
a[9] || (a[9] = n("div", { class: "reevit-modal-header" }, [
|
|
581
|
-
n("
|
|
582
|
-
|
|
583
|
+
n("img", {
|
|
584
|
+
src: "https://i.imgur.com/bzUR5Lm.png",
|
|
585
|
+
alt: "Reevit",
|
|
586
|
+
class: "reevit-modal__logo"
|
|
587
|
+
})
|
|
583
588
|
], -1)),
|
|
584
589
|
n("div", We, [
|
|
585
590
|
b.value === "loading" ? (l(), m("div", Xe, [...a[2] || (a[2] = [
|
|
586
591
|
n("div", { class: "reevit-spinner reevit-spinner--large" }, null, -1),
|
|
587
592
|
n("p", null, "Initializing payment...", -1)
|
|
588
|
-
])])) : b.value === "failed" &&
|
|
593
|
+
])])) : b.value === "failed" && F.value ? (l(), m("div", Ze, [
|
|
589
594
|
a[3] || (a[3] = n("div", { class: "reevit-error-icon" }, "⚠️", -1)),
|
|
590
595
|
a[4] || (a[4] = n("h3", null, "Payment Failed", -1)),
|
|
591
|
-
n("p", null,
|
|
596
|
+
n("p", null, C(F.value.message), 1),
|
|
592
597
|
n("button", {
|
|
593
598
|
class: "reevit-retry-btn",
|
|
594
599
|
onClick: a[0] || (a[0] = (d) => T(v)())
|
|
@@ -601,33 +606,33 @@ const Je = ["disabled"], Qe = {
|
|
|
601
606
|
class: "reevit-done-btn",
|
|
602
607
|
onClick: E
|
|
603
608
|
}, "Done")
|
|
604
|
-
])) :
|
|
609
|
+
])) : j.value ? (l(), m(z, { key: 3 }, [
|
|
605
610
|
b.value === "ready" || b.value === "method_selected" || b.value === "processing" ? (l(), G(Te, {
|
|
606
611
|
key: 0,
|
|
607
612
|
methods: t.paymentMethods || ["card", "mobile_money"],
|
|
608
613
|
selected: I.value,
|
|
609
614
|
amount: t.amount,
|
|
610
615
|
currency: t.currency,
|
|
611
|
-
onSelect:
|
|
612
|
-
}, null, 8, ["methods", "selected", "amount", "currency"])) :
|
|
616
|
+
onSelect: U
|
|
617
|
+
}, null, 8, ["methods", "selected", "amount", "currency"])) : P("", !0),
|
|
613
618
|
(b.value === "method_selected" || b.value === "processing") && I.value === "mobile_money" ? (l(), m("div", tt, [
|
|
614
|
-
ie(
|
|
619
|
+
ie(Ue, {
|
|
615
620
|
"initial-phone": t.phone,
|
|
616
621
|
loading: b.value === "processing",
|
|
617
|
-
onSubmit:
|
|
622
|
+
onSubmit: g
|
|
618
623
|
}, null, 8, ["initial-phone", "loading"])
|
|
619
|
-
])) :
|
|
624
|
+
])) : P("", !0),
|
|
620
625
|
(b.value === "method_selected" || b.value === "processing") && I.value === "card" ? (l(), m("div", nt, [
|
|
621
626
|
a[8] || (a[8] = n("p", { class: "reevit-info-text" }, "You will be redirected to our secure payment partner to complete your card payment.", -1)),
|
|
622
627
|
n("button", {
|
|
623
628
|
class: "reevit-submit-btn",
|
|
624
|
-
onClick:
|
|
629
|
+
onClick: g,
|
|
625
630
|
disabled: b.value === "processing"
|
|
626
631
|
}, [
|
|
627
632
|
b.value === "processing" ? (l(), m("span", at)) : (l(), m("span", rt, "Proceed to Card Payment"))
|
|
628
633
|
], 8, ot)
|
|
629
|
-
])) :
|
|
630
|
-
], 64)) :
|
|
634
|
+
])) : P("", !0)
|
|
635
|
+
], 64)) : P("", !0)
|
|
631
636
|
]),
|
|
632
637
|
a[10] || (a[10] = n("div", { class: "reevit-modal-footer" }, [
|
|
633
638
|
n("div", { class: "reevit-trust-badges" }, [
|
|
@@ -637,13 +642,13 @@ const Je = ["disabled"], Qe = {
|
|
|
637
642
|
])
|
|
638
643
|
], -1))
|
|
639
644
|
], 2)
|
|
640
|
-
])) :
|
|
645
|
+
])) : P("", !0)
|
|
641
646
|
]))
|
|
642
647
|
], 4));
|
|
643
648
|
}
|
|
644
649
|
});
|
|
645
650
|
export {
|
|
646
|
-
|
|
651
|
+
Ue as MobileMoneyForm,
|
|
647
652
|
Te as PaymentMethodSelector,
|
|
648
653
|
yt as ReevitAPIClient,
|
|
649
654
|
dt as ReevitCheckout,
|
|
@@ -656,11 +661,11 @@ export {
|
|
|
656
661
|
kt as formatAmount,
|
|
657
662
|
wt as formatPhone,
|
|
658
663
|
ut as initiateMPesaSTKPush,
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
+
xe as loadFlutterwaveScript,
|
|
665
|
+
je as loadHubtelScript,
|
|
666
|
+
ze as loadMonnifyScript,
|
|
667
|
+
Be as loadPaystackScript,
|
|
668
|
+
Ve as loadStripeScript,
|
|
664
669
|
Ye as openFlutterwaveModal,
|
|
665
670
|
qe as openHubtelPopup,
|
|
666
671
|
ct as openMonnifyModal,
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap";:root{--reevit-primary: oklch(.922 0 0);--reevit-primary-hover: oklch(.85 0 0);--reevit-primary-foreground: oklch(.145 0 0);--reevit-background: oklch(1 0 0);--reevit-surface: oklch(.97 0 0);--reevit-border: oklch(.922 0 0);--reevit-text: oklch(.145 0 0);--reevit-text-secondary: oklch(.556 0 0);--reevit-muted: oklch(.708 0 0);--reevit-success: oklch(.696 .17 162.48);--reevit-error: oklch(.577 .245 27.325);--reevit-warning: oklch(.828 .189 84.429);--reevit-radius: .625rem;--reevit-radius-sm: .5rem;--reevit-radius-lg: .75rem;--reevit-font: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--reevit-shadow: 0 25px 50px -12px rgba(0, 0, 0, .15);--reevit-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1)}@media(prefers-color-scheme:dark){:root{--reevit-primary: oklch(.922 0 0);--reevit-primary-hover: oklch(.85 0 0);--reevit-primary-foreground: oklch(.145 0 0);--reevit-background: oklch(.145 0 0);--reevit-surface: oklch(.205 0 0);--reevit-border: oklch(1 0 0 / 10%);--reevit-text: oklch(.985 0 0);--reevit-text-secondary: oklch(.708 0 0);--reevit-muted: oklch(.556 0 0);--reevit-success: oklch(.696 .17 162.48);--reevit-error: oklch(.704 .191 22.216);--reevit-warning: oklch(.828 .189 84.429)}}.reevit-overlay{position:fixed;inset:0;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px;animation:reevit-fade-in .2s ease-out}@keyframes reevit-fade-in{0%{opacity:0}to{opacity:1}}.reevit-modal{background:var(--reevit-background);border-radius:var(--reevit-radius-lg);border:1px solid var(--reevit-border);box-shadow:var(--reevit-shadow);width:100%;max-width:400px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;font-family:var(--reevit-font);animation:reevit-slide-up .25s cubic-bezier(.22,1,.36,1)}@keyframes reevit-slide-up{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.reevit-modal--success{border-color:var(--reevit-success)}.reevit-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--reevit-border)}.reevit-modal__branding{display:flex;align-items:center;gap:8px}.reevit-modal__logo{font-size:14px;font-weight:600;color:var(--reevit-text);letter-spacing:-.02em}.reevit-modal__close{width:28px;height:28px;border-radius:var(--reevit-radius-sm);border:1px solid var(--reevit-border);background:transparent;color:var(--reevit-text-secondary);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.reevit-modal__close:hover{background:var(--reevit-surface);color:var(--reevit-text);border-color:var(--reevit-text-secondary)}.reevit-modal__amount{padding:32px 20px;text-align:center;background:var(--reevit-surface);border-bottom:1px solid var(--reevit-border)}.reevit-modal__amount-label{display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--reevit-text-secondary);margin-bottom:8px}.reevit-modal__amount-value{display:block;font-size:36px;font-weight:700;letter-spacing:-.03em;color:var(--reevit-text)}.reevit-modal__content{flex:1;overflow-y:auto;padding:20px}.reevit-modal__footer{padding:14px 20px;border-top:1px solid var(--reevit-border);text-align:center;background:var(--reevit-surface)}.reevit-modal__secured{font-size:11px;font-weight:500;color:var(--reevit-text-secondary);letter-spacing:.02em}.reevit-method-selector{margin-bottom:20px}.reevit-method-selector__label{font-size:12px;font-weight:500;color:var(--reevit-text);margin-bottom:12px;letter-spacing:.02em}.reevit-method-selector__options{display:flex;flex-direction:column;gap:8px}.reevit-method-option{display:flex;align-items:center;gap:12px;padding:14px 16px;background:transparent;border:1px solid var(--reevit-border);border-radius:var(--reevit-radius);cursor:pointer;transition:all .15s ease;text-align:left;width:100%}.reevit-method-option:hover{border-color:var(--reevit-text-secondary);background:var(--reevit-surface)}.reevit-method-option--selected{border-color:var(--reevit-text);background:var(--reevit-surface)}.reevit-method-option--disabled{opacity:.5;cursor:not-allowed}.reevit-method-option__icon{font-size:20px;flex-shrink:0;opacity:.8}.reevit-method-option__content{flex:1;min-width:0}.reevit-method-option__label{display:block;font-size:13px;font-weight:600;color:var(--reevit-text);letter-spacing:-.01em}.reevit-method-option__description{display:block;font-size:11px;color:var(--reevit-text-secondary);margin-top:2px;letter-spacing:.01em}.reevit-method-option__check{color:var(--reevit-text);flex-shrink:0;font-size:14px}.reevit-momo-form{display:flex;flex-direction:column;gap:16px}.reevit-momo-form__field{display:flex;flex-direction:column;gap:6px}.reevit-momo-form__label{font-size:12px;font-weight:500;color:var(--reevit-text);letter-spacing:.02em}.reevit-momo-form__input{padding:10px 14px;font-size:14px;border:1px solid var(--reevit-border);border-radius:var(--reevit-radius);background:transparent;color:var(--reevit-text);transition:all .15s ease;font-family:var(--reevit-font)}.reevit-momo-form__input:focus{outline:none;border-color:var(--reevit-text-secondary);background:var(--reevit-surface)}.reevit-momo-form__input--error{border-color:var(--reevit-error)}.reevit-momo-form__input--error:focus{border-color:var(--reevit-error)}.reevit-momo-form__formatted{font-size:11px;color:var(--reevit-text-secondary)}.reevit-momo-form__error{font-size:11px;color:var(--reevit-error)}.reevit-momo-form__networks{display:flex;gap:8px}.reevit-network-btn{flex:1;padding:10px 14px;font-size:12px;font-weight:600;border:1px solid var(--reevit-border);border-radius:var(--reevit-radius);background:transparent;color:var(--reevit-text);cursor:pointer;transition:all .15s ease;font-family:var(--reevit-font)}.reevit-network-btn:hover{border-color:var(--reevit-text-secondary);background:var(--reevit-surface)}.reevit-network-btn--selected{border-color:var(--reevit-text);background:var(--reevit-text);color:var(--reevit-background)}.reevit-momo-form__actions{display:flex;gap:10px;margin-top:8px}.reevit-momo-form__hint{font-size:11px;color:var(--reevit-text-secondary);text-align:center;margin-top:4px}.reevit-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;font-size:13px;font-weight:600;border-radius:var(--reevit-radius);cursor:pointer;transition:all .15s ease;font-family:var(--reevit-font);border:none;min-height:42px;letter-spacing:-.01em}.reevit-btn--primary{flex:1;background:var(--reevit-primary);color:var(--reevit-primary-foreground)}.reevit-btn--primary:hover:not(:disabled){background:var(--reevit-primary-hover)}.reevit-btn--primary:disabled{opacity:.5;cursor:not-allowed}.reevit-btn--secondary{background:transparent;color:var(--reevit-text);border:1px solid var(--reevit-border)}.reevit-btn--secondary:hover:not(:disabled){background:var(--reevit-surface);border-color:var(--reevit-text-secondary)}.reevit-trigger-btn{padding:10px 18px;font-size:13px;font-weight:600;background:var(--reevit-primary);color:var(--reevit-primary-foreground);border:none;border-radius:var(--reevit-radius);cursor:pointer;font-family:var(--reevit-font);transition:all .15s ease;letter-spacing:-.01em}.reevit-trigger-btn:hover{background:var(--reevit-primary-hover)}.reevit-loading,.reevit-success,.reevit-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;gap:12px}.reevit-success__icon{width:48px;height:48px;border-radius:50%;background:var(--reevit-success);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;animation:reevit-pop .3s ease-out}.reevit-error__icon{width:48px;height:48px;border-radius:50%;background:var(--reevit-error);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center}@keyframes reevit-pop{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}.reevit-success h3,.reevit-error h3{font-size:14px;font-weight:600;color:var(--reevit-text);margin:0;letter-spacing:-.01em}.reevit-success p,.reevit-error p{font-size:12px;color:var(--reevit-text-secondary);margin:0}.reevit-spinner{width:20px;height:20px;border:2px solid var(--reevit-border);border-top-color:var(--reevit-text);border-radius:50%;animation:reevit-spin .7s linear infinite}@keyframes reevit-spin{to{transform:rotate(360deg)}}.reevit-loading .reevit-spinner{width:32px;height:32px;border-width:2px}.reevit-loading p{font-size:12px;color:var(--reevit-text-secondary);margin:0}.reevit-psp-bridge{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;gap:12px}.reevit-psp-bridge__loading p{font-size:12px;color:var(--reevit-text-secondary);margin:0}.reevit-method-step__actions{margin-top:16px}@media(max-width:480px){.reevit-modal{max-width:100%;max-height:100%;border-radius:var(--reevit-radius-lg) var(--reevit-radius-lg) 0 0;margin-top:auto}.reevit-modal__amount-value{font-size:28px}.reevit-momo-form__networks{flex-direction:column}.reevit-momo-form__actions{flex-direction:column-reverse}.reevit-btn--secondary{flex:none}}
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap";:root{--reevit-primary: oklch(.922 0 0);--reevit-primary-hover: oklch(.85 0 0);--reevit-primary-foreground: oklch(.145 0 0);--reevit-background: oklch(1 0 0);--reevit-surface: oklch(.97 0 0);--reevit-border: oklch(.922 0 0);--reevit-text: oklch(.145 0 0);--reevit-text-secondary: oklch(.556 0 0);--reevit-muted: oklch(.708 0 0);--reevit-success: oklch(.696 .17 162.48);--reevit-error: oklch(.577 .245 27.325);--reevit-warning: oklch(.828 .189 84.429);--reevit-radius: .625rem;--reevit-radius-sm: .5rem;--reevit-radius-lg: .75rem;--reevit-font: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--reevit-shadow: 0 25px 50px -12px rgba(0, 0, 0, .15);--reevit-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1)}@media(prefers-color-scheme:dark){:root{--reevit-primary: oklch(.922 0 0);--reevit-primary-hover: oklch(.85 0 0);--reevit-primary-foreground: oklch(.145 0 0);--reevit-background: oklch(.145 0 0);--reevit-surface: oklch(.205 0 0);--reevit-border: oklch(1 0 0 / 10%);--reevit-text: oklch(.985 0 0);--reevit-text-secondary: oklch(.708 0 0);--reevit-muted: oklch(.556 0 0);--reevit-success: oklch(.696 .17 162.48);--reevit-error: oklch(.704 .191 22.216);--reevit-warning: oklch(.828 .189 84.429)}}.reevit-overlay{position:fixed;inset:0;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px;animation:reevit-fade-in .2s ease-out}@keyframes reevit-fade-in{0%{opacity:0}to{opacity:1}}.reevit-modal{background:var(--reevit-background);border-radius:var(--reevit-radius-lg);border:1px solid var(--reevit-border);box-shadow:var(--reevit-shadow);width:100%;max-width:400px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;font-family:var(--reevit-font);animation:reevit-slide-up .25s cubic-bezier(.22,1,.36,1)}@keyframes reevit-slide-up{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.reevit-modal--success{border-color:var(--reevit-success)}.reevit-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--reevit-border)}.reevit-modal__branding{display:flex;align-items:center;gap:8px}.reevit-modal__logo{height:18px;width:auto;object-fit:contain}.reevit-modal__close{width:28px;height:28px;border-radius:var(--reevit-radius-sm);border:1px solid var(--reevit-border);background:transparent;color:var(--reevit-text-secondary);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.reevit-modal__close:hover{background:var(--reevit-surface);color:var(--reevit-text);border-color:var(--reevit-text-secondary)}.reevit-modal__amount{padding:32px 20px;text-align:center;background:var(--reevit-surface);border-bottom:1px solid var(--reevit-border)}.reevit-modal__amount-label{display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--reevit-text-secondary);margin-bottom:8px}.reevit-modal__amount-value{display:block;font-size:36px;font-weight:700;letter-spacing:-.03em;color:var(--reevit-text)}.reevit-modal__content{flex:1;overflow-y:auto;padding:20px}.reevit-modal__footer{padding:14px 20px;border-top:1px solid var(--reevit-border);text-align:center;background:var(--reevit-surface)}.reevit-modal__secured{font-size:11px;font-weight:500;color:var(--reevit-text-secondary);letter-spacing:.02em}.reevit-method-selector{margin-bottom:20px}.reevit-method-selector__label{font-size:12px;font-weight:500;color:var(--reevit-text);margin-bottom:12px;letter-spacing:.02em}.reevit-method-selector__options{display:flex;flex-direction:column;gap:8px}.reevit-method-option{display:flex;align-items:center;gap:12px;padding:14px 16px;background:transparent;border:1px solid var(--reevit-border);border-radius:var(--reevit-radius);cursor:pointer;transition:all .15s ease;text-align:left;width:100%}.reevit-method-option:hover{border-color:var(--reevit-text-secondary);background:var(--reevit-surface)}.reevit-method-option--selected{border-color:var(--reevit-text);background:var(--reevit-surface)}.reevit-method-option--disabled{opacity:.5;cursor:not-allowed}.reevit-method-option__icon{font-size:20px;flex-shrink:0;opacity:.8}.reevit-method-option__content{flex:1;min-width:0}.reevit-method-option__label{display:block;font-size:13px;font-weight:600;color:var(--reevit-text);letter-spacing:-.01em}.reevit-method-option__description{display:block;font-size:11px;color:var(--reevit-text-secondary);margin-top:2px;letter-spacing:.01em}.reevit-method-option__check{color:var(--reevit-text);flex-shrink:0;font-size:14px}.reevit-momo-form{display:flex;flex-direction:column;gap:16px}.reevit-momo-form__field{display:flex;flex-direction:column;gap:6px}.reevit-momo-form__label{font-size:12px;font-weight:500;color:var(--reevit-text);letter-spacing:.02em}.reevit-momo-form__input{padding:10px 14px;font-size:14px;border:1px solid var(--reevit-border);border-radius:var(--reevit-radius);background:transparent;color:var(--reevit-text);transition:all .15s ease;font-family:var(--reevit-font)}.reevit-momo-form__input:focus{outline:none;border-color:var(--reevit-text-secondary);background:var(--reevit-surface)}.reevit-momo-form__input--error{border-color:var(--reevit-error)}.reevit-momo-form__input--error:focus{border-color:var(--reevit-error)}.reevit-momo-form__formatted{font-size:11px;color:var(--reevit-text-secondary)}.reevit-momo-form__error{font-size:11px;color:var(--reevit-error)}.reevit-momo-form__networks{display:flex;gap:8px}.reevit-network-btn{flex:1;padding:10px 14px;font-size:12px;font-weight:600;border:1px solid var(--reevit-border);border-radius:var(--reevit-radius);background:transparent;color:var(--reevit-text);cursor:pointer;transition:all .15s ease;font-family:var(--reevit-font)}.reevit-network-btn:hover{border-color:var(--reevit-text);background:transparent}.reevit-network-btn:focus{outline:none;border-color:var(--reevit-text);box-shadow:0 0 0 2px var(--reevit-border)}.reevit-network-btn--selected{border-color:var(--reevit-text);background:var(--reevit-text);color:var(--reevit-background)}.reevit-network-btn--selected:hover{background:var(--reevit-text-secondary);border-color:var(--reevit-text-secondary)}.reevit-momo-form__actions{display:flex;gap:10px;margin-top:8px}.reevit-momo-form__hint{font-size:11px;color:var(--reevit-text-secondary);text-align:center;margin-top:4px}.reevit-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;font-size:13px;font-weight:600;border-radius:var(--reevit-radius);cursor:pointer;transition:all .15s ease;font-family:var(--reevit-font);border:none;min-height:42px;letter-spacing:-.01em}.reevit-btn--primary{flex:1;background:#fff;color:#0a0a0a;border:1px solid var(--reevit-border)}.reevit-btn--primary:hover:not(:disabled){background:#f5f5f5;border-color:var(--reevit-text-secondary)}.reevit-btn--primary:focus:not(:disabled){outline:none;border-color:var(--reevit-text);box-shadow:0 0 0 2px var(--reevit-border)}.reevit-btn--primary:active:not(:disabled){background:#eee;transform:scale(.98)}.reevit-btn--primary:disabled{opacity:.5;cursor:not-allowed}.reevit-btn--secondary{background:transparent;color:var(--reevit-text);border:1px solid var(--reevit-border)}.reevit-btn--secondary:hover:not(:disabled){background:transparent;border-color:var(--reevit-text)}.reevit-btn--secondary:focus:not(:disabled){outline:none;border-color:var(--reevit-text);box-shadow:0 0 0 2px var(--reevit-border)}.reevit-trigger-btn{padding:10px 18px;font-size:13px;font-weight:600;background:#fff;color:#0a0a0a;border:1px solid var(--reevit-border);border-radius:var(--reevit-radius);cursor:pointer;font-family:var(--reevit-font);transition:all .15s ease;letter-spacing:-.01em}.reevit-trigger-btn:hover{background:#f5f5f5;border-color:var(--reevit-text-secondary)}.reevit-trigger-btn:focus{outline:none;border-color:var(--reevit-text);box-shadow:0 0 0 2px var(--reevit-border)}@media(prefers-color-scheme:dark){.reevit-btn--primary{background:#fafafa;color:#0a0a0a}.reevit-btn--primary:hover:not(:disabled){background:#dedede}.reevit-btn--primary:active:not(:disabled){background:#cecece}.reevit-trigger-btn{background:#fafafa;color:#0a0a0a}.reevit-trigger-btn:hover{background:#dedede}}.reevit-loading,.reevit-success,.reevit-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;gap:12px}.reevit-success__icon{width:48px;height:48px;border-radius:50%;background:var(--reevit-success);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;animation:reevit-pop .3s ease-out}.reevit-error__icon{width:48px;height:48px;border-radius:50%;background:var(--reevit-error);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center}@keyframes reevit-pop{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}.reevit-success h3,.reevit-error h3{font-size:14px;font-weight:600;color:var(--reevit-text);margin:0;letter-spacing:-.01em}.reevit-success p,.reevit-error p{font-size:12px;color:var(--reevit-text-secondary);margin:0}.reevit-spinner{width:20px;height:20px;border:2px solid var(--reevit-border);border-top-color:var(--reevit-text);border-radius:50%;animation:reevit-spin .7s linear infinite}@keyframes reevit-spin{to{transform:rotate(360deg)}}.reevit-loading .reevit-spinner{width:32px;height:32px;border-width:2px}.reevit-loading p{font-size:12px;color:var(--reevit-text-secondary);margin:0}.reevit-psp-bridge{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;gap:12px}.reevit-psp-bridge__loading p{font-size:12px;color:var(--reevit-text-secondary);margin:0}.reevit-method-step__actions{margin-top:16px}@media(max-width:480px){.reevit-modal{max-width:100%;max-height:100%;border-radius:var(--reevit-radius-lg) var(--reevit-radius-lg) 0 0;margin-top:auto}.reevit-modal__amount-value{font-size:28px}.reevit-momo-form__networks{flex-direction:column}.reevit-momo-form__actions{flex-direction:column-reverse}.reevit-btn--secondary{flex:none}}
|
package/dist/vue.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap";:root{--reevit-primary: oklch(.922 0 0);--reevit-primary-hover: oklch(.85 0 0);--reevit-primary-foreground: oklch(.145 0 0);--reevit-background: oklch(1 0 0);--reevit-surface: oklch(.97 0 0);--reevit-border: oklch(.922 0 0);--reevit-text: oklch(.145 0 0);--reevit-text-secondary: oklch(.556 0 0);--reevit-muted: oklch(.708 0 0);--reevit-success: oklch(.696 .17 162.48);--reevit-error: oklch(.577 .245 27.325);--reevit-warning: oklch(.828 .189 84.429);--reevit-radius: .625rem;--reevit-radius-sm: .5rem;--reevit-radius-lg: .75rem;--reevit-font: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--reevit-shadow: 0 25px 50px -12px rgba(0, 0, 0, .15);--reevit-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1)}@media(prefers-color-scheme:dark){:root{--reevit-primary: oklch(.922 0 0);--reevit-primary-hover: oklch(.85 0 0);--reevit-primary-foreground: oklch(.145 0 0);--reevit-background: oklch(.145 0 0);--reevit-surface: oklch(.205 0 0);--reevit-border: oklch(1 0 0 / 10%);--reevit-text: oklch(.985 0 0);--reevit-text-secondary: oklch(.708 0 0);--reevit-muted: oklch(.556 0 0);--reevit-success: oklch(.696 .17 162.48);--reevit-error: oklch(.704 .191 22.216);--reevit-warning: oklch(.828 .189 84.429)}}.reevit-overlay{position:fixed;inset:0;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px;animation:reevit-fade-in .2s ease-out}@keyframes reevit-fade-in{0%{opacity:0}to{opacity:1}}.reevit-modal{background:var(--reevit-background);border-radius:var(--reevit-radius-lg);border:1px solid var(--reevit-border);box-shadow:var(--reevit-shadow);width:100%;max-width:400px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;font-family:var(--reevit-font);animation:reevit-slide-up .25s cubic-bezier(.22,1,.36,1)}@keyframes reevit-slide-up{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.reevit-modal--success{border-color:var(--reevit-success)}.reevit-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--reevit-border)}.reevit-modal__branding{display:flex;align-items:center;gap:8px}.reevit-modal__logo{font-size:14px;font-weight:600;color:var(--reevit-text);letter-spacing:-.02em}.reevit-modal__close{width:28px;height:28px;border-radius:var(--reevit-radius-sm);border:1px solid var(--reevit-border);background:transparent;color:var(--reevit-text-secondary);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.reevit-modal__close:hover{background:var(--reevit-surface);color:var(--reevit-text);border-color:var(--reevit-text-secondary)}.reevit-modal__amount{padding:32px 20px;text-align:center;background:var(--reevit-surface);border-bottom:1px solid var(--reevit-border)}.reevit-modal__amount-label{display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--reevit-text-secondary);margin-bottom:8px}.reevit-modal__amount-value{display:block;font-size:36px;font-weight:700;letter-spacing:-.03em;color:var(--reevit-text)}.reevit-modal__content{flex:1;overflow-y:auto;padding:20px}.reevit-modal__footer{padding:14px 20px;border-top:1px solid var(--reevit-border);text-align:center;background:var(--reevit-surface)}.reevit-modal__secured{font-size:11px;font-weight:500;color:var(--reevit-text-secondary);letter-spacing:.02em}.reevit-method-selector{margin-bottom:20px}.reevit-method-selector__label{font-size:12px;font-weight:500;color:var(--reevit-text);margin-bottom:12px;letter-spacing:.02em}.reevit-method-selector__options{display:flex;flex-direction:column;gap:8px}.reevit-method-option{display:flex;align-items:center;gap:12px;padding:14px 16px;background:transparent;border:1px solid var(--reevit-border);border-radius:var(--reevit-radius);cursor:pointer;transition:all .15s ease;text-align:left;width:100%}.reevit-method-option:hover{border-color:var(--reevit-text-secondary);background:var(--reevit-surface)}.reevit-method-option--selected{border-color:var(--reevit-text);background:var(--reevit-surface)}.reevit-method-option--disabled{opacity:.5;cursor:not-allowed}.reevit-method-option__icon{font-size:20px;flex-shrink:0;opacity:.8}.reevit-method-option__content{flex:1;min-width:0}.reevit-method-option__label{display:block;font-size:13px;font-weight:600;color:var(--reevit-text);letter-spacing:-.01em}.reevit-method-option__description{display:block;font-size:11px;color:var(--reevit-text-secondary);margin-top:2px;letter-spacing:.01em}.reevit-method-option__check{color:var(--reevit-text);flex-shrink:0;font-size:14px}.reevit-momo-form{display:flex;flex-direction:column;gap:16px}.reevit-momo-form__field{display:flex;flex-direction:column;gap:6px}.reevit-momo-form__label{font-size:12px;font-weight:500;color:var(--reevit-text);letter-spacing:.02em}.reevit-momo-form__input{padding:10px 14px;font-size:14px;border:1px solid var(--reevit-border);border-radius:var(--reevit-radius);background:transparent;color:var(--reevit-text);transition:all .15s ease;font-family:var(--reevit-font)}.reevit-momo-form__input:focus{outline:none;border-color:var(--reevit-text-secondary);background:var(--reevit-surface)}.reevit-momo-form__input--error{border-color:var(--reevit-error)}.reevit-momo-form__input--error:focus{border-color:var(--reevit-error)}.reevit-momo-form__formatted{font-size:11px;color:var(--reevit-text-secondary)}.reevit-momo-form__error{font-size:11px;color:var(--reevit-error)}.reevit-momo-form__networks{display:flex;gap:8px}.reevit-network-btn{flex:1;padding:10px 14px;font-size:12px;font-weight:600;border:1px solid var(--reevit-border);border-radius:var(--reevit-radius);background:transparent;color:var(--reevit-text);cursor:pointer;transition:all .15s ease;font-family:var(--reevit-font)}.reevit-network-btn:hover{border-color:var(--reevit-text-secondary);background:var(--reevit-surface)}.reevit-network-btn--selected{border-color:var(--reevit-text);background:var(--reevit-text);color:var(--reevit-background)}.reevit-momo-form__actions{display:flex;gap:10px;margin-top:8px}.reevit-momo-form__hint{font-size:11px;color:var(--reevit-text-secondary);text-align:center;margin-top:4px}.reevit-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;font-size:13px;font-weight:600;border-radius:var(--reevit-radius);cursor:pointer;transition:all .15s ease;font-family:var(--reevit-font);border:none;min-height:42px;letter-spacing:-.01em}.reevit-btn--primary{flex:1;background:var(--reevit-primary);color:var(--reevit-primary-foreground)}.reevit-btn--primary:hover:not(:disabled){background:var(--reevit-primary-hover)}.reevit-btn--primary:disabled{opacity:.5;cursor:not-allowed}.reevit-btn--secondary{background:transparent;color:var(--reevit-text);border:1px solid var(--reevit-border)}.reevit-btn--secondary:hover:not(:disabled){background:var(--reevit-surface);border-color:var(--reevit-text-secondary)}.reevit-trigger-btn{padding:10px 18px;font-size:13px;font-weight:600;background:var(--reevit-primary);color:var(--reevit-primary-foreground);border:none;border-radius:var(--reevit-radius);cursor:pointer;font-family:var(--reevit-font);transition:all .15s ease;letter-spacing:-.01em}.reevit-trigger-btn:hover{background:var(--reevit-primary-hover)}.reevit-loading,.reevit-success,.reevit-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;gap:12px}.reevit-success__icon{width:48px;height:48px;border-radius:50%;background:var(--reevit-success);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;animation:reevit-pop .3s ease-out}.reevit-error__icon{width:48px;height:48px;border-radius:50%;background:var(--reevit-error);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center}@keyframes reevit-pop{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}.reevit-success h3,.reevit-error h3{font-size:14px;font-weight:600;color:var(--reevit-text);margin:0;letter-spacing:-.01em}.reevit-success p,.reevit-error p{font-size:12px;color:var(--reevit-text-secondary);margin:0}.reevit-spinner{width:20px;height:20px;border:2px solid var(--reevit-border);border-top-color:var(--reevit-text);border-radius:50%;animation:reevit-spin .7s linear infinite}@keyframes reevit-spin{to{transform:rotate(360deg)}}.reevit-loading .reevit-spinner{width:32px;height:32px;border-width:2px}.reevit-loading p{font-size:12px;color:var(--reevit-text-secondary);margin:0}.reevit-psp-bridge{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;gap:12px}.reevit-psp-bridge__loading p{font-size:12px;color:var(--reevit-text-secondary);margin:0}.reevit-method-step__actions{margin-top:16px}@media(max-width:480px){.reevit-modal{max-width:100%;max-height:100%;border-radius:var(--reevit-radius-lg) var(--reevit-radius-lg) 0 0;margin-top:auto}.reevit-modal__amount-value{font-size:28px}.reevit-momo-form__networks{flex-direction:column}.reevit-momo-form__actions{flex-direction:column-reverse}.reevit-btn--secondary{flex:none}}
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap";:root{--reevit-primary: oklch(.922 0 0);--reevit-primary-hover: oklch(.85 0 0);--reevit-primary-foreground: oklch(.145 0 0);--reevit-background: oklch(1 0 0);--reevit-surface: oklch(.97 0 0);--reevit-border: oklch(.922 0 0);--reevit-text: oklch(.145 0 0);--reevit-text-secondary: oklch(.556 0 0);--reevit-muted: oklch(.708 0 0);--reevit-success: oklch(.696 .17 162.48);--reevit-error: oklch(.577 .245 27.325);--reevit-warning: oklch(.828 .189 84.429);--reevit-radius: .625rem;--reevit-radius-sm: .5rem;--reevit-radius-lg: .75rem;--reevit-font: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--reevit-shadow: 0 25px 50px -12px rgba(0, 0, 0, .15);--reevit-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1)}@media(prefers-color-scheme:dark){:root{--reevit-primary: oklch(.922 0 0);--reevit-primary-hover: oklch(.85 0 0);--reevit-primary-foreground: oklch(.145 0 0);--reevit-background: oklch(.145 0 0);--reevit-surface: oklch(.205 0 0);--reevit-border: oklch(1 0 0 / 10%);--reevit-text: oklch(.985 0 0);--reevit-text-secondary: oklch(.708 0 0);--reevit-muted: oklch(.556 0 0);--reevit-success: oklch(.696 .17 162.48);--reevit-error: oklch(.704 .191 22.216);--reevit-warning: oklch(.828 .189 84.429)}}.reevit-overlay{position:fixed;inset:0;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px;animation:reevit-fade-in .2s ease-out}@keyframes reevit-fade-in{0%{opacity:0}to{opacity:1}}.reevit-modal{background:var(--reevit-background);border-radius:var(--reevit-radius-lg);border:1px solid var(--reevit-border);box-shadow:var(--reevit-shadow);width:100%;max-width:400px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;font-family:var(--reevit-font);animation:reevit-slide-up .25s cubic-bezier(.22,1,.36,1)}@keyframes reevit-slide-up{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.reevit-modal--success{border-color:var(--reevit-success)}.reevit-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--reevit-border)}.reevit-modal__branding{display:flex;align-items:center;gap:8px}.reevit-modal__logo{height:18px;width:auto;object-fit:contain}.reevit-modal__close{width:28px;height:28px;border-radius:var(--reevit-radius-sm);border:1px solid var(--reevit-border);background:transparent;color:var(--reevit-text-secondary);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.reevit-modal__close:hover{background:var(--reevit-surface);color:var(--reevit-text);border-color:var(--reevit-text-secondary)}.reevit-modal__amount{padding:32px 20px;text-align:center;background:var(--reevit-surface);border-bottom:1px solid var(--reevit-border)}.reevit-modal__amount-label{display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--reevit-text-secondary);margin-bottom:8px}.reevit-modal__amount-value{display:block;font-size:36px;font-weight:700;letter-spacing:-.03em;color:var(--reevit-text)}.reevit-modal__content{flex:1;overflow-y:auto;padding:20px}.reevit-modal__footer{padding:14px 20px;border-top:1px solid var(--reevit-border);text-align:center;background:var(--reevit-surface)}.reevit-modal__secured{font-size:11px;font-weight:500;color:var(--reevit-text-secondary);letter-spacing:.02em}.reevit-method-selector{margin-bottom:20px}.reevit-method-selector__label{font-size:12px;font-weight:500;color:var(--reevit-text);margin-bottom:12px;letter-spacing:.02em}.reevit-method-selector__options{display:flex;flex-direction:column;gap:8px}.reevit-method-option{display:flex;align-items:center;gap:12px;padding:14px 16px;background:transparent;border:1px solid var(--reevit-border);border-radius:var(--reevit-radius);cursor:pointer;transition:all .15s ease;text-align:left;width:100%}.reevit-method-option:hover{border-color:var(--reevit-text-secondary);background:var(--reevit-surface)}.reevit-method-option--selected{border-color:var(--reevit-text);background:var(--reevit-surface)}.reevit-method-option--disabled{opacity:.5;cursor:not-allowed}.reevit-method-option__icon{font-size:20px;flex-shrink:0;opacity:.8}.reevit-method-option__content{flex:1;min-width:0}.reevit-method-option__label{display:block;font-size:13px;font-weight:600;color:var(--reevit-text);letter-spacing:-.01em}.reevit-method-option__description{display:block;font-size:11px;color:var(--reevit-text-secondary);margin-top:2px;letter-spacing:.01em}.reevit-method-option__check{color:var(--reevit-text);flex-shrink:0;font-size:14px}.reevit-momo-form{display:flex;flex-direction:column;gap:16px}.reevit-momo-form__field{display:flex;flex-direction:column;gap:6px}.reevit-momo-form__label{font-size:12px;font-weight:500;color:var(--reevit-text);letter-spacing:.02em}.reevit-momo-form__input{padding:10px 14px;font-size:14px;border:1px solid var(--reevit-border);border-radius:var(--reevit-radius);background:transparent;color:var(--reevit-text);transition:all .15s ease;font-family:var(--reevit-font)}.reevit-momo-form__input:focus{outline:none;border-color:var(--reevit-text-secondary);background:var(--reevit-surface)}.reevit-momo-form__input--error{border-color:var(--reevit-error)}.reevit-momo-form__input--error:focus{border-color:var(--reevit-error)}.reevit-momo-form__formatted{font-size:11px;color:var(--reevit-text-secondary)}.reevit-momo-form__error{font-size:11px;color:var(--reevit-error)}.reevit-momo-form__networks{display:flex;gap:8px}.reevit-network-btn{flex:1;padding:10px 14px;font-size:12px;font-weight:600;border:1px solid var(--reevit-border);border-radius:var(--reevit-radius);background:transparent;color:var(--reevit-text);cursor:pointer;transition:all .15s ease;font-family:var(--reevit-font)}.reevit-network-btn:hover{border-color:var(--reevit-text);background:transparent}.reevit-network-btn:focus{outline:none;border-color:var(--reevit-text);box-shadow:0 0 0 2px var(--reevit-border)}.reevit-network-btn--selected{border-color:var(--reevit-text);background:var(--reevit-text);color:var(--reevit-background)}.reevit-network-btn--selected:hover{background:var(--reevit-text-secondary);border-color:var(--reevit-text-secondary)}.reevit-momo-form__actions{display:flex;gap:10px;margin-top:8px}.reevit-momo-form__hint{font-size:11px;color:var(--reevit-text-secondary);text-align:center;margin-top:4px}.reevit-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;font-size:13px;font-weight:600;border-radius:var(--reevit-radius);cursor:pointer;transition:all .15s ease;font-family:var(--reevit-font);border:none;min-height:42px;letter-spacing:-.01em}.reevit-btn--primary{flex:1;background:#fff;color:#0a0a0a;border:1px solid var(--reevit-border)}.reevit-btn--primary:hover:not(:disabled){background:#f5f5f5;border-color:var(--reevit-text-secondary)}.reevit-btn--primary:focus:not(:disabled){outline:none;border-color:var(--reevit-text);box-shadow:0 0 0 2px var(--reevit-border)}.reevit-btn--primary:active:not(:disabled){background:#eee;transform:scale(.98)}.reevit-btn--primary:disabled{opacity:.5;cursor:not-allowed}.reevit-btn--secondary{background:transparent;color:var(--reevit-text);border:1px solid var(--reevit-border)}.reevit-btn--secondary:hover:not(:disabled){background:transparent;border-color:var(--reevit-text)}.reevit-btn--secondary:focus:not(:disabled){outline:none;border-color:var(--reevit-text);box-shadow:0 0 0 2px var(--reevit-border)}.reevit-trigger-btn{padding:10px 18px;font-size:13px;font-weight:600;background:#fff;color:#0a0a0a;border:1px solid var(--reevit-border);border-radius:var(--reevit-radius);cursor:pointer;font-family:var(--reevit-font);transition:all .15s ease;letter-spacing:-.01em}.reevit-trigger-btn:hover{background:#f5f5f5;border-color:var(--reevit-text-secondary)}.reevit-trigger-btn:focus{outline:none;border-color:var(--reevit-text);box-shadow:0 0 0 2px var(--reevit-border)}@media(prefers-color-scheme:dark){.reevit-btn--primary{background:#fafafa;color:#0a0a0a}.reevit-btn--primary:hover:not(:disabled){background:#dedede}.reevit-btn--primary:active:not(:disabled){background:#cecece}.reevit-trigger-btn{background:#fafafa;color:#0a0a0a}.reevit-trigger-btn:hover{background:#dedede}}.reevit-loading,.reevit-success,.reevit-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;gap:12px}.reevit-success__icon{width:48px;height:48px;border-radius:50%;background:var(--reevit-success);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;animation:reevit-pop .3s ease-out}.reevit-error__icon{width:48px;height:48px;border-radius:50%;background:var(--reevit-error);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center}@keyframes reevit-pop{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}.reevit-success h3,.reevit-error h3{font-size:14px;font-weight:600;color:var(--reevit-text);margin:0;letter-spacing:-.01em}.reevit-success p,.reevit-error p{font-size:12px;color:var(--reevit-text-secondary);margin:0}.reevit-spinner{width:20px;height:20px;border:2px solid var(--reevit-border);border-top-color:var(--reevit-text);border-radius:50%;animation:reevit-spin .7s linear infinite}@keyframes reevit-spin{to{transform:rotate(360deg)}}.reevit-loading .reevit-spinner{width:32px;height:32px;border-width:2px}.reevit-loading p{font-size:12px;color:var(--reevit-text-secondary);margin:0}.reevit-psp-bridge{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;gap:12px}.reevit-psp-bridge__loading p{font-size:12px;color:var(--reevit-text-secondary);margin:0}.reevit-method-step__actions{margin-top:16px}@media(max-width:480px){.reevit-modal{max-width:100%;max-height:100%;border-radius:var(--reevit-radius-lg) var(--reevit-radius-lg) 0 0;margin-top:auto}.reevit-modal__amount-value{font-size:28px}.reevit-momo-form__networks{flex-direction:column}.reevit-momo-form__actions{flex-direction:column-reverse}.reevit-btn--secondary{flex:none}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reevit/vue",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "Unified Payment Widget for Vue 3 Applications",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"vue": "^3.3.0"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@reevit/core": "^0.2.
|
|
47
|
+
"@reevit/core": "^0.2.3"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@types/node": "^20.0.0",
|