You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.3 KiB
106 lines
3.3 KiB
<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>
|
|
|