feat(docs): list readers per-country availability (#646)

matoous · web-flow · commit a721ca9507ca · 2026-04-03T14:51:47.000+02:00
diff --git a/src/components/content/Country.astro b/src/components/content/Country.astro
@@ -0,0 +1,38 @@
+---
+import { getIconURL, type IconName } from "@sumup-oss/icons";
+
+interface Props {
+  code: string;
+  name: string;
+}
+
+const { code, name } = Astro.props;
+const icon = `flag_${code.toLowerCase()}` as IconName;
+---
+
+<span class="country">
+  <img
+    class="country-flag"
+    src={getIconURL(icon)}
+    height="15"
+    width="20"
+    alt={name}
+    loading="lazy"
+  />
+</span>
+
+<style>
+  .country {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    vertical-align: middle;
+  }
+
+  .country-flag {
+    display: inline-block;
+    border-radius: var(--cui-border-radius-bit);
+    object-fit: cover;
+    margin: 0;
+  }
+</style>
diff --git a/src/components/content/ReaderHero.astro b/src/components/content/ReaderHero.astro
@@ -15,7 +15,7 @@ const { alt, src, srcset, width, height } = Astro.props;
 
 <style>
   .reader-hero {
-    margin: 0 0 var(--cui-spacings-giga);
+    margin: var(--cui-spacings-giga) 0;
     text-align: center;
   }
 
diff --git a/src/content/docs/terminal-payments/readers/3g.mdx b/src/content/docs/terminal-payments/readers/3g.mdx
@@ -6,6 +6,11 @@ sidebar:
 ---
 
 import ReaderHero from '@components/content/ReaderHero.astro';
+import Country from '@components/content/Country.astro';
+
+**Available in**: <Country code="AT" name="Austria" /> <Country code="BE" name="Belgium" /> <Country code="BG" name="Bulgaria" /> <Country code="CL" name="Chile" /> <Country code="CY" name="Cyprus" /> <Country code="CZ" name="Czech Republic" /> <Country code="DK" name="Denmark" /> <Country code="EE" name="Estonia" /> <Country code="FI" name="Finland" /> <Country code="FR" name="France" /> <Country code="DE" name="Germany" /> <Country code="GR" name="Greece" /> <Country code="HU" name="Hungary" /> <Country code="IE" name="Ireland" /> <Country code="IT" name="Italy" /> <Country code="LV" name="Latvia" /> <Country code="LT" name="Lithuania" /> <Country code="LU" name="Luxembourg" /> <Country code="MT" name="Malta" /> <Country code="NL" name="Netherlands" /> <Country code="NO" name="Norway" /> <Country code="PL" name="Poland" /> <Country code="PT" name="Portugal" /> <Country code="RO" name="Romania" /> <Country code="SK" name="Slovakia" /> <Country code="SI" name="Slovenia" /> <Country code="ES" name="Spain" /> <Country code="SE" name="Sweden" /> <Country code="CH" name="Switzerland" /> <Country code="GB" name="United Kingdom" /> <Country code="US" name="United States" />
+
+The 3G reader is a standalone mobile reader with its own network connectivity and optional printer support.
 
 <ReaderHero
   alt="3G card reader"
@@ -15,8 +20,6 @@ import ReaderHero from '@components/content/ReaderHero.astro';
   height={556}
 />
 
-The 3G reader is a standalone mobile reader with its own network connectivity and optional printer support.
-
 ## Basic Information
 
 | Category | Details |
diff --git a/src/content/docs/terminal-payments/readers/air.mdx b/src/content/docs/terminal-payments/readers/air.mdx
@@ -6,6 +6,11 @@ sidebar:
 ---
 
 import ReaderHero from '@components/content/ReaderHero.astro';
+import Country from '@components/content/Country.astro';
+
+**Available in**: <Country code="AT" name="Austria" /> <Country code="AU" name="Australia" /> <Country code="BE" name="Belgium" /> <Country code="BG" name="Bulgaria" /> <Country code="CL" name="Chile" /> <Country code="CO" name="Colombia" /> <Country code="HR" name="Croatia" /> <Country code="CY" name="Cyprus" /> <Country code="CZ" name="Czech Republic" /> <Country code="DK" name="Denmark" /> <Country code="EE" name="Estonia" /> <Country code="FI" name="Finland" /> <Country code="FR" name="France" /> <Country code="DE" name="Germany" /> <Country code="GR" name="Greece" /> <Country code="HU" name="Hungary" /> <Country code="IE" name="Ireland" /> <Country code="IT" name="Italy" /> <Country code="LV" name="Latvia" /> <Country code="LT" name="Lithuania" /> <Country code="LU" name="Luxembourg" /> <Country code="MT" name="Malta" /> <Country code="NL" name="Netherlands" /> <Country code="NO" name="Norway" /> <Country code="PE" name="Peru" /> <Country code="PL" name="Poland" /> <Country code="PT" name="Portugal" /> <Country code="RO" name="Romania" /> <Country code="SK" name="Slovakia" /> <Country code="SI" name="Slovenia" /> <Country code="ES" name="Spain" /> <Country code="SE" name="Sweden" /> <Country code="CH" name="Switzerland" /> <Country code="GB" name="United Kingdom" /> <Country code="US" name="United States" />
+
+Air is a Bluetooth reader for merchants who run checkout from a phone, tablet, or POS app.
 
 <ReaderHero
   alt="Air card reader"
@@ -15,8 +20,6 @@ import ReaderHero from '@components/content/ReaderHero.astro';
   height={320}
 />
 
-Air is a Bluetooth reader for merchants who run checkout from a phone, tablet, or POS app.
-
 ## Basic Information
 
 | Category | Details |
diff --git a/src/content/docs/terminal-payments/readers/pin-plus.mdx b/src/content/docs/terminal-payments/readers/pin-plus.mdx
@@ -6,6 +6,11 @@ sidebar:
 ---
 
 import ReaderHero from '@components/content/ReaderHero.astro';
+import Country from '@components/content/Country.astro';
+
+**Available in**: <Country code="AT" name="Austria" /> <Country code="BE" name="Belgium" /> <Country code="BR" name="Brazil" /> <Country code="CH" name="Switzerland" /> <Country code="CL" name="Chile" /> <Country code="DE" name="Germany" /> <Country code="ES" name="Spain" /> <Country code="FR" name="France" /> <Country code="GB" name="United Kingdom" /> <Country code="IE" name="Ireland" /> <Country code="IT" name="Italy" /> <Country code="NL" name="Netherlands" /> <Country code="PL" name="Poland" /> <Country code="PT" name="Portugal" /> <Country code="SE" name="Sweden" />
+
+PIN+ is an older paired SumUp reader that connected to mobile devices for card-present payments.
 
 <ReaderHero
   alt="PIN+ card reader"
@@ -15,8 +20,6 @@ import ReaderHero from '@components/content/ReaderHero.astro';
   height={320}
 />
 
-PIN+ is an older paired SumUp reader that connected to mobile devices for card-present payments.
-
 ## Basic Information
 
 | Category | Details |
diff --git a/src/content/docs/terminal-payments/readers/solo-lite.mdx b/src/content/docs/terminal-payments/readers/solo-lite.mdx
@@ -6,6 +6,11 @@ sidebar:
 ---
 
 import ReaderHero from '@components/content/ReaderHero.astro';
+import Country from '@components/content/Country.astro';
+
+**Available in**: <Country code="AT" name="Austria" /> <Country code="BE" name="Belgium" /> <Country code="BR" name="Brazil" /> <Country code="BG" name="Bulgaria" /> <Country code="CL" name="Chile" /> <Country code="CO" name="Colombia" /> <Country code="HR" name="Croatia" /> <Country code="CY" name="Cyprus" /> <Country code="CZ" name="Czech Republic" /> <Country code="DK" name="Denmark" /> <Country code="EE" name="Estonia" /> <Country code="FI" name="Finland" /> <Country code="FR" name="France" /> <Country code="DE" name="Germany" /> <Country code="GR" name="Greece" /> <Country code="HU" name="Hungary" /> <Country code="IE" name="Ireland" /> <Country code="IT" name="Italy" /> <Country code="LV" name="Latvia" /> <Country code="LT" name="Lithuania" /> <Country code="LU" name="Luxembourg" /> <Country code="MT" name="Malta" /> <Country code="NL" name="Netherlands" /> <Country code="NO" name="Norway" /> <Country code="PE" name="Peru" /> <Country code="PL" name="Poland" /> <Country code="PT" name="Portugal" /> <Country code="RO" name="Romania" /> <Country code="SK" name="Slovakia" /> <Country code="SI" name="Slovenia" /> <Country code="ES" name="Spain" /> <Country code="SE" name="Sweden" /> <Country code="CH" name="Switzerland" /> <Country code="GB" name="United Kingdom" /> <Country code="US" name="United States" />
+
+Solo Lite is a lightweight reader that pairs with the SumUp app over Bluetooth. It is aimed at mobile businesses that want simpler hardware than Solo.
 
 <ReaderHero
   alt="Solo Lite card reader"
@@ -15,8 +20,6 @@ import ReaderHero from '@components/content/ReaderHero.astro';
   height={298}
 />
 
-Solo Lite is a lightweight reader that pairs with the SumUp app over Bluetooth. It is aimed at mobile businesses that want simpler hardware than Solo.
-
 ## Basic Information
 
 | Category | Details |
diff --git a/src/content/docs/terminal-payments/readers/solo.mdx b/src/content/docs/terminal-payments/readers/solo.mdx
@@ -6,6 +6,11 @@ sidebar:
 ---
 
 import ReaderHero from '@components/content/ReaderHero.astro';
+import Country from '@components/content/Country.astro';
+
+**Available in**: <Country code="AT" name="Austria" /> <Country code="AU" name="Australia" /> <Country code="BE" name="Belgium" /> <Country code="BR" name="Brazil" /> <Country code="BG" name="Bulgaria" /> <Country code="CL" name="Chile" /> <Country code="CO" name="Colombia" /> <Country code="HR" name="Croatia" /> <Country code="CY" name="Cyprus" /> <Country code="CZ" name="Czech Republic" /> <Country code="DK" name="Denmark" /> <Country code="EE" name="Estonia" /> <Country code="FI" name="Finland" /> <Country code="FR" name="France" /> <Country code="DE" name="Germany" /> <Country code="GR" name="Greece" /> <Country code="HU" name="Hungary" /> <Country code="IE" name="Ireland" /> <Country code="IT" name="Italy" /> <Country code="LV" name="Latvia" /> <Country code="LT" name="Lithuania" /> <Country code="LU" name="Luxembourg" /> <Country code="MT" name="Malta" /> <Country code="NL" name="Netherlands" /> <Country code="NO" name="Norway" /> <Country code="PE" name="Peru" /> <Country code="PL" name="Poland" /> <Country code="PT" name="Portugal" /> <Country code="RO" name="Romania" /> <Country code="SK" name="Slovakia" /> <Country code="SI" name="Slovenia" /> <Country code="ES" name="Spain" /> <Country code="SE" name="Sweden" /> <Country code="CH" name="Switzerland" /> <Country code="GB" name="United Kingdom" /> <Country code="US" name="United States" />
+
+Solo is SumUp's standalone reader with a touchscreen. It can accept payments independently and can also be used in connected integration flows.
 
 <ReaderHero
   alt="Solo card reader"
@@ -15,8 +20,6 @@ import ReaderHero from '@components/content/ReaderHero.astro';
   height={298}
 />
 
-Solo is SumUp's standalone reader with a touchscreen. It can accept payments independently and can also be used in connected integration flows.
-
 ## Basic Information
 
 | Category | Details |
diff --git a/src/content/docs/terminal-payments/readers/tap-to-pay.mdx b/src/content/docs/terminal-payments/readers/tap-to-pay.mdx
@@ -6,6 +6,13 @@ sidebar:
 ---
 
 import ReaderHero from '@components/content/ReaderHero.astro';
+import Country from '@components/content/Country.astro';
+
+**Available in (Android)**: <Country code="AU" name="Australia" /> <Country code="AT" name="Austria" /> <Country code="BE" name="Belgium" /> <Country code="BR" name="Brazil" /> <Country code="BG" name="Bulgaria" /> <Country code="CL" name="Chile" /> <Country code="CO" name="Colombia" /> <Country code="HR" name="Croatia" /> <Country code="CY" name="Cyprus" /> <Country code="CZ" name="Czech Republic" /> <Country code="DK" name="Denmark" /> <Country code="EE" name="Estonia" /> <Country code="FI" name="Finland" /> <Country code="FR" name="France" /> <Country code="DE" name="Germany" /> <Country code="GR" name="Greece" /> <Country code="HU" name="Hungary" /> <Country code="IE" name="Ireland" /> <Country code="IT" name="Italy" /> <Country code="LV" name="Latvia" /> <Country code="LT" name="Lithuania" /> <Country code="LU" name="Luxembourg" /> <Country code="MT" name="Malta" /> <Country code="NL" name="Netherlands" /> <Country code="NO" name="Norway" /> <Country code="PE" name="Peru" /> <Country code="PL" name="Poland" /> <Country code="PT" name="Portugal" /> <Country code="RO" name="Romania" /> <Country code="SK" name="Slovakia" /> <Country code="SI" name="Slovenia" /> <Country code="ES" name="Spain" /> <Country code="SE" name="Sweden" /> <Country code="CH" name="Switzerland" /> <Country code="GB" name="United Kingdom" /> <Country code="US" name="United States" />
+
+**Available in (iOS)**: <Country code="AU" name="Australia" /> <Country code="AT" name="Austria" /> <Country code="BE" name="Belgium" /> <Country code="BR" name="Brazil" /> <Country code="BG" name="Bulgaria" /> <Country code="CL" name="Chile" /> <Country code="HR" name="Croatia" /> <Country code="CY" name="Cyprus" /> <Country code="CZ" name="Czech Republic" /> <Country code="DK" name="Denmark" /> <Country code="EE" name="Estonia" /> <Country code="FI" name="Finland" /> <Country code="FR" name="France" /> <Country code="DE" name="Germany" /> <Country code="HU" name="Hungary" /> <Country code="IE" name="Ireland" /> <Country code="IT" name="Italy" /> <Country code="LV" name="Latvia" /> <Country code="LT" name="Lithuania" /> <Country code="LU" name="Luxembourg" /> <Country code="MT" name="Malta" /> <Country code="NL" name="Netherlands" /> <Country code="NO" name="Norway" /> <Country code="PL" name="Poland" /> <Country code="PT" name="Portugal" /> <Country code="RO" name="Romania" /> <Country code="SK" name="Slovakia" /> <Country code="SI" name="Slovenia" /> <Country code="ES" name="Spain" /> <Country code="SE" name="Sweden" /> <Country code="CH" name="Switzerland" /> <Country code="GB" name="United Kingdom" />
+
+Tap to Pay lets merchants accept in-person contactless payments directly on a compatible phone without carrying a separate card reader.
 
 <ReaderHero
   alt="Tap to Pay on a mobile device"
@@ -15,8 +22,6 @@ import ReaderHero from '@components/content/ReaderHero.astro';
   height={671}
 />
 
-Tap to Pay lets merchants accept in-person contactless payments directly on a compatible phone without carrying a separate card reader.
-
 ## Basic Information
 
 | Category | Details |

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ const { alt, src, srcset, width, height } = Astro.props;`
`15`	`15`
`16`	`16`	`<style>`
`17`	`17`	`.reader-hero {`
`18`		`- margin: 0 0 var(--cui-spacings-giga);`
	`18`	`+ margin: var(--cui-spacings-giga) 0;`
`19`	`19`	`text-align: center;`
`20`	`20`	`}`
`21`	`21`