1 line
7.7 KiB
JavaScript
1 line
7.7 KiB
JavaScript
import{A as e,B as t,C as n,D as r,G as i,S as a,b as o,f as s,ft as c,j as l,l as u,m as d,o as f,p,r as m,s as h,u as g,ut as _,x as v}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{o as y}from"./vue-router-Cyqru1db.js";import{t as b}from"./preload-helper-ca-nBW7U.js";import{t as x}from"./i18n-BvZbJICa.js";import{l as S,o as C,p as w,s as T}from"./api-CJ2exAVU.js";import{t as E}from"./Button-JT3QbcL8.js";import{t as D}from"./ExpressCheckoutMount-BekeV0fR.js";import{t as O}from"./checkout-DTEUVxo-.js";import{t as k}from"./Input-RN3gn2df.js";var A={class:`flex flex-col gap-3`},j={key:0,class:`flex flex-col gap-4 rounded-sm border border-line bg-paper p-5`},M={class:`grid grid-cols-2 gap-4`},N={key:2,class:`text-[13px] text-danger`},P={key:3,class:`flex flex-col gap-4 rounded-sm border border-dashed border-line-strong bg-paper p-6`,role:`presentation`,"aria-hidden":`true`},F={__name:`StripePaymentMount`,props:{intent:{type:Object,default:null},returnUrl:{type:String,required:!0}},emits:[`ready`,`error`],setup(r,{expose:i}){let o=r,l=t(null),p=t(null),m=t(!1),y=t(``),x=f(()=>/^pi_stub_/.test(o.intent?.clientSecret||``)),S=t({number:``,expiry:``,cvc:``}),C=t({});function w(e){return String(e).replace(/\D/g,``).slice(0,19).replace(/(.{4})/g,`$1 `).trim()}function T(e){let t=String(e).replace(/\D/g,``).slice(0,4);return t.length<3?t:`${t.slice(0,2)}/${t.slice(2)}`}function E(e,t){e===`number`?S.value.number=w(t):e===`expiry`?S.value.expiry=T(t):S.value.cvc=String(t).replace(/\D/g,``).slice(0,4),C.value[e]&&delete C.value[e]}async function D(){if(!(!o.intent||typeof window>`u`)){if(x.value){m.value=!0;return}try{let e=[`@stripe`,`stripe-js`].join(`/`),{loadStripe:t}=await b(()=>import(e),[]),n=await t(o.intent.publishableKey);if(!n)throw Error(`Stripe.js failed to initialise.`);l.value=n;let r=n.elements({clientSecret:o.intent.clientSecret,appearance:{theme:`flat`,variables:{colorPrimary:`#006548`,colorBackground:`#ffffff`,colorText:`#0f3825`,colorDanger:`#b23a2a`,fontFamily:`"DM Sans", ui-sans-serif, system-ui, sans-serif`,borderRadius:`10px`,spacingUnit:`4px`},rules:{".Input":{border:`1px solid color-mix(in srgb, #006548 11%, transparent)`,boxShadow:`none`,padding:`12px 16px`},".Input:focus":{border:`1px solid #006548`,boxShadow:`none`},".Label":{fontSize:`11px`,fontWeight:`700`,letterSpacing:`0.08em`,textTransform:`uppercase`,color:`color-mix(in oklch, #006548, white 35%)`}}}});p.value=r;let i=r.create(`payment`,{layout:{type:`tabs`,defaultCollapsed:!1}});i.mount(`#stripe-payment-element`),i.on(`ready`,()=>{m.value=!0}),i.on(`loaderror`,e=>{y.value=e?.error?.message||`Failed to load payment form.`})}catch(e){y.value=e?.message||String(e)}}}async function O(){if(x.value){let e={};return S.value.number.replace(/\s+/g,``).length<13&&(e.number=`Bitte vollständige Kartennummer eingeben.`),/^\d{2}\/\d{2}$/.test(S.value.expiry)||(e.expiry=`MM/JJ`),S.value.cvc.length<3&&(e.cvc=`CVC fehlt`),C.value=e,Object.keys(e).length?{error:{message:`Bitte Kartendaten prüfen.`}}:(await new Promise(e=>setTimeout(e,600)),{paymentIntent:{id:(o.intent.clientSecret||``).split(`_secret_`)[0]||`pi_stub`,status:`succeeded`}})}return!l.value||!p.value?{error:{message:`Payment form not ready.`}}:l.value.confirmPayment({elements:p.value,confirmParams:{return_url:o.returnUrl}})}return i({confirm:O,ready:m}),a(()=>{o.intent&&D()}),e(()=>o.intent?.clientSecret,e=>{e&&D()}),v(()=>{l.value=null,p.value=null}),(e,t)=>(n(),g(`div`,A,[x.value?(n(),g(`div`,j,[t[3]||=h(`div`,{class:`flex items-center justify-between gap-3 flex-wrap`},[h(`p`,{class:`eyebrow`},`Karte`),h(`p`,{class:`text-[11px] text-muted`},`Demo · keine echte Belastung`)],-1),d(k,{"model-value":S.value.number,label:`Kartennummer`,placeholder:`4242 4242 4242 4242`,error:C.value.number,required:``,"onUpdate:modelValue":t[0]||=e=>E(`number`,e)},null,8,[`model-value`,`error`]),h(`div`,M,[d(k,{"model-value":S.value.expiry,label:`Ablauf`,placeholder:`MM/JJ`,error:C.value.expiry,required:``,"onUpdate:modelValue":t[1]||=e=>E(`expiry`,e)},null,8,[`model-value`,`error`]),d(k,{"model-value":S.value.cvc,label:`CVC`,placeholder:`123`,error:C.value.cvc,required:``,"onUpdate:modelValue":t[2]||=e=>E(`cvc`,e)},null,8,[`model-value`,`error`])])])):r.intent?(n(),g(`div`,{key:1,id:`stripe-payment-element`,class:_([`rounded-sm border border-line bg-paper p-4 min-h-[280px]`,{"opacity-60":!m.value}]),"aria-live":`polite`},null,2)):u(``,!0),y.value?(n(),g(`p`,N,c(y.value),1)):u(``,!0),r.intent?u(``,!0):(n(),g(`div`,P,[...t[4]||=[s(`<p class="eyebrow">Zahlung</p><p class="text-[13px] text-muted leading-relaxed"> Das Zahlungsformular erscheint nach dem nächsten Schritt. </p><div class="flex flex-col gap-3 opacity-60"><div class="h-3 rounded-xs bg-brand-wash w-1/3"></div><div class="h-12 rounded-sm bg-cream border border-line"></div><div class="h-3 rounded-xs bg-brand-wash w-1/4"></div><div class="grid grid-cols-2 gap-3"><div class="h-12 rounded-sm bg-cream border border-line"></div><div class="h-12 rounded-sm bg-cream border border-line"></div></div></div>`,3)]]))]))}},I={class:`flex flex-col gap-6`},L={class:`rounded-md border border-line bg-paper p-6 md:p-8`},R={class:`rounded-md border border-line bg-paper p-6 md:p-8`},z={key:0,class:`text-sm text-danger`,role:`alert`,"aria-live":`polite`},B={class:`fixed inset-x-0 bottom-0 z-30 bg-cream border-t border-line`,role:`contentinfo`},V={class:`mx-auto w-full max-w-7xl px-6 sm:px-8 md:px-12 lg:px-16 py-3 flex gap-3 sm:justify-between`,style:{paddingBottom:`max(0.75rem, env(safe-area-inset-bottom))`}},H={class:`flex-1 sm:flex-initial`},U={__name:`PaymentStep`,setup(e){let{t:a}=x(),s=w(),_=O(),v=y(),b=t(null),k=t(!1),A=t(``),j=t(null),M=t(!1),N=t(null),P=t(null),U=f(()=>b.value?a(`checkout.cta.pay`):a(`checkout.cta.review`)),W=f(()=>typeof window>`u`?`/checkout/processing`:`${window.location.origin}/checkout/processing?order=${b.value?.orderId||``}`);async function G(){if(A.value=``,!s.items.length){A.value=a(`checkout.error.empty`);return}k.value=!0;try{if(!b.value){let e=_.billingSame?_.shippingAddress:_.billingAddress;b.value=await C({email:_.email,shippingAddress:_.shippingAddress,billingAddress:e,acceptsMarketing:_.acceptsMarketing}),k.value=!1;return}let e=await N.value?.confirm();if(e?.error){A.value=e.error.message||a(`checkout.error.payment`);return}if(e?.paymentIntent?.status===`succeeded`){let e=b.value.orderId;await S(),_.reset(),v.push({path:`/checkout/success`,query:{order:e}});return}}catch(e){A.value=e?.message||a(`checkout.error.generic`)}finally{k.value=!1}}async function K({wallet:e}){if(!s.items.length){A.value=a(`checkout.error.empty`);return}A.value=``,M.value=!0;try{let t=await T({wallet:e});j.value=t,await o();let n=await P.value?.confirm();if(n?.error){A.value=n.error.message||a(`checkout.error.payment`);return}if(n?.paymentIntent?.status===`succeeded`){let e=t.orderId;await S(),_.reset(),v.push({path:`/checkout/success`,query:{order:e}})}}catch(e){A.value=e?.message||a(`checkout.error.generic`)}finally{M.value=!1}}function q(e){A.value=e?.message||a(`checkout.error.payment`),M.value=!1}return(e,t)=>{let o=r(`RouterLink`);return n(),g(m,null,[h(`section`,I,[h(`section`,L,[d(D,{ref_key:`expressMountRef`,ref:P,intent:j.value,"return-url":W.value,busy:M.value,onPay:K,onError:q},null,8,[`intent`,`return-url`,`busy`])]),h(`section`,R,[d(F,{ref_key:`paymentMountRef`,ref:N,intent:b.value,"return-url":W.value},null,8,[`intent`,`return-url`])]),A.value?(n(),g(`p`,z,c(A.value),1)):u(``,!0)]),h(`footer`,B,[h(`div`,V,[d(o,{to:`/checkout/shipping`,class:`flex-1 sm:flex-initial`},{default:l(()=>[d(E,{variant:`primary`,size:`lg`,block:``,type:`button`},{default:l(()=>[p(c(i(a)(`checkout.back`)),1)]),_:1})]),_:1}),h(`div`,H,[d(E,{variant:`accent`,size:`lg`,block:``,loading:k.value,disabled:!i(s).items.length,onClick:G},{default:l(()=>[p(c(U.value),1)]),_:1},8,[`loading`,`disabled`])])])])],64)}}};export{U as default}; |