diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 83f3c07..1ae156a 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react'
import { useRouter } from 'next/navigation'
import Script from 'next/script'
import { motion, AnimatePresence } from 'framer-motion'
-import { CreditCard, Lock, ShieldCheck, Bank } from '@phosphor-icons/react'
+import { Lock, ShieldCheck } from '@phosphor-icons/react'
import { initMollie, getMollie, MOLLIE_FIELD_STYLES, type MollieComponent } from '@/lib/mollie'
import { createEmbeddedCheckout, createCheckoutSession } from '@/lib/api/billing'
@@ -16,46 +16,68 @@ interface PaymentFormProps {
vatId: string
}
-const PAYMENT_METHODS: Array<{ id: string; label: string; description?: string; icon: string }> = [
- { id: 'card', label: 'Card', description: 'Visa, Mastercard, Amex', icon: 'card' },
- { id: 'bancontact', label: 'Bancontact', icon: 'bancontact' },
- { id: 'ideal', label: 'iDEAL', icon: 'ideal' },
- { id: 'applepay', label: 'Apple Pay', icon: 'applepay' },
- { id: 'directdebit', label: 'SEPA Direct Debit', icon: 'sepa' },
- { id: 'banktransfer', label: 'Bank Transfer', icon: 'banktransfer' },
+const PAYMENT_METHODS = [
+ { id: 'card', label: 'Card' },
+ { id: 'bancontact', label: 'Bancontact' },
+ { id: 'ideal', label: 'iDEAL' },
+ { id: 'applepay', label: 'Apple Pay' },
+ { id: 'googlepay', label: 'Google Pay' },
+ { id: 'directdebit', label: 'SEPA' },
]
-function MethodIcon({ type, className }: { type: string; className?: string }) {
- const cn = className || 'h-6 w-6'
+function MethodLogo({ type }: { type: string }) {
switch (type) {
case 'card':
- return