From 7bf59867e5af95c8a90d3c331f48cc637e39c69d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matou=C5=A1=20Dzivjak?= Date: Thu, 2 Apr 2026 13:18:13 +0200 Subject: [PATCH 1/2] feat(docs): available payment methods Add documentation for available payments methods. --- src/components/content/Countries.astro | 66 +++++ .../content/PaymentMethodTitle.astro | 37 +++ src/content/docs/online-payments/index.mdx | 5 + .../docs/online-payments/payment-methods.mdx | 267 ++++++++++++++++++ src/content/docs/online-payments/testing.mdx | 2 +- 5 files changed, 376 insertions(+), 1 deletion(-) create mode 100644 src/components/content/Countries.astro create mode 100644 src/components/content/PaymentMethodTitle.astro create mode 100644 src/content/docs/online-payments/payment-methods.mdx diff --git a/src/components/content/Countries.astro b/src/components/content/Countries.astro new file mode 100644 index 00000000..8c41de81 --- /dev/null +++ b/src/components/content/Countries.astro @@ -0,0 +1,66 @@ +--- +import { getIconURL, type IconName } from "@sumup-oss/icons"; +import countryData from "../../data/merchant-country-data.json"; + +interface Props { + countries: string[]; +} + +const { countries } = Astro.props; + +const countryNameByCode = new Map( + countryData.countries.map((country) => [ + country.isoCode, + country.displayName, + ]), +); +--- + + + { + countries.map((code) => { + const icon = `flag_${code.toLowerCase()}` as IconName; + const name = countryNameByCode.get(code) ?? code; + + return ( + + + {name} + + ); + }) + } + + + diff --git a/src/components/content/PaymentMethodTitle.astro b/src/components/content/PaymentMethodTitle.astro new file mode 100644 index 00000000..0a35d930 --- /dev/null +++ b/src/components/content/PaymentMethodTitle.astro @@ -0,0 +1,37 @@ +--- +import { getIconURL, type IconName } from "@sumup-oss/icons"; + +interface Props { + icon: IconName; + iconSize?: "24" | "32"; + title: string; +} + +const { icon, iconSize = "32", title } = Astro.props; +--- + +

+ + {title} +

