Paddle helpers

1import * as React from "react"
2import type { PaddlePaymentMethodType, PaddleCardType } from "./paddle-payment-method-display"
3 
4// --- Brand icon components ---
5 
6function VisaIcon({ className }: { className?: string }) {
7  return (
8    <svg viewBox="0 0 38 24" className={className} aria-hidden="true">
9      <rect width="38" height="24" rx="4" fill="currentColor" fillOpacity="0.08" />
10      <path
11        d="M16.5 7.5L14.1 16.5H11.7L14.1 7.5H16.5ZM26.4 13.5L27.6 10.1L28.3 13.5H26.4ZM29.1 16.5H31.3L29.4 7.5H27.4C26.9 7.5 26.5 7.8 26.3 8.2L22.8 16.5H25.3L25.8 15.1H28.8L29.1 16.5ZM23.1 13.5C23.1 11.1 19.7 11 19.7 9.9C19.7 9.6 20 9.2 20.7 9.1C21 9.1 22 9 23.1 9.5L23.5 7.8C22.9 7.6 22.1 7.4 21.1 7.4C18.7 7.4 17.1 8.7 17.1 10.5C17.1 11.9 18.4 12.6 19.3 13.1C20.3 13.5 20.6 13.8 20.6 14.2C20.6 14.8 19.9 15.1 19.2 15.1C18 15.1 17.3 14.8 16.7 14.5L16.3 16.3C16.9 16.6 18 16.8 19.1 16.8C21.6 16.8 23.1 15.5 23.1 13.5Z"
12        fill="currentColor"
13      />
14    </svg>
15  )
16}
17 
18function MastercardIcon({ className }: { className?: string }) {
19  return (
20    <svg viewBox="0 0 38 24" className={className} aria-hidden="true">
21      <rect width="38" height="24" rx="4" fill="currentColor" fillOpacity="0.08" />
22      <circle cx="15" cy="12" r="5" fill="currentColor" fillOpacity="0.6" />
23      <circle cx="23" cy="12" r="5" fill="currentColor" fillOpacity="0.4" />
24    </svg>
25  )
26}
27 
28function AmexIcon({ className }: { className?: string }) {
29  return (
30    <svg viewBox="0 0 38 24" className={className} aria-hidden="true">
31      <rect width="38" height="24" rx="4" fill="currentColor" fillOpacity="0.08" />
32      <text
33        x="19"
34        y="16"
35        textAnchor="middle"
36        fontSize="8"
37        fontWeight="700"
38        fill="currentColor"
39        fontFamily="sans-serif"
40      >
41        AMEX
42      </text>
43    </svg>
44  )
45}
46 
47function PayPalIcon({ className }: { className?: string }) {
48  return (
49    <svg viewBox="0 0 38 24" className={className} aria-hidden="true">
50      <rect width="38" height="24" rx="4" fill="currentColor" fillOpacity="0.08" />
51      <text
52        x="19"
53        y="16"
54        textAnchor="middle"
55        fontSize="7"
56        fontWeight="700"
57        fill="currentColor"
58        fontFamily="sans-serif"
59      >
60        PayPal
61      </text>
62    </svg>
63  )
64}
65 
66function ApplePayIcon({ className }: { className?: string }) {
67  return (
68    <svg viewBox="0 0 38 24" className={className} aria-hidden="true">
69// … truncated