Browse Source
- Added Checkout and Payment pages to handle user authentication and order processing. - Introduced MockPayPalButton for simulating payment during development. - Updated CartSheet and CartSidebar components to navigate to the new checkout page. - Enhanced Cart UI with responsive design for mobile and desktop views. - Implemented order confirmation and success pages to provide feedback after payment completion. These changes complete the checkout and payment functionality, improving the overall user experience and ensuring a seamless transition from cart to order confirmation.main
Bastian Masanek
2 months ago
10 changed files with 169 additions and 80 deletions
@ -0,0 +1,106 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
/** |
||||
|
* Mock PayPal Button Component |
||||
|
* |
||||
|
* Simulates a PayPal payment for development/testing purposes. |
||||
|
* In production, this would be replaced with the real PayPal SDK integration. |
||||
|
* |
||||
|
* Features: |
||||
|
* - Displays mock PayPal button with branding |
||||
|
* - Simulates 2-second payment processing |
||||
|
* - Emits success event after "payment" completes |
||||
|
* - Shows loading state during processing |
||||
|
* - Displays amount to be paid |
||||
|
*/ |
||||
|
|
||||
|
interface Props { |
||||
|
orderId: string |
||||
|
amount: number |
||||
|
} |
||||
|
|
||||
|
const props = defineProps<Props>() |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
success: [] |
||||
|
}>() |
||||
|
|
||||
|
const isProcessing = ref(false) |
||||
|
|
||||
|
/** |
||||
|
* Simulate PayPal payment |
||||
|
* In production, this would integrate with PayPal SDK |
||||
|
*/ |
||||
|
async function handlePayment() { |
||||
|
isProcessing.value = true |
||||
|
|
||||
|
try { |
||||
|
// Simulate payment processing delay (2 seconds) |
||||
|
await new Promise((resolve) => setTimeout(resolve, 2000)) |
||||
|
|
||||
|
// In production: Call PayPal API to process payment |
||||
|
// const result = await processPayPalPayment(props.orderId, props.amount) |
||||
|
|
||||
|
// Emit success event |
||||
|
emit('success') |
||||
|
} catch (error) { |
||||
|
console.error('Mock payment failed:', error) |
||||
|
// In production: Show error message to user |
||||
|
} finally { |
||||
|
isProcessing.value = false |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="space-y-4"> |
||||
|
<!-- Payment Amount Info --> |
||||
|
<div class="flex items-center justify-between p-4 bg-white/5 rounded-lg border border-white/10"> |
||||
|
<span class="text-white/80">Zu zahlen:</span> |
||||
|
<span class="text-xl font-bold text-experimenta-accent"> |
||||
|
{{ |
||||
|
new Intl.NumberFormat('de-DE', { |
||||
|
style: 'currency', |
||||
|
currency: 'EUR', |
||||
|
}).format(amount) |
||||
|
}} |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Mock PayPal Button --> |
||||
|
<button |
||||
|
@click="handlePayment" |
||||
|
:disabled="isProcessing" |
||||
|
class="w-full relative overflow-hidden bg-[#0070ba] hover:bg-[#005ea6] disabled:bg-[#0070ba]/50 disabled:cursor-not-allowed text-white font-bold py-4 px-6 rounded-lg transition-colors shadow-lg" |
||||
|
> |
||||
|
<span v-if="!isProcessing" class="flex items-center justify-center gap-3"> |
||||
|
<!-- PayPal Logo SVG --> |
||||
|
<svg |
||||
|
class="w-6 h-6" |
||||
|
viewBox="0 0 24 24" |
||||
|
fill="currentColor" |
||||
|
xmlns="http://www.w3.org/2000/svg" |
||||
|
> |
||||
|
<path |
||||
|
d="M20.067 8.478c.492.88.556 2.014.3 3.327-.74 3.806-3.276 5.12-6.514 5.12h-.5a.805.805 0 00-.794.683l-.94 5.96-.267 1.69a.404.404 0 01-.4.342H7.55a.48.48 0 01-.474-.555l.912-5.782.916-5.816a.959.959 0 01.948-.812h1.964c4.332 0 7.299-1.775 8.06-6.145a4.803 4.803 0 00-.808-4.014 6.186 6.186 0 00-1.636-1.293A7.943 7.943 0 0013.784 0H6.732A.959.959 0 005.784.812L2.076 23.235a.48.48 0 00.474.555h3.952a.959.959 0 00.948-.812l.912-5.782h1.74c4.919 0 8.74-2.016 9.965-7.718z" |
||||
|
/> |
||||
|
</svg> |
||||
|
<span>Mit PayPal bezahlen (Mock)</span> |
||||
|
</span> |
||||
|
<span v-else class="flex items-center justify-center gap-2"> |
||||
|
<div |
||||
|
class="animate-spin rounded-full h-5 w-5 border-2 border-white/20 border-t-white" |
||||
|
/> |
||||
|
Zahlung wird verarbeitet... |
||||
|
</span> |
||||
|
</button> |
||||
|
|
||||
|
<!-- Mock Info --> |
||||
|
<div class="text-center"> |
||||
|
<p class="text-xs text-white/40 italic"> |
||||
|
Dies ist ein Mock-PayPal-Button für Entwicklungszwecke. |
||||
|
<br /> |
||||
|
Die Zahlung wird simuliert und ist nicht echt. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
Loading…
Reference in new issue