+ + diff --git a/src/content/docs/online-payments/index.mdx b/src/content/docs/online-payments/index.mdx index ab4964f0..1972bce8 100644 --- a/src/content/docs/online-payments/index.mdx +++ b/src/content/docs/online-payments/index.mdx @@ -71,6 +71,11 @@ Available APMs include: The APMs you can offer depend on the location your business is registered and operates in. + + ### SumUp Swift Checkout SDK The Swift Checkout SDK provides a complete and fast checkout experience to your end users, collecting payment, address, and contact information with a click of a button. diff --git a/src/content/docs/online-payments/payment-methods.mdx b/src/content/docs/online-payments/payment-methods.mdx new file mode 100644 index 00000000..ce5a692f --- /dev/null +++ b/src/content/docs/online-payments/payment-methods.mdx @@ -0,0 +1,267 @@ +--- +title: Payment Methods +description: Learn which SumUp online payment methods you can offer, how availability works, and which integration path to start with. +sidebar: + order: 5 +--- + +import { Aside, Steps } from "@astrojs/starlight/components"; +import Countries from "@components/content/Countries.astro"; +import PaymentMethodTitle from "@components/content/PaymentMethodTitle.astro"; + +SumUp supports cards, wallets, bank redirects, bank debits, real-time payment methods, vouchers, and buy now, pay later payment methods. Use this page to understand which payment methods SumUp can offer, how they behave in a checkout, and where to start your integration. + +If you're deciding what to build first, start with [Payment Widget](/online-payments/checkouts/card-widget/) for an embedded checkout experience. + +Payment method families: + +- [Cards](#cards) +- [Wallets](#wallets) +- [Bank redirects](#bank-redirects) +- [Bank debits](#bank-debits) +- [Real-time payments](#real-time-payments) +- [Vouchers](#vouchers) +- [Buy now, pay later](#buy-now-pay-later) + +## Before You Start + +The payment methods you can offer depend on more than the payment method itself. In practice, availability depends on your merchant setup and on the specific checkout you create. + +- Merchant country and onboarding status determine which methods can be enabled for your account. +- Checkout currency, amount, and product can change the set of methods returned for a specific checkout. +- Some methods redirect the customer away from your site or return payment artifacts such as QR codes or vouchers instead of completing immediately. + +Treat the payment methods returned for a checkout as the source of truth for that checkout. + +## Cards + +Cards are the baseline online payment option. For Europe, the United Kingdom, and Chile, SumUp supports the following card schemes. Brazil also supports Elo and some additional niche local card schemes. + +Cards are the simplest place to start if you want broad coverage with a single integration. For most websites, use the [Payment Widget](/online-payments/checkouts/card-widget/) or [Swift Checkout](/online-payments/checkouts/swift-checkout/). + + + +**Availability:** Any supported market where Apple Pay is enabled for your merchant and your domain is verified + +[Visa](https://www.visa.com/) is one of the most widely accepted global card networks for online debit and credit card payments. + + + +**Availability:** Any supported market where Google Pay is enabled for your merchant and your domain is verified + +[Visa Electron](https://www.visa.com/) is a Visa debit card product commonly used for consumer card payments in supported markets. + + + +**Availability:** Europe, United Kingdom, and Chile + +[V Pay](https://www.visa.co.uk/pay-with-visa/find-a-card/v-pay.html) is Visa's European debit card scheme designed for regional card acceptance. + + + +**Availability:** Europe, United Kingdom, and Chile + +[Mastercard](https://www.mastercard.com/) is a global card network used for both credit and debit card payments. + + + +**Availability:** Europe, United Kingdom, and Chile + +[Maestro](https://www.mastercard.com/) is Mastercard's debit card brand for everyday consumer payments. + + + +**Availability:** Europe, United Kingdom, and Chile + +[American Express](https://www.americanexpress.com/) is a global card network widely used for consumer and business card payments. + + + +**Availability:** Europe, United Kingdom, and Chile + +[Discover](https://www.discover.com/) is an international card network that can be used for online card payments in supported markets. + + + +**Availability:** Europe, United Kingdom, and Chile + +[JCB](https://www.global.jcb/en/) is a global card network originating in Japan and accepted for online payments in supported regions. + + + +**Availability:** Brazil + +[Elo](https://www.elo.com.br/) is a Brazilian card scheme supported for online payments in Brazil. Additional niche local card schemes may also be supported. + +## Wallets + +Wallets provide a faster checkout experience by reusing saved payment details or wallet balances. + +Wallets are useful when you want faster checkout on mobile and supported browsers. Apple Pay and Google Pay can be offered through [Payment Widget](/online-payments/checkouts/card-widget/), through the [Swift Checkout SDK](/online-payments/checkouts/swift-checkout/), or through their dedicated direct integration guides. + + + +**Availability:** Any supported market where Apple Pay is enabled for your merchant and your domain is verified + +[Apple Pay](https://www.apple.com/apple-pay/) is Apple's wallet-based checkout experience for Safari and Apple devices. + + + +**Availability:** Any supported market where Google Pay is enabled for your merchant and your domain is verified + +[Google Pay](https://pay.google.com/about/) is Google's wallet checkout option for supported browsers, devices, and Android surfaces. + + + +**Availability:** Europe, United Kingdom, and Chile + +[Samsung Pay](https://www.samsung.com/pay/) is Samsung's wallet-based checkout method for supported Samsung devices and browsers. + + + +**Availability:** + +[PayPal](https://www.paypal.com/) lets customers authorize payments using their PayPal account instead of entering card details directly. + + + +**Availability:** + +[Satispay](https://www.satispay.com/) is an Italian wallet and mobile payment method designed for fast app-based checkout. + + + +**Availability:** + +[SumUp Pay](https://www.sumup.com/) is SumUp's own payment experience for returning customers within the SumUp ecosystem. + + + +**Availability:** + +[BANCOMAT Pay](https://www.bancomat.it/en/bancomat-pay/) is an Italian account-linked mobile payment method operated by BANCOMAT. + +## Bank Redirects + +Bank redirect methods send the customer to their bank or local payment network to approve the payment. + +These methods usually require you to handle a pending status and send the customer through an additional authorization step. Payment Widget handles this checkout experience for the customer. + + + +**Availability:** + +[Bancontact](https://bancontact.com/en) is Belgium's domestic online payment method for redirect-based checkout. + + + +**Availability:** + +[Blik](https://blik.com/en) is a Polish payment method that lets customers confirm payments through their banking app. + + + +**Availability:** + +[EPS](https://www.eps-ueberweisung.at/) is an Austrian online bank redirect method commonly used for domestic ecommerce payments. + + + +**Availability:** + +[Giropay](https://www.giropay.de/) is a German online banking payment method. In SumUp it is currently treated as deprecated. + + + +**Availability:** + +[iDeal](https://www.ideal.nl/en/) is the Netherlands' most widely used online banking payment method for ecommerce. + + + +**Availability:** + +[MyBank](https://www.mybank.eu/) is a European online bank payment scheme that redirects customers to authorize the transaction with their bank. + + + +**Availability:** + +[Przelewy24](https://www.przelewy24.pl/en) is a Polish online bank redirect method and payment network for local ecommerce checkout. + + + +**Availability:** + +[TWINT](https://www.twint.ch/en/) is a Swiss mobile payment method that supports wallet-style and bank-linked payments. + +## Bank Debits + +Bank debit methods collect funds directly from the customer's bank account. + +Bank debit methods can require additional customer details depending on the checkout flow. + + + +**Availability:** Euro-denominated merchant accounts in supported markets + +[SEPA](https://www.europeanpaymentscouncil.eu/what-we-do/sepa-payment-schemes) Direct Debit allows merchants to collect euro-denominated payments directly from a customer's bank account. + +## Real-Time Payments + +Real-time payment methods confirm funds immediately and are commonly used for local account-to-account payment flows. + +Some real-time methods return payment artifacts such as QR codes instead of using a browser redirect. + + + +**Availability:** + +[PIX](https://www.bcb.gov.br/estabilidadefinanceira/pix) is Brazil's instant payment system for real-time account-to-account transfers. + + + +**Availability:** + +[QR Code powered by PIX](https://www.bcb.gov.br/estabilidadefinanceira/pix) lets customers complete a PIX payment by scanning a generated QR code. + +## Vouchers + +Voucher-based methods generate a payment artifact that the customer uses to complete the purchase. + +Voucher methods are asynchronous by nature and rely on a payment artifact that the customer uses to complete the payment. + + + +**Availability:** + +[Boleto](https://portal.febraban.org.br/pagina/3166/33/en/) is a Brazilian voucher-based payment method where the customer pays using a generated boleto document or barcode. + +## Buy Now, Pay Later + +Buy now, pay later methods allow customers to defer or split payments while you offer a standard checkout flow. + +These methods are displayed conditionally based on merchant country, checkout parameters, and account setup. + + + +**Availability:** + +[Klarna](https://www.klarna.com/) offers deferred and installment-based payment experiences for supported merchant markets. + + + +**Availability:** + +[Klarna Pay Later](https://www.klarna.com/) is Klarna's delayed-payment option that lets customers pay after the purchase is completed. + + diff --git a/src/content/docs/online-payments/testing.mdx b/src/content/docs/online-payments/testing.mdx index c17d6cd3..09bb61b7 100644 --- a/src/content/docs/online-payments/testing.mdx +++ b/src/content/docs/online-payments/testing.mdx @@ -2,7 +2,7 @@ title: Testing description: Learn how to test online payments using a sandbox merchant account and test cards with different 3D Secure flows. sidebar: - order: 5 + order: 4 --- import { Aside, Steps } from "@astrojs/starlight/components"; From 5ed813298f24cde2457f050223a7ea1d20a95638 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matou=C5=A1=20Dzivjak?= Date: Sat, 4 Apr 2026 09:29:30 +0200 Subject: [PATCH 2/2] chore: update, normalize --- src/components/content/Countries.astro | 66 ------------- .../docs/online-payments/payment-methods.mdx | 95 +++++-------------- .../docs/terminal-payments/readers/air.mdx | 2 +- .../terminal-payments/readers/solo-lite.mdx | 2 +- .../docs/terminal-payments/readers/solo.mdx | 2 +- .../terminal-payments/readers/tap-to-pay.mdx | 2 +- 6 files changed, 30 insertions(+), 139 deletions(-) delete mode 100644 src/components/content/Countries.astro diff --git a/src/components/content/Countries.astro b/src/components/content/Countries.astro deleted file mode 100644 index 8c41de81..00000000 --- a/src/components/content/Countries.astro +++ /dev/null @@ -1,66 +0,0 @@ ---- -import { getIconURL, type IconName } from "@sumup-oss/icons"; -import countryData from "../../data/merchant-country-data.json"; - -interface Props { - countries: string[]; -} - -const { countries } = Astro.props; - -const countryNameByCode = new Map( - countryData.countries.map((country) => [ - country.isoCode, - country.displayName, - ]), -); ---- - - - { - countries.map((code) => { - const icon = `flag_${code.toLowerCase()}` as IconName; - const name = countryNameByCode.get(code) ?? code; - - return ( - - - {name} - - ); - }) - } - - - diff --git a/src/content/docs/online-payments/payment-methods.mdx b/src/content/docs/online-payments/payment-methods.mdx index ce5a692f..c50fdbee 100644 --- a/src/content/docs/online-payments/payment-methods.mdx +++ b/src/content/docs/online-payments/payment-methods.mdx @@ -5,8 +5,8 @@ sidebar: order: 5 --- -import { Aside, Steps } from "@astrojs/starlight/components"; -import Countries from "@components/content/Countries.astro"; +import { Aside } from "@astrojs/starlight/components"; +import Country from "@components/content/Country.astro"; import PaymentMethodTitle from "@components/content/PaymentMethodTitle.astro"; SumUp supports cards, wallets, bank redirects, bank debits, real-time payment methods, vouchers, and buy now, pay later payment methods. Use this page to understand which payment methods SumUp can offer, how they behave in a checkout, and where to start your integration. @@ -21,7 +21,6 @@ Payment method families: - [Bank debits](#bank-debits) - [Real-time payments](#real-time-payments) - [Vouchers](#vouchers) -- [Buy now, pay later](#buy-now-pay-later) ## Before You Start @@ -41,55 +40,55 @@ Cards are the simplest place to start if you want broad coverage with a single i -**Availability:** Any supported market where Apple Pay is enabled for your merchant and your domain is verified +**Availability:** [Visa](https://www.visa.com/) is one of the most widely accepted global card networks for online debit and credit card payments. -**Availability:** Any supported market where Google Pay is enabled for your merchant and your domain is verified +**Availability:** [Visa Electron](https://www.visa.com/) is a Visa debit card product commonly used for consumer card payments in supported markets. -**Availability:** Europe, United Kingdom, and Chile +**Availability:** [V Pay](https://www.visa.co.uk/pay-with-visa/find-a-card/v-pay.html) is Visa's European debit card scheme designed for regional card acceptance. -**Availability:** Europe, United Kingdom, and Chile +**Availability:** [Mastercard](https://www.mastercard.com/) is a global card network used for both credit and debit card payments. -**Availability:** Europe, United Kingdom, and Chile +**Availability:** [Maestro](https://www.mastercard.com/) is Mastercard's debit card brand for everyday consumer payments. -**Availability:** Europe, United Kingdom, and Chile +**Availability:** [American Express](https://www.americanexpress.com/) is a global card network widely used for consumer and business card payments. -**Availability:** Europe, United Kingdom, and Chile +**Availability:** [Discover](https://www.discover.com/) is an international card network that can be used for online card payments in supported markets. -**Availability:** Europe, United Kingdom, and Chile +**Availability:** [JCB](https://www.global.jcb/en/) is a global card network originating in Japan and accepted for online payments in supported regions. -**Availability:** Brazil +**Availability:** [Elo](https://www.elo.com.br/) is a Brazilian card scheme supported for online payments in Brazil. Additional niche local card schemes may also be supported. @@ -101,43 +100,31 @@ Wallets are useful when you want faster checkout on mobile and supported browser -**Availability:** Any supported market where Apple Pay is enabled for your merchant and your domain is verified +**Availability:** [Apple Pay](https://www.apple.com/apple-pay/) is Apple's wallet-based checkout experience for Safari and Apple devices. -**Availability:** Any supported market where Google Pay is enabled for your merchant and your domain is verified +**Availability:** [Google Pay](https://pay.google.com/about/) is Google's wallet checkout option for supported browsers, devices, and Android surfaces. - - -**Availability:** Europe, United Kingdom, and Chile - -[Samsung Pay](https://www.samsung.com/pay/) is Samsung's wallet-based checkout method for supported Samsung devices and browsers. - -**Availability:** +**Availability:** [PayPal](https://www.paypal.com/) lets customers authorize payments using their PayPal account instead of entering card details directly. - - -**Availability:** - -[Satispay](https://www.satispay.com/) is an Italian wallet and mobile payment method designed for fast app-based checkout. - -**Availability:** +**Availability:** [SumUp Pay](https://www.sumup.com/) is SumUp's own payment experience for returning customers within the SumUp ecosystem. -**Availability:** +**Availability:** [BANCOMAT Pay](https://www.bancomat.it/en/bancomat-pay/) is an Italian account-linked mobile payment method operated by BANCOMAT. @@ -149,43 +136,37 @@ These methods usually require you to handle a pending status and send the custom -**Availability:** +**Availability:** [Bancontact](https://bancontact.com/en) is Belgium's domestic online payment method for redirect-based checkout. -**Availability:** +**Availability:** [Blik](https://blik.com/en) is a Polish payment method that lets customers confirm payments through their banking app. -**Availability:** +**Availability:** [EPS](https://www.eps-ueberweisung.at/) is an Austrian online bank redirect method commonly used for domestic ecommerce payments. - - -**Availability:** - -[Giropay](https://www.giropay.de/) is a German online banking payment method. In SumUp it is currently treated as deprecated. - -**Availability:** +**Availability:** [iDeal](https://www.ideal.nl/en/) is the Netherlands' most widely used online banking payment method for ecommerce. -**Availability:** +**Availability:** [MyBank](https://www.mybank.eu/) is a European online bank payment scheme that redirects customers to authorize the transaction with their bank. -**Availability:** +**Availability:** [Przelewy24](https://www.przelewy24.pl/en) is a Polish online bank redirect method and payment network for local ecommerce checkout. @@ -194,7 +175,7 @@ These methods usually require you to handle a pending status and send the custom title="TWINT" /> -**Availability:** +**Availability:** [TWINT](https://www.twint.ch/en/) is a Swiss mobile payment method that supports wallet-style and bank-linked payments. @@ -204,12 +185,6 @@ Bank debit methods collect funds directly from the customer's bank account. Bank debit methods can require additional customer details depending on the checkout flow. - - -**Availability:** Euro-denominated merchant accounts in supported markets - -[SEPA](https://www.europeanpaymentscouncil.eu/what-we-do/sepa-payment-schemes) Direct Debit allows merchants to collect euro-denominated payments directly from a customer's bank account. - ## Real-Time Payments Real-time payment methods confirm funds immediately and are commonly used for local account-to-account payment flows. @@ -218,7 +193,7 @@ Some real-time methods return payment artifacts such as QR codes instead of usin -**Availability:** +**Availability:** [PIX](https://www.bcb.gov.br/estabilidadefinanceira/pix) is Brazil's instant payment system for real-time account-to-account transfers. @@ -228,7 +203,7 @@ Some real-time methods return payment artifacts such as QR codes instead of usin title="QR Code powered by PIX" /> -**Availability:** +**Availability:** [QR Code powered by PIX](https://www.bcb.gov.br/estabilidadefinanceira/pix) lets customers complete a PIX payment by scanning a generated QR code. @@ -240,28 +215,10 @@ Voucher methods are asynchronous by nature and rely on a payment artifact that t -**Availability:** +**Availability:** [Boleto](https://portal.febraban.org.br/pagina/3166/33/en/) is a Brazilian voucher-based payment method where the customer pays using a generated boleto document or barcode. -## Buy Now, Pay Later - -Buy now, pay later methods allow customers to defer or split payments while you offer a standard checkout flow. - -These methods are displayed conditionally based on merchant country, checkout parameters, and account setup. - - - -**Availability:** - -[Klarna](https://www.klarna.com/) offers deferred and installment-based payment experiences for supported merchant markets. - - - -**Availability:** - -[Klarna Pay Later](https://www.klarna.com/) is Klarna's delayed-payment option that lets customers pay after the purchase is completed. - diff --git a/src/content/docs/terminal-payments/readers/air.mdx b/src/content/docs/terminal-payments/readers/air.mdx index e48b6c62..cf2e7eaa 100644 --- a/src/content/docs/terminal-payments/readers/air.mdx +++ b/src/content/docs/terminal-payments/readers/air.mdx @@ -8,7 +8,7 @@ sidebar: import ReaderHero from '@components/content/ReaderHero.astro'; import Country from '@components/content/Country.astro'; -**Available in**: +**Available in**: Air is a Bluetooth reader for merchants who run checkout from a phone, tablet, or POS app. diff --git a/src/content/docs/terminal-payments/readers/solo-lite.mdx b/src/content/docs/terminal-payments/readers/solo-lite.mdx index 787c837f..12fc1bce 100644 --- a/src/content/docs/terminal-payments/readers/solo-lite.mdx +++ b/src/content/docs/terminal-payments/readers/solo-lite.mdx @@ -8,7 +8,7 @@ sidebar: import ReaderHero from '@components/content/ReaderHero.astro'; import Country from '@components/content/Country.astro'; -**Available in**: +**Available in**: 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. diff --git a/src/content/docs/terminal-payments/readers/solo.mdx b/src/content/docs/terminal-payments/readers/solo.mdx index cdaa820e..ee4b9b2b 100644 --- a/src/content/docs/terminal-payments/readers/solo.mdx +++ b/src/content/docs/terminal-payments/readers/solo.mdx @@ -8,7 +8,7 @@ sidebar: import ReaderHero from '@components/content/ReaderHero.astro'; import Country from '@components/content/Country.astro'; -**Available in**: +**Available in**: Solo is SumUp's standalone reader with a touchscreen. It can accept payments independently and can also be used in connected integration flows. diff --git a/src/content/docs/terminal-payments/readers/tap-to-pay.mdx b/src/content/docs/terminal-payments/readers/tap-to-pay.mdx index 0ae88619..09e924e7 100644 --- a/src/content/docs/terminal-payments/readers/tap-to-pay.mdx +++ b/src/content/docs/terminal-payments/readers/tap-to-pay.mdx @@ -8,7 +8,7 @@ sidebar: import ReaderHero from '@components/content/ReaderHero.astro'; import Country from '@components/content/Country.astro'; -**Available in (Android)**: +**Available in (Android)**: **Available in (iOS)**: