diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx index 1ae156a..4ee8f61 100644 --- a/components/checkout/PaymentForm.tsx +++ b/components/checkout/PaymentForm.tsx @@ -25,60 +25,30 @@ const PAYMENT_METHODS = [ { id: 'directdebit', label: 'SEPA' }, ] +const METHOD_LOGOS: Record = { + card: { src: ['/images/payment/visa.svg', '/images/payment/mastercard.svg'], alt: 'Card' }, + bancontact: { src: '/images/payment/bancontact.svg', alt: 'Bancontact' }, + ideal: { src: '/images/payment/ideal.svg', alt: 'iDEAL' }, + applepay: { src: '/images/payment/applepay.svg', alt: 'Apple Pay' }, + googlepay: { src: '/images/payment/googlepay.svg', alt: 'Google Pay' }, + directdebit: { src: '/images/payment/sepa.svg', alt: 'SEPA' }, +} + function MethodLogo({ type }: { type: string }) { - switch (type) { - case 'card': - return ( -
- - - - - -
- ) - case 'bancontact': - return ( - - - - - - ) - case 'ideal': - return ( - - - - - - ) - case 'applepay': - return ( - - - - ) - case 'googlepay': - return ( - - - - - - - ) - case 'directdebit': - return ( - - - - - - ) - default: - return null + const logo = METHOD_LOGOS[type] + if (!logo) return null + + if (Array.isArray(logo.src)) { + return ( +
+ {logo.src.map((s) => ( + + ))} +
+ ) } + + return {logo.alt} } const mollieFieldBase = diff --git a/public/images/payment/applepay.svg b/public/images/payment/applepay.svg new file mode 100644 index 0000000..482c190 --- /dev/null +++ b/public/images/payment/applepay.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/images/payment/bancontact.svg b/public/images/payment/bancontact.svg new file mode 100644 index 0000000..cefe1ba --- /dev/null +++ b/public/images/payment/bancontact.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/images/payment/googlepay.svg b/public/images/payment/googlepay.svg new file mode 100644 index 0000000..fa96e00 --- /dev/null +++ b/public/images/payment/googlepay.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/images/payment/ideal.svg b/public/images/payment/ideal.svg new file mode 100644 index 0000000..69cb7cc --- /dev/null +++ b/public/images/payment/ideal.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/payment/mastercard.svg b/public/images/payment/mastercard.svg new file mode 100644 index 0000000..6aa2ab8 --- /dev/null +++ b/public/images/payment/mastercard.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/payment/sepa.svg b/public/images/payment/sepa.svg new file mode 100644 index 0000000..ba405fd --- /dev/null +++ b/public/images/payment/sepa.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/payment/visa.svg b/public/images/payment/visa.svg new file mode 100644 index 0000000..eb1507e --- /dev/null +++ b/public/images/payment/visa.svg @@ -0,0 +1,7 @@ + + + + + + +